Отображение изображений в шаблонах Angular 6 через встроенные стили - вопросы безопасности - PullRequest
Новая
       31

Отображение изображений в шаблонах Angular 6 через встроенные стили - вопросы безопасности

0 голосов
/ 21 декабря 2018

Мне нужно отобразить изображение с помощью встроенного стиля.Изображение не является локальным, скорее это URI из фида JSON.Однако я не могу пройти мимо безопасности Angular 6, несмотря на то, что следую официальным документам.Я проверил URI изображения, и это хорошо.

Вывод на консоль: 

Object { changingThisBreaksApplicationSecurity: "http://uri/to/image.png" }

Вместо того, чтобы пройти через все, что я пробовал, вот что у меня сейчас есть,Я не могу быть единственным, кто столкнулся с этой проблемой, поэтому я хотел бы знать, как кто-то еще сделал это?

component.ts: 

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
import { DataService } from '../../services/data.service';
import { Business } from '../../models/Business';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html'
})
export class ListComponent implements OnInit {
  fetchedBusinesses: Business[];
  trustedURL: any;

  constructor(private dataService: DataService, private sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.fetchedBusinesses = this.dataService.getBusinesses();
    this.trustedURL = this.sanitizer.bypassSecurityTrustUrl(this.fetchedBusinesses[0].backgroundImageURL);
  }
}

синтаксис шаблона: 

<div class="someClass" *ngFor="let biz of fetchedBusinesses">
    <div class="someClass" [style.background]="'url(' + trustedURL + ')'"></div>
</div>

Запись trustedURL на консоль сообщает мне SafeValue требует привязки свойства.Разве это не то, что я делаю?Вот это предупреждение: 

WARNING: sanitizing unsafe style value url(SafeValue must use [property]=binding: http://path/to/image.png (see http://g.co/ng/security#xss)).

1 Ответ

0 голосов
/ 21 декабря 2018

очистить URL от компонента 

this.image = this.sanitization.bypassSecurityTrustStyle(`url(${this.fetchedBusinesses[0].backgroundImageURL})`);

и добавить в шаблон 

<div class="someClass" [style.background]="image"></div>
...