1

我正在尝试对我的*ngFor列表项使用内联背景图像。我是我的组件类，我声明了一个变量，它存储我的图像 URL 的公共部分（例如，它是http://storage.com/）以及图像的 URL 的唯一部分作为this.image（例如，它们是 qwerty/ 01.jpg、uiop/02.jpg、asdfg/03.jpg等）

加在一起看起来像

export class AppComponent {
cartItems: any;
image: any;

constructor(public cartService: CartService, private sanitizer: DomSanitizer) { }

ngOnInit(){
let sanitizedUrl = this.sanitizer.bypassSecurityTrustUrl('http://storage.com/' + this.image);

  this.cartService.getCartItems().subscribe(
     (data) => this.cartItems = data
  );

}

在我的视图中，cartItem是生成的*ngFor列表中的一个项目：

<span class="col cart__item--imageBox" 
[style.background-image.url]="('sanitizedUrl' + cartItem.image)">
</span>

控制台显示警告：

WARNING: sanitizing unsafe style value sanitizedUrl<<here go the images URLs endings - qwerty/01.jpg, uiop/02.jpg, asdfg/03.jpg, etc >> (see http://g.co/ng/security#xss).

我认为该 URL 已被“清理”。

应该怎么做才能像上面的示例中那样使用内联背景图像样式？

更新！我将我的 NgOnInit 函数重写为：

ngOnInit(){
let addSanitizedUrl = (cartItem) => {
      cartItem.sanitizedImageUrl = this.sanitizer.bypassSecurityTrustStyle('https://s27.postimg.org/' + this.image + cartItem.image)
      return cartItem;
    };

this.cartService.getCartItems().subscribe(
    (data) => this.cartItems = data.map(addSanitizedUrl) ngOnInit(){
let addSanitizedUrl = (cartItem) => {
      cartItem.sanitizedImageUrl = this.sanitizer.bypassSecurityTrustStyle('https://s27.postimg.org/' + this.image + cartItem.image)
      return cartItem;
    };

  this.cartService.getCartItems().subscribe(
      (data) => this.cartItems = data.map(addSanitizedUrl)
  );

}

警告消失了，但似乎该应用程序没有找到我在服务中传递的任何图像。只是无法通过 DevTools Inspector 找到它们。

4

1 回答 1

0

仅对您的 URL 的一部分进行了清理。为了彻底消毒，

向您的组件添加一个方法进行清理，如

sanitize(url:string){
    return this.sanitizer.bypassSecurityTrustUrl(url);
  }

并且您的 HTML 将在 URL 传递之前调用上述方法，如下所示

<span class="col cart__item--imageBox" 
[style.background-image.url]="sanitize('sanitizedUrl' + cartItem.image)">
</span>

这也只是一个警告，可以忽略。

于 2017-02-02T23:12:21.523 回答