Angular 2
Bypassare la disinfezione per valori attendibili

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

Parametri

Parametri	Dettagli
selettore	nome del tag fai riferimento al tuo componente in html
modello (TemplateURL)	una stringa che rappresenta html che verrà inserita ovunque sia il tag `<selector>` . templateUrl è un percorso di un file html con lo stesso comportamento
tubi	una serie di pipe utilizzate da questo componente.

Osservazioni

SUPER IMPORTANTE!

DISABLING SANITIZING TIENE A RISCHIO DI XSS (Cross-Site Scripting) E ALTRI VETTORI D'ATTACCO. PER FAVORE ASSICURATI DI FIDARTI COSA STAI OTTENENDO 100%

L'utilizzo di Pipes ti relega a modificare solo i valori degli attributi in questo modo:

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

non sei in grado di usare i tubi in questo modo:

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

o in questo modo

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

Bypassing Sanitizing con pipe (per riutilizzo del codice)

Il progetto segue la struttura dalla guida rapida di Angular2 qui .

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

Questo trova il file index.html nella radice del progetto e ne costruisce.

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

Questo è il componente di livello superiore che raggruppa altri componenti utilizzati.

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

Questo componente fornisce la vista per il tubo con cui lavorare.

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

}

Questa è la logica che descrive il formato del tubo.

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

Se dovessi ispezionare l'html mentre l'app è in esecuzione, vedresti che assomiglia a questo:

<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

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow