How to find and fix mixed content warnings on your HTTPS website
If you’ve migrated your site to HTTPS but then find you are receiving warnings in the browser about mixed active content or references to “your connection to this site is not fully secure” then this guide is for you.
When a page is loaded on the https protocol the browser expects that all content on the page will be served from secure HTTPS sources. If the HTML requests some insecure content from an HTTP source (such as an external script or image) then the browser is being asked to serve both secure and insecure content on the page. This is called mixed content.
How is mixed content presented in browsers?
Different browsers (and different versions of browsers) treat mixed content in different ways.
Firefox (version 55) will show an orange warning triangle over the padlock.
Microsoft Edge blocks insecure content on the page, removes the padlock and shows an icon indicating that it has blocked content.
The Chrome browser used to show a warning triangle over the padlock, but since 2016 (version 46) it shows as neutral (in the same way as an http loaded page). However, from October 2017 (version 62) pages with a form will show as ‘Not Secure’ when entering data on the page, e.g. a contact form, a search box etc., if mixed content exists – even if the page itself is served over HTTPS.
How to identify insecure elements
There are many methods. We describe 3 options below.
Option 1 – Use Screaming Frog SEO Spider
Screaming Frog SEO Spider is my single favourite SEO tool. Download the tool (the free version has a 500 URL crawl limit, but the paid version is just £149). Crawl your site and select the Insecure Content report.
The report lists each element from the site crawl where HTTP content is requested. The example output below shows Javascript (JS) such as the Cloudflare HTTP request and images (IMG) being requested from a different (HTTP) site.
Option 2 – Use the JitBit Scanner
An alternative method is to use the free JitBit SSL Check service This fast, lightweight tool will crawl an HTTPS-website searching for non-secure images, scripts and css files that will trigger mixed content warning messages in the browser.
The free JitBit crawl is limited to 200 pages.
Option 3 – Use the HTTPS Checker from Wildfire Internet
This desktop tool HTTPS Checker is available for Windows, Mac and Ubuntu Linux. The free tool scans up to 500 pages with paid subscriptions available for larger sites.
The scan is comprehensive and can take quite a while to run on a large site. Scan results are shown directly in the user interface (a report is available in the paid plans).
How to fix insecure elements
If you’ve used one of the scanning tools above you should now have a list of pages on your site that contain requests for HTTP resources.
Take a look through your list and categorise them by type.
- Absolute Links
- Individual Images
- Hosted Image Libraries
- CSS & Scripts
- Other
Often for scripts and CSS warnings you’ll find the same item repeated on many or all of your site pages. Fixing it once in a template will resolve all the occurrences.
Absolute Links
Your website may contain absolute links, e.g.
<a href=”http://www.mysite.com/about-us”>About Us</a>
These may well have been highlighted in your insecure scan report. Assuming you have implemented a 301 redirect of all your HTTP traffic to HTTPS then this in itself will not lead to an insecure content warning. However, if you are able to edit and update the link then do so (or consider using a relative link).
Individual Images
If you have images that are being requested from external sites via HTTP, then these can usually be resolved by uploading the required images to your own site (assuming you have copyright to do so). Assuming your site is built with a standard CMS then you can upload the image and then update your page/post to replace the third-party image with the new version you’ve uploaded.
Hosted Image Libraries
Many older sites host images on a third party image library site, such as Flickr. There are strong arguments for not using these anymore to host website images (instead consider using a CDN such as CloudFlare or MaxCDN), but if you are sticking to the third party library you will probably find it will allow you to serve over HTTPS. Simply edit the external image link from your CMS editor and change http:// to https:// – Publish or preview your page and check the image is displaying correctly.
CSS & Scripts
If you have CSS and javascript HTTP resources in your list then you will need to amend your website code. If your website code is managed by an agency or you work with a developer, now is the time to provide the list of HTTP issues to them and ask them to amend and test.
If you have an understanding and experience of editing your website code or template files then you can go ahead and modify the script and CSS links yourself. For example, you may have a javascript request like this:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
You can edit to
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Note that not all script requests will have an HTTPS version – but most often they will. Test and find out.
If you don’t have access to the code or you don’t feel confident to edit code then you may be able to use a third-party plugin for your site. For example, on WordPress you can try the SSL Insecure Content Fixer plug-in, but bear in mind that this is not a real substitute for fixing the errors directly.
Leave a Reply