是什么让浏览器从 http URL 加载内容，即使前端源具有 https URL？

Question

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

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

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

Mixed Content: The page at 'https://my-site' was loaded over HTTPS, but requested an insecure frame 'http://external-site'. This request has been blocked; the content must be served over HTTPS.

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

Answer 1

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

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

在这种情况下，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 是好的。这会让您对为什么它不起作用感到困惑。

此外：当您在浏览器开发工具中检查网络窗格时，它不会轻易向您显示重定向链，因为如上所述，浏览器透明地遵循重定向 — 除非链具有 non-https URL，导致浏览器停止，断链。

因此，针对此类问题的一般 troubleshooting/debugging 提示是：使用 command-line HTTP 客户端（如 curl）检查请求 URL，并逐步执行每个请求它报告的重定向，仔细查看 Location response-header 值；像这样：

$ 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

是什么让浏览器从 http URL 加载内容，即使前端源具有 https URL？

What makes a browser load content from an http URL even when frontend source has an https URL?

javascript

https

vue.js

mixed-content