时间戳

首页 > 解决方案 > Angular 应用程序安全错误：清理不安全的样式值

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

问题描述

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

在这个博客中，它很好地解释了为什么不跳过清理以及如何手动清理值。但我无法弄清楚如何使用手动清理 CSS 样式SecurityContext.STYLE

错误：

警告：清理不安全的样式值 linear-gradient(135deg, rgba(0, 0, 0, 0.7) 100%, rgb(117, 79, 182) 100%)（参见 http://g.co/ng/security# ) _

安全网址不安全

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>

标签： javascriptangularsecurityxss

解决方案

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

/^([-,."'%_!# 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() 但不支持嵌套在另一个中。如果您真的需要这种透明度，也许#RRGGBBAA 符号会有所帮助？我用那个测试了你的例子，它有效。

推荐阅读