RC.1では、バインディング構文で追加できないスタイルがある

質問

のようなスタイル

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

はもう追加されません。

どのように解決するのですか？

アップデート(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.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}}" なぜなら {{}} は値を代入する前に文字列を生成するため、サニタイズが壊れるからです。