Angular 2将渐变视为不安全
我试图动态地在组件上设置渐变,并得到以下警告:
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
但我并不乐意这样做,直到我知道
这样做必须是动态的,因为我以编程方式构建渐变字符串。 我无法为此使用CSS类。
它在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
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上的相关问题
3)有没有更好的方式来做到这一点,而不被认为是不安全的?
您可以通过编写CustomDomSanitizer来解决此限制
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ { provide: DomSanitizer, useClass: CustomDomSanitizer } ],
})
export class AppModule { }
另见活Plunker示例
链接地址: http://www.djcxy.com/p/36213.html