not - Inyectar<input> en innerHTML angular 2

innerhtml angular 5

Question

Estoy tratando de inyectar una etiqueta HTML de entrada con Angular 2, aquí está mi proyecto:

 <div [innerHTML]="inputpdf"></div>

El .ts:

export class FaxSendComponent {
inputpdf = ''<input type="text" name="fname">'';
}

Aquí está el registro de la consola:

ADVERTENCIA: la limpieza del HTML eliminó parte del contenido (consulte http://g.co/ng/security#xss ).

Intento con otra etiqueta html como <h3> y funciona perfectamente.

Answer 1

cree el archivo sanitizing.ts cuando lo use para enlazar el html interno.

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeHtml } from ''@angular/platform-browser'';
@Pipe({
name: ''sanitizeHtml''
})
export class SanitizeHtmlPipe implements PipeTransform {
constructor(private _sanitizer:DomSanitizer) {
}
transform(v:string):SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(v);
}
}

Ahora registre este módulo en su app.module.ts

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { FormsModule } from ''@angular/forms'';
import { HttpModule } from ''@angular/http'';
import { BrowserAnimationsModule } from ''@angular/platform-browser/animations'';
import { routes } from ''./app.routing'';
import { SanitizeHtmlPipe } from ''./product_details/filter'';
@NgModule({
declarations: [
SanitizeHtmlPipe
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
CookieLawModule,
routes
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

ahora use cuando puede enlazar su html por ejemplo. productDetails.html

<section class="multiple-img">
<div class="container" *ngIf="product_details">
<div class="row">
<h1 class="main-titel-text">Detail</h1>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="product-box-div">
<div class="product-img-div">
<img src="{{image_url.product_images}}{{product_details.product_image}}" alt="Product"/>
</div>
<div class="product-name-div">Name:- {{ product_details.product_name }}</div>
<div class="product-name-div">Price:- {{ product_details.product_price }}</div>
<div class="product-name-div">Selling Price:- {{ product_details.product_discount_price }}</div>
<div class="product-name-div" [innerHTML]="product_details.product_description | sanitizeHtml"></div>
</div>
</div>
</div>
</div>
</section>

Answer 2

Debes confiar en el HTML primero antes de inyectarlo. Tienes que usar el DomSanitizer para tal cosa. Un elemento <h3> se considera seguro. Un elemento <input> no lo es.

Cambie su FaxSendComponent a algo como esto:

export class FaxSendComponent {
private _inputpdf: string = ''<input type="text" name="fname">'';
public get inputpdf() : SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(this._inputpdf);
}
constructor(private _sanitizer: DomSanitizer){}
}

Y haz que tu plantilla permanezca igual que esta:

<div [innerHTML]="inputpdf"></div>

Un pequeño heads-up sin embargo:

ADVERTENCIA: llamar a este método con datos de usuario no confiables expone su aplicación a riesgos de seguridad XSS.

Si planea usar más esta técnica, puede intentar escribir un Pipe para realizar esta tarea.

@Pipe({
name: ''sanitizeHtml''
})
export class SanitizeHtml implements PipeTransform {
constructor(private _sanitizer: DomSanitizer){}
transform(v: string) : SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(v);
}
} 

Si tiene una canalización como esta, su FaxSendComponent cambiará a esto:

@Component({
selector: ''fax-send'',
template: `<div [innerHTML]="inputpdf | sanitizeHtml"></div>`
})
export class FaxSendComponent {
public inputpdf: string = ''<input type="text" name="fname">'';
}

Answer 3

Trate de usar backticks - `- en lugar de las comillas simples - ''-