为什么在设置 [style.background-image] 属性时出现 sanitizer.bypassSecurityTrustStyle returns 警告？

Question

我有一段简单的代码行不通：

<div class="cover"
    [style.background-image]="sanitizer.bypassSecurityTrustStyle('url(/assets/img/picture (1).jpg)')">
</div>

sanitizer.bypassSecurityTrustStyle returns 留言如下：

SafeValue must use [property]=binding: url(/assets/img/picture (1).jpg) (see http://g.co/ng/security#xss)

还尝试将清理移至自定义管道，结果是一样的。

尝试以下解决方案时 Angular 完全忽略 style.background-image：

[style.background-image]="'url(' + photo + ')'"
[ngStyle]="{'background-image': 'url(' + photo + ')'}"

为什么？

Angular: 5.2.4

Answer 1

当您的图像 url 中包含空格以及传递给 css url 的字符串时，就会出现问题() 是 没有引号 :

[style.background-image]="'url(' + photo + ')'"

当您的 url 没有空格时，上面的代码可以正常工作。如果有空格，只需用 单引号 :

包裹实际图像 url

[style.background-image]="'url(\'' + photo + '\')'"

顺便说一下，如果还是不行，试试disabling Angular's built-in sanitization传入的值：

bypassSecurityTrustStyle(style)

您可以为此创建一个管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(
    private sanitizer: DomSanitizer
  ) { }

  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
  }
}

为什么在设置 [style.background-image] 属性时出现 sanitizer.bypassSecurityTrustStyle returns 警告？

Why sanitizer.bypassSecurityTrustStyle returns warning when setting [style.background-image] attribute?

sanitization

angular