Alexy Vercruysse Alexy Vercruysse - 3 months ago 219
TypeScript Question

Inject <input> in innerHTML angular 2

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

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

}
Comments