Angular 2
Omitir la desinfección para valores de confianza

AngularJS CSS firebase HTML ionic2 ionic-framework JavaScript jQuery Node.js TypeScript
Buscar..


Parámetros

Parámetros Detalles
selector nombre de la etiqueta que hace referencia a su componente en el html
plantilla (templateUrl) una cadena que representa html que se insertará donde sea que esté la etiqueta <selector> . templateUrl es una ruta a un archivo html con el mismo comportamiento
tubería una matriz de tuberías que son utilizadas por este componente.

Observaciones

SUPER IMPORTANTE!

EL DESHABILITAR EL DESINFECTANTE LE PERMITE AL RIESGO DE XSS (secuencias de comandos entre sitios) Y OTROS VECTORES DE ATAQUE. POR FAVOR ASEGÚRESE DE QUE CONFIA EN LO QUE ESTÁ OBTENIENDO EL 100%

El uso de Pipes le relega a cambiar solo los valores de los atributos de esta manera: 

<tag [attribute]="expression or variable reference | pipeName">

No puedes usar tuberías de esta manera: 

<tag attribute="expression or variable reference | pipeName">

o de esta manera 

<tag attribute={{expression or variable reference | pipeName}}

Derivación de desinfección con tuberías (para la reutilización del código)

El proyecto sigue la estructura de la guía de inicio rápido de Angular2 aquí . 

RootOfProject
|
+-- app
|   |-- app.component.ts
|   |-- main.ts
|   |-- pipeUser.component.ts
|   \-- sanitize.pipe.ts
|
|-- index.html
|-- main.html
|-- pipe.html

main.ts 

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

Esto encuentra el archivo index.html en la raíz del proyecto, y se basa en eso.

app.component.ts 

import { Component } from '@angular/core';
import { PipeUserComponent } from './pipeUser.component';

@Component({
    selector: 'main-app',
    templateUrl: 'main.html',
    directives: [PipeUserComponent]
})

export class AppComponent { }

Este es el componente de nivel superior que agrupa otros componentes que se utilizan.

pipeUser.component.ts 

import { Component } from '@angular/core';
import { IgnoreSanitize } from "./sanitize.pipe";

@Component({
    selector: 'pipe-example',
    templateUrl: "pipe.html",
    pipes: [IgnoreSanitize]
})

export class PipeUserComponent{
    constructor () { }        
    unsafeValue: string = "unsafe/picUrl?id=";
    docNum: string;

    getUrl(input: string): any {
        if(input !== undefined) {
            return this.unsafeValue.concat(input);
            // returns : "unsafe/picUrl?id=input"
        } else {
            return "fallback/to/something";
        }
    }
}

Este componente proporciona la vista para que la tubería funcione.

sanitize.pipe.ts 

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizationService } from '@angular/platform-browser';

@Pipe({
    name: 'sanitaryPipe'
})
export class IgnoreSanitize implements PipeTransform {

   constructor(private sanitizer: DomSanitizationService){}

   transform(input: string) : any {
       return this.sanitizer.bypassSecurityTrustUrl(input);
   }

}

Esta es la lógica que describe lo que formatea la tubería.

index.html 

<head>
    Stuff goes here...
</head>
<body>
    <main-app> 
        main.html will load inside here.
    </main-app>
</body>

main.html 

<othertags> 
</othertags>

<pipe-example>  
    pipe.html will load inside here.
</pipe-example>

<moretags>
</moretags>

pipe.html 

<img [src]="getUrl('1234') | sanitaryPipe">
<embed [src]="getUrl() | sanitaryPipe">

Si fueras a inspeccionar el html mientras la aplicación se está ejecutando, verías que se ve así: 

<head>
    Stuff goes here...
</head>

<body>

    <othertags> 
    </othertags>
    
    <img [src]="getUrl('1234') | sanitaryPipe">
    <embed [src]="getUrl() | sanitaryPipe">
    
    <moretags>
    </moretags>

</body>


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow