iframe 在某些浏览器中正确加载网页，但在其他浏览器中不正确（不安全的内容错误）

Question

我有一个 https 网站，它试图在 iframe 中显示外部 https 网页。

在桌面版 Chrome 和 Firefox 上，它加载得很好。

在适用于 iOS 的桌面/移动 Safari 和移动 Chrome 上，它不会加载任何内容。

在 Safari 中，我看到错误：

The page at about:blank was not allowed to display insecure content from http://example.com

虽然 iframe 加载的网页是 https，但看起来它正在尝试加载一些内容是 http，并阻止 iframe 加载任何内容。

我真的很难过，因为它适用于某些浏览器，但不适用于其他浏览器。这是我运行的浏览器测试。

Desktop Chrome: Success
Desktop Firefox: Success
Desktop Safari: Fail
iOS Mobile Safari: Fail
iOS Mobile Chrome: Fail
Android Mobile Chrome: Success

有没有人遇到过这个错误并且知道如何解决它？为什么它在某些浏览器中有效，而在其他浏览器中无效？我正在努力使用 iframe 实现跨浏览器兼容性。任何关于黑客或解决方法的建议将不胜感激。

更新： 查看网络选项卡后。我看到它正在请求一个 HTTPS 网址，但该位置是一个 HTTP 网址。一些浏览器可以接受并显示内容。其他浏览器似乎阻止了它。即使位置 url 显示为 http，请求 url 也确实打开了一个 https 网站。

Answer 1

问题在于混合内容，即加载 HTTP 和 HTTP S内容时出现的问题。

您必须问自己的第一个问题是大多数开发人员都没有做到的：这值得做吗？

假设你必须发挥创造力。您基本上必须iframe从您自己的网站加载页面并拥有加载非 HTTPS 页面。这还意味着必须扫描 HTML/XML 属性，例如src并重建它们的 URL（不要忘记该元素），以便通过您的站点base提供这些图像。

<?php
if (isset($_GET['url']))
{
 $url = $_GET['url'];
 $ch = curl_init();
 $timeout = 5;
 curl_setopt($ch, CURLOPT_URL, $url);
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
 $data = curl_exec($ch);
 curl_close($ch);
 echo $data;
}
?>