Isikhungo Sosizo

Part of the Website’s Content is Loaded over HTTP

When a website is accessed over HTTPS (https://my-website.com), the server connection is encrypted via SSL (SSL Certificate). Thus data transmitted between a user and the server is encrypted and protected from being tracked and accessed by third parties.

However, when the website has internal or external resources, loaded over a non-encrypted connection (HTTP), most browsers display a warning message and they might block these resources.

В When a website with an encrypted connection has resources loaded over HTTP they are defined as mixed content. For example: the image http://my-website.com/image.png is defined as mixed content when loaded over https://my-website.com.

The insecure mixed content is divided into two categories:
• Passive mixed content: <img>, <audio>, <video> and others.
• Active mixed content: <script>, <link>, "XMLHttpRequest", <iframe>, CSS (when url attribute is used), <object> (data attribute), etc.

Newer versions of browsers such as Mozilla Firefox, Google Chrome and Opera automatically block active insecure content. e.g. .js scripts, XMLHttpRequest object, etc. Other insecure resources, however, might be still loaded, for example .jpg, .png, etc.

When loading over HTTPS, data transmitted cannot be intercepted or modified unlike HTTP. While the browser loads website elements over a secure connection it also connects with the server over HTTP to load mixed content. This non-encrypted data might be intercepted and misused by third parties.

Message for blocked content displayed on some browsers

Mozilla Firefox

When you access a website containing insecure elements, a triangle with an exclamation mark will appear on Mozilla Firefox address bar.

If you click on the “shield” icon you will enable loading the blocked content in spite of the warning.

Google Chrome

When Google Chrome blocks website content, a “shield” icon will appear at the end of the address bar.

There is also a yellow triangle showing up on the lock icon that signifies a secure connection.

Opera

When you access a website in Opera using an encrypted connection over https://, but also loading insecure content, you will see a “Content blocked” message.

If you wish to load all insecure resources there is also the option Unblock, but we do not recommend it.

Which website resource is not loaded over HTTPS?

You can discover elements from the website content that are being loaded over HTTP in a few ways:

1. Check the page source code and look for URLs that begin with http://.

Resources can be added to the website’s source code with their full URL, for example: http://my-website.com/image.png.

To view the source code, load the website over an encrypted connection (https://my-website.com) and simultaneously press Ctrl + U. This keyboard shortcut works with most browsers. If nothing opens, look for the “View Page Source” option or a similar one in your browser.

After the source code is displayed you can search (Ctrl+F) for URLs beginning with http://.

2. Use a web tool to scan the website.

This tool checks the resources loaded on a website and makes a full list of all insecure elements: https://www.whynopadlock.com

3. Use a web developer tool in your browser.

Different browsers offer various help tools for checking a webpage’s elements.

Mozilla Firefox (Web Console)

Mozilla Firefox enables you to use the built-in Web Console feature.

Load your website over https:// and use the Ctrl + Shift + K shortcut. Refresh the website (Ctrl + F5).

Pay special attention to the following lines that will be displayed in the Console: “Blocked loading mixed active content…” and “Loading mixed (insecure) display content on a secure page…”

If your Firefox version doesn’t support this feature, you can install an addon such as Firebug.

Google Chrome (Console)

In Google Chrome you can use the built-in Console feature. To see the loaded and blocked resources use the Ctrl + Shift + C shortcut after you open the webpage. Then open the Security tab and look in the Console messages, at the bottom.

Another way to run the tool is by right clicking anywhere on the webpage and selecting Inspect element from the menu. Refresh the website (Ctrl + F5).

A window will be displayed at the bottom of your screen. Go there and click on the messages and errors indicator (!).

Pay special attention to the following “Mixed Content” lines that will appear in the console: The page at … was loaded over HTTPS, but requested an insecure resource … This request has been blocked; the content must be served over HTTPS.” and “Mixed Content: The page at … was loaded over HTTPS, but requested an insecure image … This content should also be served over HTTPS”.

Opera (Console)

The Console Tool in Opera can be accessed in the same way like with Google Chrome.

To see the loaded and blocked resources use the Ctrl + Shift + C shortcut after you open the webpage. Then open the Security tab and look in the Console messages, at the bottom.

Another way to run the tool is by right clicking anywhere on the webpage and selecting Inspect element from the menu. Refresh the website (Ctrl + F5).

Pay special attention to the following lines: “[blocked] the page at…” and “The page at … was loaded over HTTPS, but displayed insecure content from …: this content should also be loaded over HTTPS”.

How can insecure resources be loaded over HTTPS?

Note: Addresses of insecure resources may be set in the site’s code or stored in its database.

If you are using WordPress you can correct all insecure (HTTP) resources on the site with the “Check for HTTP resources (loaded on HTTPS website)” option in cPanel » WordPress Manager » SSL.

If, while checking, you discover a resource that loads over HTTP, you can change its URL in the website’s source code. If the resource is located on the same hosting account, under the same domain, you can set up a relative path:

The URL can be also set up in this way:

If the resource is located on a different server, so it is considered external, you can set up its URL by using https://

OR

Please note that if the remote website does not support an encrypted connection, the resource will not be loaded over https. In such case you can download and upload the resource to your hosting account. Then call it in the source code by using a relative path such as “/wp-content/uploads/script.js”.

If the resource is called in the .css file of the website, its address could be set up in this way:

With CMS such as WordPress, Joomla!, etc., insecure resources can occur because:

• there is a plugin with incorrect setup or system files where the resource URLs are saved with http://
• some of the theme files are calling a resource over http:// (header.php …)
• the .css file of the theme requires calling a resource over http:// (style.css …)
• the post/page contains a direct link to a picture or else and its full URL begins with http://…
• the website itself requires loading an external resource that is set up with http://.