我正在尝试在 Angular 2 项目中创建非常简单的 iframe。 代码
如果我在 iframe src 中使用原始 url,则会出现错误unsafe value used in a resource URL context
<!-- 1) Error : unsafe value used in a resource URL context -->
<iframe (load)="yourLoadFunction()" [src]="'/'" frameborder="0" width="1000px" height="500px"></iframe>
如果我DomSanitizer.bypassSecurityTrustResourceUrl
用于 url sanitize,它可以工作,但 iframe 加载无限时间,奇怪的嗯。代码(检查控制台)
<!-- 2) Infinite loop Iframe loading -->
<iframe (load)="yourLoadFunction()" [src]="sanitizer.bypassSecurityTrustResourceUrl('/')" frameborder="0" width="1000px" height="500px"></iframe>
所以,我已经为下面的 url 创建了管道,它可以正常工作
safe-url.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
HTML 视图
<!-- 3) Working with pipe -->
<iframe (load)="yourLoadFunction()" [src]="'/' | safeUrl" frameborder="0" width="1000px" height="500px"></iframe>
现在,我有问题
为什么
unsafe value used in a resource URL context
纯html iframe工作的角度错误为什么
DomSanitizer.bypassSecurityTrustResourceUrl
导致 iframe 无限加载但pipe
功能不同