Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG

Question

Ich habe DomSanitizer mit einem SVG in einem HTML-String verwendet.

Zurück auf die aktuelle Version von Angular arbeitete dies ganz gut:

this.domSanitizer.bypassSecurityTrustHtml(content);

Jetzt bin ich ein Objekt immer zurückgerufen

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

Gibt es nun einen neuen Weg, der für den Zugriff auf Ausgabe des DomSanitizer? Soll ich es als SafeHTML-Typ oder etwas erhalten? Was ist der Punkt, wenn manSecurityTrustHtml umgehen muss, wenn es immer noch HTML filtert?

Alle Antworten auf einer Postkarte? Bitte ...

Answer 1

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>"; 
    } 
} 

Answer 2

Verwendung DomSanitizer.bypassSecurityTrustHtml:

constructor(private sanitizer: DomSanitizer) { 
} 

let html = this.sanitizer.bypassSecurityTrustHtml("<svg> blah </svg>"); 

Weitere Informationen: https://angular.io/docs/ts/latest/guide/security.html#bypass-security-apis