HTTPS iframe inside a HTTPS page not working
How can we use github pages embedded in an iframe correctly?
I've hosted a website in firebase and it is using a custom domain over https, for example, https://www.example.com.
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:
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.
The strange thing is the iframe looks correctly:
<iframe title="Page" src="https://example.github.io/page">unwanted text</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?
Answer
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- in theiframesrctaghttp://example.github.io/page/- in the error message
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).
As a workaround, use a URL that doesn't trigger the canonicalization redirect, i.e. https://example.github.io/page/.