Inject <input> in innerHTML angular 2

Question

I am trying to inject a input HTML tag with Angular 2, here is my project :

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

The .ts :

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

Here is the log from the console :

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

I try with other html tag like <h3> and it works perfectly.

Answer 1

You should trust the HTML first before injecting it. You have to use the DomSanitizer for such a thing. An <h3> element is considered safe. An <input> element is not.

Change your FaxSendComponent to something like this:

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

And have your template stay the same as this:

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

A little heads-up though:

WARNING: calling this method with untrusted user data exposes your application to XSS security risks!

If you plan on using this technique more, you can try to write a Pipe to fulfil this task.

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

If you have a pipe like this, your FaxSendComponent will change to this:

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

Answer 2

create sanitizing.ts file when you use it for bind inner 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);   } } 

now register this module into your 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 { } 

now use when you can bind your html eg. 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>