Question

我在我的角度应用程序中实现了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提供

Answer 1

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

覆盖浏览器默认值。对此的说明将从浏览器更改为浏览器，但必须由每个用户完成。可能不会发生
使用HTTPS网址作为iframe来源。如果您想要的内容不是通过HTTPS传送的，我担心您将不得不遇到setting up your own HTTPS proxy等问题。不好玩
通过HTTP访问/提供主页面，因此当iframe也只是HTTP时，浏览器不会有混合内容投诉

角度iframe未正确加载

1 个答案: