清理Angular2中的输入 [英] Sanitize input in Angular2

问题描述

我正在尝试从数据库中获取第三方(可能不安全)的html内容，并将其插入到html文档中.

I am trying to get third-party (potentially unsafe) html content from my database and insert it into my html document.

如何安全地做到这一点(针对XSS的保护)?

How do I safely do that (Protection against XSS) ?

在 Angular1.x 中曾经有$sce来清理输入，如何在 Angular2 中做到这一点?据我了解， Angular2 默认情况下会自动清除它，对吗?

In Angular1.x there used to be $sce to sanitize input, how do I do that in Angular2 ? As far as I understand, Angular2 automatically sanitizes it by default, is that correct ?

类似这样的方法将不起作用:

Something like this will not work:

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

推荐答案

要将普通的HTML插入angular2应用中，可以使用[innerHtml]指令.

To insert normal HTML into your angular2 app, you can use the [innerHtml] directive.

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

这不适用于具有自己的组件和指令的HTML，至少不能以您期望的方式来实现.

This is not going to work with HTML which has its own components and directives, at least not in the way you'd expect it.

但是，如果确实收到不安全的html警告，则在注入HTML之前应首先信任它.您必须使用 DomSanitizer 对于这样的事情.例如，<h3>元素被认为是安全的. <input>元素不是.

If however you do get an unsafe html warning you should trust the HTML first before injecting it. You have to use the DomSanitizer for such a thing. For instance, an <h3> element is considered safe. An <input> element is not.

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

让您的模板与此保持不变:

And have your template stay the same as this:

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

不过要小心一点:

警告:使用不受信任的用户数据调用此方法会使您的应用程序面临XSS安全风险！

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

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

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

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:

If you have a pipe like this, your AppComponent will change to this. Don't forget to add the pipe to your declarations array of your NgModule:

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

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

} 

或者您可以编写 @Directive 做同样的事情:

Or you can write a @Directive to do the same:

@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:

If you have a directive like this, your AppComponent will change to this. Don't forget to add the directive to your declarations array of your NgModule:

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

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

} 

这篇关于清理Angular2中的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！