HTTPS页面内的HTTPS iframe无法正常工作 [英] HTTPS iframe inside a HTTPS page not working

问题描述

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

How can we use github pages embedded in an iframe correctly?

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

I've hosted a website in firebase and it is using a custom domain over https, for example, https://www.example.com.

该网站使用react和其他方式，但是对于一种途径(登陆页面而言)，我想使用托管在github上的静态页面，例如 https://www.example.com/内创建了一个iframe页面 .

This website uses react and other things, but for one route (the landing page one) I would like to use a static page hosted on github, for example https://example.github.io/page. So, to achieve this I've created an iframe inside the route https://www.example.com/page.

问题是我收到以下错误:

The problem is I've been receiving the following error:

混合内容:" https://www.example.com/page 上的页面为已加载 通过HTTPS，但请求了不安全的资源 " http://example.github.io/page/".该请求已被阻止；这 内容必须通过HTTPS提供.

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看起来正确:

The strange thing is the iframe looks correctly:

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

它已经在使用https，但似乎已被忽略. 我已经尝试使用此meta <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">，用</iframe>关闭iframe，并在iframe中添加不需要的文本.

It is already using https, but looks like this is being ignored. I already tried to use this meta <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">, close the iframe with </iframe> and add an unwanted text inside the iframe.

我们能解决这个问题吗?

Can we solve this?

推荐答案

如果您仔细检查HTML代码和错误消息，除协议部分外，您会发现URL略有不同:

If you carefully examine your HTML code and the error message, you'll notice a slight difference in URLs besides the protocol part:

• https://example.github.io/page-在iframe src标记中
• http://example.github.io/page/-错误消息中

• https://example.github.io/page - in the iframe src tag
• http://example.github.io/page/ - in the error message

原因可能是URL https://example.github.io/page 返回一个 redirect 到带有斜杠(/page/)的规范"版本，但是重定向URL必须是完整URL，并且服务器由于某种原因未在重定向中包含实际协议URL，始终使用http://代替.这可能是由于服务器端的配置或编码(另请参见github问题#289 ).

The reason could be that the URL https://example.github.io/page returns a redirect to the "canonical" version with the trailing slash (/page/), but a redirect URL must be a full URL, and the server for some reason isn't including the actual protocol in the redirect URL, always using http:// instead. That could be due to configuration or coding at the server side (see also github issue #289).

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

As a workaround, use a URL that doesn't trigger the canonicalization redirect, i.e. https://example.github.io/page/.

这篇关于HTTPS页面内的HTTPS iframe无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！