即使 src 是 https，是什么让 iframe 加载 http 内容？

Question

我的 vue 组件正在 iframe 中加载外部内容

<iframe src="https://external-site" />

在本地工作正常，但是一旦我部署到我的 https 站点

混合内容：“ https://my-site ”上的页面已通过 HTTPS 加载，但请求了不安全的框架“ http://external-site ”。此请求已被阻止；内容必须通过 HTTPS 提供。

网络选项卡显示 2 个请求，两个请求都有状态（已取消），并且请求 url 都是 HTTPS..

Answer 1

对于一般情况，例如将没有尾部斜杠的 URL 重定向到添加了尾部斜杠的相应 URL，一些服务器http:在初始重定向中使用硬编码破坏了配置——即使服务器有其他配置，随后将所有httpURL重定向到https.

例如，问题中的案例有一个https://tithe.ly/give?c=1401851重定向到http://tithe.ly/give/?c=1401851（注意 http，no-https）的 URL （注意缺少的尾部斜杠）。所以这就是浏览器停止并报告混合内容错误的地方。

这http://tithe.ly/give/?c=1401851重定向到https://tithe.ly/give/?c=1401851（https在这种情况下）。因此，问题中问题的解决方法是将源中的请求 URL 更改为https://tithe.ly/give/?c=1401851（包含尾部斜杠）。

值得注意的是：如果您要https://tithe.ly/give?c=1401851直接在浏览器中打开（没有尾部斜杠），则此答案中描述的重定向链只是透明地发生，因此从表面上看，原始 URL 没问题。这可能会让您对为什么它不起作用感到困惑。

还值得注意的是：当您检查浏览器开发工具中的网络窗格时，它不会很容易地向您显示重定向链，因为如上所述，浏览器会透明地遵循重定向——除非链具有非 https URL，导致浏览器停止，打破链条。

因此，针对此类问题的一般故障排除/调试技巧是：使用命令行 HTTP 客户端（如 ）检查请求 URL curl，并逐步执行它报告的每个重定向，仔细查看Location响应标头值；像这样：

$ curl -i https://tithe.ly/give?c=1401851
…
location: http://tithe.ly/give/?c=1401851
…
$ curl -i http://tithe.ly/give/?c=1401851
…
Location: https://tithe.ly/give/?c=1401851