Angular2 / Как настроить DomSanitizer?

Question

[Alexander Belov]

Задача - прописать background-image инлайном в Angular2.
Пытаюсь юзнуть DomSanitizer. В классе прописываю неизменную часть URL для всех подргужаемых картинок + под строкой this.image дописываю уникальные "хвосты" URL. В моём понимании, я "зачистил" URL и теперь он не должен вызывать ошибки по безопасности.

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

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

  ngOnInit(){
  	let sanitizedUrl = this.sanitizer.bypassSecurityTrustUrl('https://s27.postimg.org/' + this.image);

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

  }

}

Во view использую inline стили:

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

В консоли получаю такое:

WARNING: sanitizing unsafe style value sanitizedUrl<<тут уникальные URL "хвосты" картинок>> (see http://g.co/ng/security#xss).

Т.е., всё равно почему-то не принимает "зачищенный" URL.

Answer 1

[_ _]

Как-то так. Код не проверял

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

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

  }

<span class="col cart__item--imageBox" [style.background-image.url]=cartItem.sanitizedImageUrl"></span>

Comments

[Alexander Belov]

Я правильно понимаю, что мы пробежали по массиву и явно для каждого объекта "зачистили" URL?

Я поменял bypassSecurityTrustUrl на bypassSecurityTrustStyle и ошибки исчезли. Но картинки не появились, в инспекторе их найти не могу тоже.

[_ _]

Alexander Belov: можно сразу прямо стиль ставить, типа как тут stackoverflow.com/questions/37577343/attribute-pro...