angular - 如何在 Angular 7 中使用 Iframe

Question

我使用 Iframe 通过以下方法在 HTML 中设置外部 URL:

方法一:

 <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(srcUrl)" height="600" width="1000"></iframe>

方法 2:在此方法中，我还使用 How to set <iframe src="..."> without causing `unsafe value` exception? 创建了一个安全管道

 <iframe width="100%" height="300" [src]="srcUrl | safe"></iframe>

方法3:

 <iframe #iframe height="600" width="1000"></iframe> 
  @ViewChild('iframe') iframe: ElementRef;
ngAfterViewInit() {
    this.iframe.nativeElement.setAttribute('src', this.srcUrl);
}

但没有一个对我有用。我收到以下错误:

拒绝在框架中显示“”，因为祖先违反了以下内容安全策略指令:“frame-ancestors 'self'”。

请在以下链接找到我的代码:

https://stackblitz.com/edit/angular-irwasj?file=src%2Fapp%2Fapp.component.html有人可以帮忙吗？

Answer 1

我正在研究这个。很少有网站(例如 google、stackoverflow、youtube)拒绝在 iframe 内加载。它使用某种 FrameKiller。如果您使用 https://www.google.com ，则会显示 google.com 拒绝连接。其他网站(例如 stackoverflow)根本不显示任何消息。我已经创建了一个演示，它使用 https 加载其他一些随机站点。

演示:https://stackblitz.com/edit/angular-gzvckb