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

update (2.0.0 final)个

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"

update个

DomSanitizationService将被重命名为DomSanitizer

original个

这应该在RC.2中得到解决

另见Angular2 Developer Guide - Security

Angular2介绍了RC.1中CSS值和属性绑定(如[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 example(Angular 2.0.0-RC-1)

另见第Angular 2 Security Tracking Issue页

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

Hint about 100

无法使用prop="{{sanitizedContent}}"绑定经过清理的内容，因为{{}}会在分配值之前对其进行stringy处理，这会 destruct 清理.