Question

Sto cercando di iniettare un tag input HTML con angolare 2, qui è il mio progetto:

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

I Ts:

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

Ecco il registro da la console:

ATTENZIONE: sanificazione HTML messo a nudo alcuni contenuti (vedi http://g.co/ng/security#xss).

Provo con altri tag html come <h3> e funziona perfettamente.

Answer 1

si dovrebbe fiducia il primo HTML prima di iniettarlo. Devi usare lo DomSanitizer per una cosa del genere. Un elemento <h3> è considerato sicuro. Un elemento <input> non lo è.

Cambia la tua FaxSendComponent a qualcosa di simile:

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

E avere il vostro modello di rimanere lo stesso di questo:

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

Un po 'heads-up però:

ATTENZIONE : chiamare questo metodo con dati utente non attendibili espone la tua applicazione ai rischi di sicurezza XSS!

Se si prevede di utilizzare questa tecnica di più, è possibile provare a scrivere un Pipe per svolgere questa attività.

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

    constructor(private _sanitizer: DomSanitizer){} 

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

Se si dispone di un tubo come questo, il vostro FaxSendComponent cambierà a questo:

@Component({ 
    selector: 'fax-send', 
    template: `<div [innerHTML]="inputpdf | sanitizeHtml"></div>` 
}) 
export class FaxSendComponent { 

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

} 

Answer 2

Prova utilizzando backticks - `- invece che le virgolette singole - '-

Answer 3

creare il file sanitizing.ts quando lo si utilizza per la legano 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); 
    } 
} 

ora Registrati questo modulo nelle vostre 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 { } 

ora utilizzare quando è possibile associare il codice HTML per esempio. 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>