角度 iframe 未正确加载

Posted 2023-03-15

【中文标题】角度 iframe 未正确加载

【英文标题】：Angular iframe not loading correctly

【发布时间】：2018-04-30 08:54:37

【问题描述】：

我在我的 Angular 应用程序中实现了一个 ifame，首先它阻止了资源，然后我添加了一个管道来访问资源，现在浏览器因为混合内容而阻止它，因为它没有通过 https 加载内容

stundenplan.component.ts：

<div class="col-sm-9 content">
<div class="dashhead">
<div class="dashhead-titles">
<h6 class="dashhead-subtitle">TeamCloud</h6>
<h2 class="dashhead-title">Stundenplan</h2>
</div>

</div>

<hr class="m-t">

<div class="container">
  <iframe style="width: 100%; height: 900px;" frameborder="0" [src]="'http://******' | safeIframe"></iframe>
</div> <!-- /container -->

</div>

安全-iframe.pipe.ts：

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

@Pipe(
  name: 'safeIframe'
)
export class SafeIframePipe implements PipeTransform 
  constructor(private sanitizer: DomSanitizer)
  transform(url:string) 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  

加载页面时出现错误 混合内容：位于“https://teamcloud.******/stundenplan”的页面通过 HTTPS 加载，但请求了不安全的资源“http://******”。此请求已被阻止；内容必须通过 HTTPS 提供

【参考方案1】：

This is a browser-restriction;在安全 (HTTPS) 页面上时，浏览器默认会拒绝加载不安全的活动内容（例如：脚本、iframe）。这不是你用 Angular 解决的问题。你基本上有3个选择：

覆盖浏览器默认值。这方面的说明会因浏览器而异，但必须由每个用户完成。可能不会发生 使用 HTTPS 网址作为 iframe 源。如果你想要的内容不是通过 HTTPS 传递的，恐怕你会遇到一些麻烦，比如setting up your own HTTPS proxy。不好玩 通过 HTTP 访问/提供主页，因此当 iframe 也只是 HTTP 时，浏览器不会出现混合内容投诉