Question

我有一项从服务器加载图像的服务，我想在<img [src]="imageURL">标签内显示该图像。我使用DomSanitizer来确保该URL的安全，但是仍然出现不安全的错误，并且该图像没有显示。

在我的 file.service.ts 中，我具有以下功能：

downloadResource(downloadUrl: string): Observable<Blob> {
    return this.httpClient.get<Blob>(downloadUrl, {
      headers: new HttpHeaders({
        'accept': 'application/octet-stream',
        'content-type': 'application/json'}),
      responseType: 'blob' as 'json'
    });
  }

该功能可以很好地下载图像和其他文件。

然后，在我的 image.component.ts 中，我这样调用该函数：

imageURL: any;

  constructor(private fileService: FileService, private domSanitizer: DomSanitizer ) { }

  ngOnInit() {
    this.fileService.downloadResource(downloadUrl)
    .subscribe(data => {
        const blob = new Blob([data], {type: 'application/octet-stream'});
        this.imageURL = this.domSanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(blob));
    });
  }

我的 image.component.html 看起来像这样：

<img [src]="imageURL">

我遇到以下错误：

拒绝加载图像“ blob：https://someurl.72726”，因为它违反了以下内容安全策略指令：“ img-src *数据：”。

我也尝试过：bypassSecurityTrustResourceUrl，但遇到同样的错误。

我想念什么吗？

编辑：当我在控制台上打印imageURL时，会显示以下信息：

SafeValue必须使用[property] = binding：blob：https://someurl.72726（请参阅http://g.co/ng/security#xss）

使用DomSanitizer后拒绝加载图像

0 个答案: