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

Question

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

在 Chrome 和桌面版 Firefox 上，加载正常。

在 desktop/mobile Safari 和移动设备 Chrome 上 iOS，它不会加载任何东西。

在 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

有没有人以前遇到过这个错误并且知道如何解决它？为什么它在某些浏览器中有效而在其他浏览器中无效？我正在努力 cross-browser 与使用 iframe 的兼容性。非常感谢任何关于破解或解决方法的建议。

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

Answer 1

问题是混合内容，当您加载 HTTP 和 HTTPS 内容时。

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

假定您必须发挥创意。您基本上必须让 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;
}
?>

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

iframe correctly loads a webpage in some browsers but not others (insecure content error)

https

iframe

content-security-policy