Angular Firebase Storage: небезопасное значение, используемое в контексте URL ресурса

Question

Я пытаюсь отобразить файл PDF из хранилища Firebase в компоненте в Angular, но получаю следующую ошибку:

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() {}

}

Не уверен, что мне нужно делать.Кто-нибудь может помочь, пожалуйста?

Answer 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>