通过内联样式在 Angular 6 个模板中显示图像 - 安全问题

Question

我需要通过内联样式显示图像。该图像不是本地图像，而是来自 JSON 提要的 URI。但是，尽管遵循官方文档，我还是无法通过 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)).

Answer 1

清理组件

中的 URL

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

并添加到模板

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

通过内联样式在 Angular 6 个模板中显示图像 - 安全问题

Displaying Images in Angular 6 Templates Thru Inline Styles - Security Issues

security

templates

inline-styles

angular