change - page title angular 4

Desinfecte la entrada en Angular2

Question

Esta pregunta ya tiene una respuesta aquí:

• Angular HTML binding 15 respuestas

Estoy tratando de obtener contenido html de terceros (potencialmente inseguro) de mi base de datos e insertarlo en mi documento html. ¿Cómo puedo hacer eso de forma segura (Protección contra XSS)? En Angular1.x solía haber $sce para desinfectar la entrada, ¿cómo hago eso en Angular2? Por lo que yo entiendo, Angular2 automáticamente lo desinfecta por defecto, ¿es correcto?

Algo como esto no funcionará:

<div class="foo">
    {{someBoundValueWithSafeHTML}} // I want HTML from db here
</div>

Answer 1

Para insertar HTML normal en su aplicación angular2, puede usar la directiva [innerHtml] .

<div [innerHtml]="htmlProperty"></div>

Esto no funcionará con HTML, que tiene sus propios componentes y directivas, al menos no de la manera que usted esperaría.

Sin embargo, si recibe una advertencia html insegura, primero debe confiar en el HTML antes de inyectarlo. Tienes que usar el DomSanitizer para tal cosa. Por ejemplo, un elemento <h3> se considera seguro. Un elemento <input> no lo es.

export class AppComponent  {

    private _htmlProperty: string = ''<input type="text" name="name">'';

    public get htmlProperty() : SafeHtml {
       return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
    }

    constructor(private _sanitizer: DomSanitizer){}
}

Y que tu plantilla permanezca igual a esta:

<div [innerHtml]="htmlProperty"></div>

Sin embargo, un pequeño mano a mano:

ADVERTENCIA: si llama a este método con datos de usuario que no son de confianza, expone su aplicación a los riesgos de seguridad de XSS.

Si planeas usar esta técnica más, puedes intentar escribir una @Pipe para completar esta tarea.

@Pipe({
    name: ''sanitizeHtml''
})
class SanitizeHtml implements PipeTransform  {

   constructor(private _sanitizer: DomSanitizer){}  

   transform(html: string) : SafeHtml {
      return this._sanitizer.bypassSecurityTrustHtml(html); 
   } 
} 

Si tiene un tubo como este, su AppComponent cambiará a esto. No olvides agregar la tubería a tu matriz de declaraciones de tu NgModule :

@Component({
   selector: ''app'',
   template: `<div [innerHtml]="htmlProperty | sanitizeHtml"></div>`
})
export class AppComponent{

    public htmlProperty: string = ''<input type="text" name="name">'';

} 

O puede escribir una @Directive para hacer lo mismo:

@Directive({
   selector: ''[sanitizeHtml]''
})
export class SanitizeHtmlDirective {

    @Input()
    public sanitizeHtml: string;   

    @HostBinding(''innerHtml'')
    public get innerHtml(): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(this.sanitizeHtml);
    }

    constructor(private _sanitizer: DomSanitizer){}
}

Si tiene una directiva como esta, su AppComponent cambiará a esto. No olvide agregar la directiva a su matriz de declaraciones de su NgModule :

@Component({
   selector: ''app'',
   template: `<div [sanitizeHtml]="htmlProperty"></div>`
})
export class AppComponent{

    public htmlProperty: string = ''<input type="text" name="name">'';

}