Question

我正在尝试从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() {}

}

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

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>

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

1 个答案: