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但我并不乐意这样做,直到我知道

  • 为什么线性渐变被认为是不安全的?
  • 这是预期的行为还是只是当前版本的Angular 2的错误。
  • 有没有更好的方式来做到这一点,而不被认为是不安全的?
  • 这样做必须是动态的,因为我以编程方式构建渐变字符串。 我无法为此使用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-b​​rowser/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示例

    链接地址: http://www.djcxy.com/p/36213.html

    上一篇: Angular 2 treating gradients as unsafe

    下一篇: VIEW not working (Package installer has stopped)