在 RC.1中，有些样式不能使用绑定语法添加

更新(2.0.0最终版)

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


@Pipe({name: 'safeHtml'})
export class SafeHtml implements PipeTransform {
constructor(private sanitizer:DomSanitizer){}


transform(html) {
return this.sanitizer.bypassSecurityTrustStyle(html);
// return this.sanitizer.bypassSecurityTrustHtml(html);
// return this.sanitizer.bypassSecurityTrustScript(html);
// return this.sanitizer.bypassSecurityTrustUrl(html);
// return this.sanitizer.bypassSecurityTrustResourceUrl(html);
}
}

参见 https://angular.io/api/platform-browser/DomSanitizer

<div [innerHTML]="someHtml | safeHtml"

更新

DomSanitizationService将在 RC 中重命名为 DomSanitizer

原创的

这应该是固定在 RC。2

参见 Angular2开发指南-安全

Angular2引入了消毒 CSS 值和属性绑定，如 RC 中的 [innerHTML]=...和 [src]="..."

参见 https://github.com/angular/angular/issues/8491#issuecomment-217467582

可以使用 DomSanitizer.bypassSecurityTrustStyle(...)将这些值标记为受信任值

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(sanitizer: DomSanitizationService) {
this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle('url(' + this.image + ')');
// for HTML
// this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...);


}

并绑定到此值，而不是不受信任的纯字符串。

这也可以包装在一个类似

@Pipe({name: 'safeStyle'})
export class Safe {
constructor(private sanitizer:Sanitizer){}


transform(style) {
return this.sanitizer.bypassSecurityTrustStyle(style);
// return this.sanitizer.bypassSecurityTrustHtml(style);
// return this.sanitizer.bypassSecurityTrustScript(value);
// return this.sanitizer.bypassSecurityTrustUrl(value);
// return this.sanitizer.bypassSecurityTrustResourceUrl(value);
}
}

<div [ngStyle]="someStyle | safeStyle"></div>

和

someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`;

但是仍然在工作:-[(工作在进行中)

Plunker 示例 (角2.0.0-rc-1)

参见 角度2安全跟踪问题

和 https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

关于 \{\{...}}的提示

清理过的内容不能使用 prop="\{\{sanitizedContent}}"绑定，因为 \{\{}}在分配之前将值字符串化，从而破坏了清理。

绕过消毒程序信任任何内容都可能是一个安全问题。由于 Angular 不是一个专门的消毒库，它是过分热衷于可疑的内容，不采取任何风险。例如，它删除了几乎所有的属性。您可以将消毒委托给专用库ーー DOMPurify。下面是我用 Angular 创建的一个容易使用 DOMPurify 的包装器库。

Https://github.com/tinkoffcreditsystems/ng-dompurify

它还有一个管道来声明性地清理 HTML:

<div [innerHtml]="value | dompurify"></div>

需要记住的一点是，DOMPurify 可以很好地清理 HTML/SVG，但不能清理 CSS。所以你可以提供 Angular 的 CSS 消毒器来处理 CSS:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';


@NgModule({
// ...
providers: [
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}

它是内部的ーー hense ɵ前缀，但这也是 Angular 团队在他们自己的软件包中使用它的方式。