Angular Firebase 存储：资源 URL 上下文中使用的不安全值答案

【问题标题】：Angular Firebase Storage: unsafe value used in a resource URL contextAngular Firebase 存储：资源 URL 上下文中使用的不安全值
【发布时间】：2019-10-30 13:18:49
【问题描述】：

我正在尝试在 Angular 的一个组件中从 Firebase 存储中渲染一个 PDF 文件，但出现以下错误：

ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)
at DomSanitizerImpl.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomSanitizerImpl.sanitize (platform-browser.js:1824)
at setElementProperty (core.js:21109)
at checkAndUpdateElementValue (core.js:21061)
at checkAndUpdateElementInline (core.js:21008)
at checkAndUpdateNodeInline (core.js:23359)
at checkAndUpdateNode (core.js:23325)
at debugCheckAndUpdateNode (core.js:23959)
at debugCheckRenderNodeFn (core.js:23945)
at Object.eval [as updateRenderer] (YearbookComponent.html:2)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:23937)

这是我的组件 .html 文件：

<div class="flex-center-container">
  <iframe id="viewframe" src="https://docs.google.com/viewer?embedded=true&{{fileUrl | async}}" frameborder="0" height="100%" width="100%"></iframe>
</div>

这是有角度的 .ts 文件：

import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireStorageReference } from '@angular/fire/storage';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-yearbook',
  templateUrl: './yearbook.component.html',
  styleUrls: ['./yearbook.component.sass']
})
export class YearbookComponent implements OnInit {
  fileUrl: Observable<string | null>;
  constructor(private storage: AngularFireStorage) {
    const ref = this.storage.ref('path/to/file.pdf');
     this.fileUrl = ref.getDownloadURL();
  }

  ngOnInit() {}

}

不确定我需要做什么。有人可以帮忙吗？

【问题讨论】：

标签： angular firebase pdf firebase-storage

【解决方案1】：

我猜你需要的是一个safeUrl 管道（我说是因为这种错误需要调查和调试，我想说如果你提供了 stackblitz 链接，我们可以更确定地说）

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
    name: 'safeUrl',
})
export class SafeUrlPipe implements PipeTransform {

    constructor(private domSanitizer: DomSanitizer) { }

    transform(url): SafeResourceUrl {
        return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
    }

}

并将其添加到 app.module declarations

然后

<iframe id="viewframe" src="https://docs.google.com/viewer?embedded=true&{{fileUrl | async | safeUrl}}" frameborder="0" height="100%" width="100%"></iframe>

【讨论】：