html - 在 innerHTML angular 2 中注入(inject) <input>

Question

我正在尝试使用 Angular 2 注入(inject)一个输入 HTML 标记，这是我的项目:

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

.ts:

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

这是来自控制台的日志:

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

我尝试使用其他 html 标签，例如 <h3>而且效果很好。

Answer 1

您应该信任 HTML首先在注入(inject)之前。你必须使用 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>

不过要注意一点:

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

如果你打算更多地使用这种技术，你可以尝试写一个 Pipe 完成这个任务。

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

   constructor(private _sanitizer: DomSanitizer){}  

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

如果你有这样的 pipe ，你的 FaxSendComponent将更改为:

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

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

}