Angular 2 将梯度视为不安全的

Question

我正在尝试在组件上动态设置渐变，但收到以下警告：

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

这是一个最小的复制：

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 {}

我的谷歌搜索告诉我使用 bypassSecurityTrustStyle 但我不乐意这样做，直到我知道

为什么线性渐变被认为是不安全的？
这是预期的行为还是只是 Angular 2.
有没有更好的方法来做到这一点而不被认为是不安全的？

这必须是动态的，因为我正在以编程方式构建渐变字符串。我不能为此使用 css 类。

Answer 1

1) Why is linear gradient considered unsafe?

有一些限制会错过您的风格（特别是括号）

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) Is this intended behaviour or just a bug with the current version of Angular 2.

我认为这是预期的行为而不是错误

相关问题 github

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

3) Is there a better way to do this without it being considered unsafe?

您可以通过编写 CustomDomSanitizer

来解决此限制

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

另见直播Plunker Example

Answer 2

已在 Angular 2.4.4 (https://github.com/angular/angular/blob/master/CHANGELOG.md#244-2017-01-19)

中修复

公关：https://github.com/angular/angular/pull/13943/files

Angular 2 将梯度视为不安全的

Angular 2 treating gradients as unsafe

css

xss

gradient

angular