Mixed Content errors with HTTPS

What is Mixed Content?

This means that the page consists of a mix of HTTP and HTTPS content.

Websites that are updated to SSL, such as with Let’s Encrypt, move from using the HTTP protocol to using HTTPS. However, if there is any content included in the page that specify http:// in their URL’s instead of https://, the browser will give a “Mixed Content” warning and may block the content. This content may be images, JavaScript, CSS or external resources like banners or advertising from external sites. 

To further highlight that the page is not fully secure, the padlock icon will not be displayed and instead an ⓘ  icon appears before the domain name.

How do I know if my site has mixed content?

• If a padlock appears, then your site is secure and contains no mixed content
• If there is no padlock icon and instead an ⓘ icon appears then your site is either not making use of a valid certificate or contains mixed content 
• There may be broken image/content icons
• There may be error messages referring to mixed or insecure content

How to find mixed content

All http:// URL’s throughout the website need to be replaced with https://. This shouldn’t be a problem with content that is on the same website, but all content hosted externally will also need to be accessed securely. This means that you can’t link to content at an external domain that doesn’t have SSL.

Manually finding http:// and replacing with https:// throughout your site can be a tedious process:

Browse to each page on your website, and if the address bar has no padlock, use Google Chrome Console (Right click/ctrl > Inspect/View source > Console) to find mixed content errors.  Make a note of these URLs. 

How to fix mixed content

WordPress sites

WordPress sites can easily be converted from HTTP to HTTPS using the handy plugin Really Simple SSL. URL’s will be updated and mixed content fixed. Any issues that can’t be fixed will be listed.

Other sites

1. Check that the URL is available over HTTPS by changing http:// to https:// and browsing to the site. If a warning or error is displayed, it means that the content is not available securely and you will need to save it to your own site, or find an alternative, secure source.
2. If the content is available securely, then update the URL from http:// to https:// in your page’s html code to make sure things like images and JavaScript files are being loaded specifically over HTTPS.

It is possible to perform a mass search and replace, but check carefully that this doesn’t create other errors. There are also various online tools and testing websites available to help with this process.