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）为什么线性梯度被认为是不安全的？

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

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）这是预期的行为还是当前版本的错误 Angular 2。

我认为这比bug还要预期的行为

github上的相关问题

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

3）如果没有考虑，有没有更好的方法来做到这一点不安全？

您可以通过编写 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）

中修复

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

角度2处理梯度是不安全的

2 个答案: