Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG
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>"; }}
Use DomSanitizer.bypassSecurityTrustHtml:
constructor(private sanitizer: DomSanitizer) {}let html = this.sanitizer.bypassSecurityTrustHtml("<svg> blah </svg>");More information: https://angular.io/docs/ts/latest/guide/security.html#bypass-security-apis
This can also be done via object bracket notation:
let safeHtml = this.domSanitizer.bypassSecurityTrustHtml(content);console.log(safeHtml["changingThisBreaksApplicationSecurity");Had to do this because safeHtml.changingThisBreaksApplicationSecurity didn't work for me.