angularangular-dom-sanitizer

Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG


I've been using DomSanitizer with an SVG in an html string.

Previous to the current version of Angular, this worked just fine:

this.domSanitizer.bypassSecurityTrustHtml(content);

Now I am getting an object back called

SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity

Is there now a new way to access the output of the DomSanitizer? Should I be receiving it as SafeHTML type or something? What's the point in having bypassSecurityTrustHtml if it still filters html?

Any answers on a postcard? Please...


Solution

  • DEMO : https://plnkr.co/edit/Qke2jktna55h40ubUl8o?p=preview

    import { DomSanitizer } from '@angular/platform-browser'
    
    @Pipe({ name: 'safeHtml'})
    export class SafeHtmlPipe implements PipeTransform  {
      constructor(private sanitized: DomSanitizer) {}
      transform(value) {
        console.log(this.sanitized.bypassSecurityTrustHtml(value))
        return this.sanitized.bypassSecurityTrustHtml(value);
      }
    }
    
    @Component({
      selector: 'my-app',
      template: `
        <div [innerHtml]="html | safeHtml">
        </div>
      `,
    })
    export class App {
      name:string;
      html: safeHtml;
      constructor() {
        this.name = 'Angular2'
        this.html = "<svg> blah </svg>";
      }
    }