Угловая ошибка безопасности приложения: очистка небезопасного значения стиля

Question

В моем угловом приложении изначально я использовал bypassSecurityTrustStyle(value: string), и оно работало, но при тестировании безопасности моего приложения оно выдало ошибку Angular Usage of Unsafe DOM Sanitizer.

В этом блоге прекрасно объясняется, почему не пропустить санитарную обработку и как вручную очистить значение.Но я не мог понять, , как санировать CSS-стиль вручную, используя SecurityContext.STYLE

Ошибка:

ВНИМАНИЕ: дезинфекция небезопасналинейное градиентное значение стиля (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

Который, я полагаю, поддерживает linear-Gradient () или rgba (), но не один, вложенный в другой,Если вам действительно нужна эта прозрачность, может быть, # запись RRGGBBAA может помочь?Я проверил ваш пример с этим, он работает.