Angular2 DomSanitizer question

Question

J'essaie d'utiliser background-image en ligne pour mon * ngPour éléments de la liste. Im ma classe Composant Je déclare une variable qui stocke une partie commune des URL Mes images (par exemple, il est http://storage.com/) ainsi que des pièces uniques d'URL des images comme this.image (par exemple, ils sont qwerty/01.jpg, uiop/02.jpg, xdr/03.jpg, etc)

Tous ensemble il semble que

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 
); 

} 

De l'avis que j'ai où CartItem est un élément plus généré * ngFor liste:

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

console affiche les avertissements:

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). 

Je supposé l'URL à "aseptisé".

Que faut-il faire pour utiliser background-image styles en ligne comme dans mon exemple ci-dessus?

UPD! Je réécris ma fonction NgOnInit dans ce:

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) 
); 

} 

Les avertissements ont disparu, mais il semble que l'application ne trouve aucune de mes images passées au service. Juste ne peut pas les trouver via DevTools Inspector.

Answer 1

Seule une partie de votre URL est nettoyée. Pour bien désinfecte il,

Ajouter une méthode à votre composant pour aseptisation comme

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

et vous HTML appellerez la méthode ci-dessus avant l'URL est passé comme ci-dessous

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

également c'est juste un avertissement et peut être ignoré.