在RC.1中，无法使用绑定语法添加某些样式

Question 1

像

<div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"

不再添加

Question 2

更新（最终版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将DomSanitizer在RC.6中重命名为

原版的

此问题应在RC.2中修复

另请参阅《Angular2开发人员指南-安全性》

Angular2引入了对CSS值和属性绑定（如[innerHTML]=...和[src]="..."在RC.1

另请参阅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>`;

虽然仍在工作：-[（正在进行中）

柱塞示例（Angular 2.0.0-rc-1）

另请参阅Angular 2安全跟踪问题

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

提示 {{...}}

无法使用已清除内容的绑定，prop="{{sanitizedContent}}"因为{{}}stringyfyes在分配值之前会破坏其清除状态。

Question 3

绕过消毒剂以信任任何内容可能是安全问题。由于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团队在其自己的程序包中使用它的方式。