角度2は私が動的コンポーネントにグラデーションを設定しようとしていると、次の警告取得しています

Question

として危険な勾配の治療：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1 [style.background]="(\'linear-gradient(#000,#00f)\')">My First Angular 2 App</h1>' 
}) 
export class AppComponent {} 

マイ：ここでは、最小限の再現だ

WARNING: sanitizing unsafe style value linear-gradient(#000,#00f) (see http://g.co/ng/security#xss).

をグーグルはbypassSecurityTrustStyleを使用するように私に語ったが、私は私が知っていることをやってまで満足していない

1. 線形勾配が安全でないと考えられるのはなぜですか？
2. これは、現在のバージョンの角2のバグか、ちょうどバグですか。
3. 安全でないと判断されない限り、これを行うより良い方法はありますか？

グラデーション文字列をプログラマチックに作成しているので、これは動的である必要があります。私はこれのためのCSSクラスを使用することはできません。

Answer 1

を生きます。4（https://github.com/angular/angular/blob/master/CHANGELOG.md#244-2017-01-19）

PR：https://github.com/angular/angular/pull/13943/files

Answer 2

1）なぜ線形勾配が安全でないと考えられるのですか？

あなたのスタイルを逃し、その下の制限（特にブラケット）今日のよう

linear-gradient(#000,#00f) 

https://github.com/angular/angular/blob/2.0.0-rc.7/modules/%40angular/platform-browser/src/security/style_sanitizer.ts#L30

（RC.7）regexpは

/^([-,."'%_!# a-zA-Z0-9]+|(?:(?:matrix|translate|scale|rotate|skew|perspective)(?:X|Y|3d)?|(?:rgb|hsl)a?)\([-0-9.%, a-zA-Z]+\))$/g 

のように見えるがあります。

2）は、この意図された動作または私はそれがバグ

githubの上の関連問題

よりも期待される振る舞いだと思うの角2

の現在のバージョン とちょうどバグです

• https://github.com/angular/angular/issues/11158

3）これを行うには、 が安全でないと良い方法がありますか？

あなたが CustomDomSanitizerを書く経由でこの制限を回避することができ

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ], 
    providers: [ { provide: DomSanitizer, useClass: CustomDomSanitizer } ], 
}) 
export class AppModule { } 

も参照してくださいそれが角2.4で修正されていますPlunker Example