Вводят <input> в innerHTML угловой 2

Question

Я пытаюсь придать входной HTML тег с угловыми 2, вот мой проект:

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

ts-:

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

Вот бревно из консоль:

ПРЕДУПРЕЖДЕНИЯ: дезинфицирующий HTML раздел некоторое содержание (см http://g.co/ng/security#xss).

Я пробую с другим тегом html как <h3>, и он отлично работает.

Answer 1

Вы должны доверять HTML первые перед впрыскиванием. Вы должны использовать DomSanitizer для такой вещи. Элемент <h3> считается безопасным. Элемент <input> нет.

Изменить FaxSendComponent на что-то вроде этого:

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

И ваш шаблон остаются такими же, как это:

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

Немного хедз-ап, хотя:

ПРЕДУПРЕЖДЕНИЕ : вызов этого метода с ненадежными пользовательскими данными предоставляет вашему приложению риски безопасности XSS!

Если вы планируете использовать этот метод больше, попробуйте написать Pipe для выполнения этой задачи.

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

    constructor(private _sanitizer: DomSanitizer){} 

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

Если у вас есть труба, как это, ваш FaxSendComponent изменится следующим образом:

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

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

} 

Answer 2

Попробуйте использовать кавычку - `- вместо одинарных кавычек - '-

Answer 3

создать sanitizing.ts файл, когда вы используете его для связывания внутренней HTML.

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

Теперь зарегистрировать этот модуль в ваш 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 { } 

теперь использовать, когда вы можете связать свой HTML, например. 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>