Angular2中的输入消毒[副本]

Question

我正在尝试从我的数据库中获取第三方（潜在的不安全的）html内容，并将其插入到我的html文档中。

如何安全地做到这一点（针对XSS的保护）？

在Angular1.x中，以前有$sce来清理输入，在Angular2中如何做到这一点？据我理解，Angular2默认情况下自动对其进行消毒，是这样吗？

像这样的东西是行不通的：

<div class="foo">
    {{someBoundValueWithSafeHTML}} // I want HTML from db here
</div>

Answer 1

要将普通HTML插入到angular2应用程序中，可以使用[innerHtml]指令。

<div [innerHtml]="htmlProperty"></div>

这对HTML是行不通的，因为HTML有自己的组件和指令，至少不是以您所期望的方式。

但是，如果您确实得到了不安全的html警告，那么在注入html之前，您应该首先信任它。对于这样的事情，您必须使用domsanitizer。例如，

元素被认为是安全的。元素不是。

export class AppComponent  {

    private _htmlProperty: string = '<input type="text" name="name">';

    public get htmlProperty() : SafeHtml {
       return this.sr.bypassSecurityTrustHtml(this._htmlProperty);
    }

    constructor(private sr: DomSanitizer){}
}

<div [innerHtml]="htmlProperty"></div>

如果您打算更多地使用此技术，可以尝试编写@pipe来完成此任务。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
    name: 'trustHtml'
})
export class TrustHtmlPipe implements PipeTransform  {    
   constructor(readonly sr: DomSanitizer){}  

   transform(html: string) : SafeHtml {
      return this.sr.bypassSecurityTrustHtml(html); 
   } 
} 

如果您有这样的管道，您的AppComponent将更改为这个。不要忘记将管道添加到ngmodule的声明数组中：

@Component({
   selector: 'app',
   template: `<div [innerHtml]="htmlProperty | trustHtml"></div>`
})
export class AppComponent{

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

} 

也可以编写@directive来执行相同的操作：

@Directive({
   selector: '[trustHtml]'
})
export class SanitizeHtmlDirective {

    @Input()
    public set trustHtml(trustHtml: string) {
      if (this._trustHtml !== trustHtml) {
        this._trustHtml = trustHtml;
        this.innerHtml = this.sr.bypassSecurityTrustHtml(this.trustHtml);
      }
    }

    @HostBinding('innerHtml')
    innerHtml?: SafeHtml;

    private _trustHtml: string;

    constructor(readonly sr: DomSanitizer){}
}

如果您有这样的指令，您的AppComponent将更改为这个。不要忘记将指令添加到ngmodule的声明数组中：

@Component({
   selector: 'app',
   template: `<div [trustHtml]="htmlProperty"></div>`
})
export class AppComponent{

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

}