Angular2 DomSanitizer issue

Question

Я пытаюсь использовать background-image inline для моих * ngFor элементов списка. Im мой компонент I класса объявить переменную, которая хранит общую часть моего изображения 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, чтобы быть "продезинфицировать".

Что нужно сделать, чтобы иметь возможность использовать background-image стили inline, как в моем примере выше?

UPD! я переписал свою функцию 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.

Answer 1

Очистка только части вашего 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> 

Также это просто предупреждение и его можно игнорировать.