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/.
Related
I try to set up two different services under the same NGINX in this way:
When I hit /discovery/ from the browser, I see the result HTML page but the browser cannot load some resources that are in another directory:
So the browser request for /eureka/css/wro.css instead of /discovery/eureka/css/wro.css because, seems that NGINX does not translate properly the URLs in the HTML page.
In the source HTML, everything seems correct:
Is there any specific configuration that I miss in NGINX?
I am getting this error in the browser console:
Mixed Content: The page at
'https://async-java.github.io' was loaded over HTTPS, but
requested an insecure resource 'http://async-java.github.io/v/0.1.2/'.
This request has been blocked; the content must be served over HTTPS.
my iframe is being loaded with:
<iframe id="main-iframe" src="v/0.1.2" width="100%" height="100%"></iframe>
is there some way to force it to use https without having to use an absolute URL? The relative url is a lot more convenient because it works for localhost etc.
I found this answer, it says to use:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
which worked for this use case. For more info see:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests
I have installed an SSL-certificate for my website but it is not working for some pages. I went inside of the Google Chrome Console option and found this error message:
Mixed Content: The page at
'https://www.feelhome.se/produkt/blackgrey-feather/' was loaded over
HTTPS, but requested an insecure font
'http://www.feelhome.se/wp-content/plugins/ajax-search-pro/css/fonts/icons/icons.woff'.
This request has been blocked; the content must be served over HTTPS.
I went inside of the "insecure font" but there is not "http" URL there that I can change to remove this error message. How can I remove this error message that appears?
You need to change the reference to the font in your CSS file so that it uses a https:// URL.
All external resources (css, javascript, images, etc) imported into the page need to either be relative URL so that they automatically use the same protocol, or you need to explicitly use https:// in their URL.
I have been seeing this a lot lately and I am unable to find any information on it.
Is there a name for it?
Which browsers support this?
It's the same as an absolute URL except that the schema will be the one used for the base URL. Thus, if you say //mysite.com/images/img.png on an https page, the image will be loaded with https and on an "ordinary" http page it will be loaded using the http schema (and, respectively, different default ports.)
This approach lets avoid the security warnings from browsers in the case when you have insecure content loaded by secure pages (and the pages can be loaded using both http and https protocols).
I am using a master page layout etc, so all the pages have some parts of it coming from one master page or another.
Now, checkout is one of these pages, and it needs to be secure. In my master page, I am using relative path to images and Url's, and these images end up with "http". I thought that if I am using relative path, my master page AND css file automatically use https instead of http if the page is secure? Apparently it does not, when I right click on an image, it still has "http" instead of "https" ans same goes for URL path.
Check out this great article by Ned Batchelder which shows schema relative URLs:
<img src='//fast.cdn.net/pix/smiley.jpg' />
When the images come back as http are you checking this from your local dev or production? I thought I had this problem before but then realized my dev environment was always http and that the relative path would work in production because there it would be https.