Angular 2
Ignorer la désinfection pour les valeurs de confiance

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


Paramètres

Params Détails
sélecteur nom de tag vous référencez votre composant par dans le html
template (templateUrl) une chaîne représentant html qui sera insérée partout où se trouve la <selector> . templateUrl est un chemin vers un fichier html ayant le même comportement
des tuyaux un tableau de canaux utilisés par ce composant.

Remarques

SUPER IMPORTANT!

DÉSACTIVER LA DÉSINFECTION VOUS PERMET DE RISQUE DE XSS (Cross-Site Scripting) ET D'AUTRES VECTEURS D'ATTAQUE. S'IL VOUS PLAÎT VOUS ASSURER LA CONFIANCE CE QUE VOUS OBTENEZ 100%

L'utilisation de Pipes vous permet de ne modifier que les valeurs d'attributs comme suit: 

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

vous ne pouvez pas utiliser les tuyaux de cette façon: 

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

ou de cette façon 

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

Bypassing Sanitizing with pipes (pour réutiliser le code)

Le projet suit la structure du guide Angular2 Quickstart ici . 

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);

Cela trouve le fichier index.html à la racine du projet et le génère.

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 { }

C'est le composant de niveau supérieur qui regroupe les autres composants utilisés.

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

Ce composant fournit la vue avec laquelle le Pipe doit fonctionner.

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

}

C'est la logique qui décrit ce que sont les formats de tuyau.

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 vous deviez inspecter le HTML pendant que l'application est en cours d'exécution, vous verriez qu'il ressemble à ceci: 

<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
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow