example - safehtml angular 5

Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG

Question

He estado usando DomSanitizer con un SVG en una cadena html.

Anterior a la versión actual de Angular, esto funcionaba bien:

this.domSanitizer.bypassSecurityTrustHtml(content);

Ahora estoy recuperando un objeto llamado

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

¿Existe ahora una nueva forma de acceder a la salida del DomSanitizer? ¿Debo recibirlo como tipo SafeHTML o algo así? ¿De qué sirve tener bypassSecurityTrustHtml si aún filtra html?

¿Alguna respuesta en una postal? Por favor...

Answer 1

Utilice DomSanitizer.bypassSecurityTrustHtml :

constructor(private sanitizer: DomSanitizer) {
}
let html = this.sanitizer.bypassSecurityTrustHtml("<svg> blah </svg>");

Más información: https://angular.io/docs/ts/latest/guide/security.html#bypass-security-apis

Answer 2

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