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?

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 the iframe src tag
http://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/.