角度应用程序安全错误:清理不安全的样式值

Question

在我的角度应用程序中，最初，我使用了bypassSecurityTrustStyle(value: string)并且它有效，但是在我的应用程序的安全测试中，它给出了错误Angular Usage of Unsafe DOM Sanitizer。

在这篇博客中，很好地解释了为什么不跳过清理以及如何手动清理值。但是我不知道如何使用SecurityContext.STYLE手动清理CSS样式

错误：

警告：清理不安全的样式值线性渐变(135度，RGBA(0， 0， 0， 0.7( 100%， RGB(117， 79， 182( 100%( (参见 http://g.co/ng/security#xss(

safeUrl 不安全

getBgUrl(category: ICategory): SafeStyle {
  console.log('safeUrl', this.sanitizer.sanitize(SecurityContext.STYLE, `linear-gradient(135deg, rgba(0, 0, 0, 0.7) 100%, rgb(117, 79, 182) 100%)`));
  // return this.sanitizer.bypassSecurityTrustStyle(`linear-gradient(135deg, rgba(0, 0, 0, 0.7) 30%, ${this.gradientColors[category.id % 5]} 100%), url(${category.thumbnail})`);
} 

<div class="explore-grid">
<mat-card 
  *ngFor="let category of categories"
  [style.background-image]="getBgUrl(category)"
  [routerLink]="['/Category',category.id]">
    <span>{{category.name}}</span>
</mat-card>
</div>

Answer 1

似乎是消毒剂的限制。根据消息来源，用于样式安全检查的正则表达式如下所示。

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

我相信，它支持线性梯度((或rgba((，但不支持嵌套在另一个中。如果你真的需要这种透明度，也许 #RRGGBBAA 符号可以提供帮助？我用它测试了你的例子，它有效。