Question

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

在此blog中，它很好地解释了为什么不跳过清理以及如何手动清理值。但是我无法弄清楚如何使用SecurityContext.STYLE

手动清理CSS样式

错误：

警告：对不安全的样式值线性梯度（135deg，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

似乎是消毒剂中的一个限制。根据{{3}}，用于样式安全检查的regexp如下所示。

/^([-,."'%_!# 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

我相信，这支持linear-gradient（）或rgba（），但不支持嵌套在另一个中。如果您真的需要这种透明度，也许sources可以帮助您？我以此测试了您的示例，它可以正常工作。

Angular应用程序安全性错误：清理不安全的样式值

1 个答案: