Angular 5 in safepipe 获取错误 - 需要一个安全的 ResourceURL，得到一个 HTML

Question

在Angular 5，我想在iFrame中显示一张地图。我使用了 safepipe，但是，在控制台中收到错误

Required a safe ResourceURL, got a HTML

这是我的 .ts 文件的代码：

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

export class XXXComponent implements OnInit {
constructor(private sanitizer: DomSanitizer){}

this.mapURL = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDdWRYxwcpnrJWXbsR4fmP3HwvsFlCMYPk&q=Ylistörmä+1,+02210+Espoo,+Finland&attribution_source=Google+Maps+Embed+API";
this.urlsafe = this.createSafeMap(this.mapURL);

createSafeMap(url){
   return this.sanitizer.bypassSecurityTrustHtml(url);
}

在 .html 文件中，我执行了以下操作以在 iframe 中显示地图：

<iframe [src]="urlsafe | safe: 'html'"></iframe>

以下是safe.pipe.ts的内容：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
    
@Pipe({
   name: 'safe'
})
export class SafePipe implements PipeTransform {
    
   constructor(protected sanitizer: DomSanitizer) {}
     
   public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
      switch (type) {
         case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
         case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
         case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
         case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
         case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
         default: throw new Error(`Invalid safe type specified: ${type}`);
      }
   }
}

Answer 1

为了安全地使用 url 你只需要用 resourceUrl 参数编写 safe 管道并丢弃你的 urlsafe 包装器：

[src]="mapURL | safe: 'resourceUrl'"

Angular 5 in safepipe 获取错误 - 需要一个安全的 ResourceURL，得到一个 HTML

Angular 5 in safepipe get error - Required a safe ResourceURL, got a HTML

angular

angular5