Estoy cargando una URL de confianza en un iframe que funciona bien. También quiero mostrar esa URL como una cadena en la página. Probé <div>{{url}}</div> pero muestra:
SafeValue debe usar [property]=binding: /my/resource/path.html (ver http://g.co/ng/security#xss )
También intenté usar <div [ngModel]="url"></div> , pero obtuve
Error: ningún acceso de valor para el control de formulario con atributo de nombre no especificado
¿Cómo puedo mostrarlo?
Desea mostrar este valor como html (no url o recurso); use bypassSecurityTrustHtml
@Component({ selector: 'my-app', template: ` <div [innerHTML]="url"><div> ` }) export class App { dangerousVideoUrl = "href='　javascript:alert(1)'"; constructor(private sanitizer: DomSanitizer) { this.url = this.sanitizer.bypassSecurityTrustHtml(this.dangerousVideoUrl); } }Puedes hacerlo de otra forma:
<iframe #foo [src]="contentUrl"></iframe> <p>{{ foo.src }}</p>Pruebe con un @Pipe para usar esto en toda su aplicación y con DomSanitizer para desinfectar la URL y evitar la seguridad XSS.
@Pipe({ name: 'sanitizeUrl', pure: false }) export class AsString implements PipeTransform { constructor(private domSanitizer: DomSanitizer) { } transform(value: string, args?: any): any { return this.domSanitizer.bypassSecurityTrustResourceUrl(value); } }Y en tu plantilla:
<div>{{url | sanitizeUrl}}</div>