Why HTTPS page is loading HTTP content?
In fact, when the HTTPS page is trying to load HTTP content, it fails. HTTPS is a secure connection (transmission is encrypted) and HTTP is not. The browser is preventing HTTP transmission from and to the HTTPS page to maintain the security of the site. Such an error is named “mixed content error” because some of the contents are provided securely via HTTPS, but the other part is trying to load without the SSL encryption.
Typical issue
Most often, when the HTTPS page is trying to load HTTP content is an issue with the URLs on the page. For instance, the image source is provided as http:
<img src="http://example.com/image.jpg">
The above is the cause in most of the cases I had to deal with. But…
Links are fine, but the site is still trying to load via HTTP instead of HTTPS…
Recently I came across another issue. Links were fine, but the content was still not loading properly due to mixed content error. Here is a simplified source of the page:
<html>
<head>
<base href="http://example.com/" />
</head>
<body>
<img src="image.jpg">
</body>
</html>
Please note that there is no http:// nor https:// in the image URL. The page was loaded through HTTPS but the browser is trying to load an image through HTTP. Why? Because of the “base” tag! Take a look at it. The base tag is defining that the base URL for resources on the page is “http://example.com” which is HTTP instead of HTTPS! This tells the browser to put “http://example.com” in front of “image.jpg” thus it forces the browser to make HTTP call instead of HTTPS.
The solution for this issue is to change the contents of the base tag.