iframe - HTTPS 页面内的 HTTPS iframe 不起作用

Question

我们如何正确使用嵌入在 iframe 中的 github 页面？

我在 firebase 中托管了一个网站，它通过 https 使用自定义域，例如 https://www.example.com .

这个网站使用react和其他东西，但是对于一个路由(登陆页面一)我想使用一个托管在github上的静态页面，例如 https://example.github.io/page .因此，为了实现这一点，我在路线 内创建了一个 iframe。 https://www.example.com/page .

问题是我收到以下错误:

Mixed Content: The page at 'https://www.example.com/page' was loaded over HTTPS, but requested an insecure resource 'http://example.github.io/page/'. This request has been blocked; the content must be served over HTTPS.

奇怪的是 iframe 看起来正确:

<iframe title="Page" src="https://example.github.io/page">unwanted text</iframe>

它已经在使用 https，但看起来这被忽略了。
我已经尝试过使用这个元 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> , 用 </iframe> 关闭 iframe并在 iframe 中添加不需要的文本。

我们能解决这个问题吗？

Answer 1

如果您仔细检查您的 HTML 代码和错误消息，您会注意到除了协议(protocol)部分之外的 URL 略有不同:

https://example.github.io/page - 在 iframe src 标签

http://example.github.io/page/ - 在错误消息

原因可能是 URL https://example.github.io/page 返回到带有尾部斜杠( /page/ )的“规范”版本的重定向，但是重定向 URL 必须是完整的 URL，并且由于某种原因，服务器未在重定向 URL，始终使用 http:// 代替。这可能是由于服务器端的配置或编码造成的(另请参阅 github 问题 #289 )。

作为一种解决方法，请使用不会触发规范化重定向的 URL，即 https://example.github.io/page/ 。