What happens when you certify your site with SSL and you get an “SSL Mixed Content” notice? In this post, I am taking you through the steps needed to solve this issue.
SSL stands for Secure Sockets Layer. When you visit a site with an SSL Certificate, its URL begins with https, instead of the old http. You should also see a green padlock just behind the domain name in the URL address field. This means that all data coming to and from this site is encrypted: not just passwords and credit card details but all the content and code.
Getting the green lock.
Sometimes, even after setting up your SSL Certificate, that little lock just doesn’t turn green. The site is actually secure. The problem is that not all links have been changed correctly. Remember, not only does a site’s page have a URL, every single image also has its own URL, external links – if your page contains a link to an external site that doesn’t have SSL, then browsers are going to flag your website as unsafe. And that’s not a good place to be today.
For troubleshooting purposes, here is a list of things you should pay attention to when switching your site from http to https:
Clear any caches you might have running with caching software, then deactivate any caching plugins. You can turn them back on once the process is complete.
Use “Force SSL” to tell WordPress that your site is now https. You can do this either with your host or by using a WordPress plugin.
Change your URL in WordPress Settings > General.
Update hard-coded URLs using “Better Search Replace” plugin.
Change the URL in Elementor if you use it.
If you get to this point and you have the green lock, congratulations. If not, you most probably have a Mixed Content issue like I did.
What is Mixed Content?
This basically means that, even though your site is trying its best to be secure, (I mean, you’ve busted your guts up till now) you have elements in your site’s source code which are still using an http link, such as images, javascript, CSS, links to outdated scripts or links accessing external sites that still use http. And because your page is accessing insecure content…. you’re not getting the green lock. This needs to be addressed as browsers (Firefox is especially brutal) will tag your site as unsafe, which will also affect your SEO ranking.
There isn’t a lot you can do about the external links accessing sites with no SSL. My advice would be to take them out or replace them with another link that uses https. There is also no point in changíng the link on your side to https hoping that it will redirect because in this case, the https does not exist. All you will get is a 404 Error.
If the green lock appears for a second as you load the page but then disappears (as in my case), this is probably due to javascript firing after the pageload. You can follow these steps to find the cause, probably a http image hardcoded in a css or js file:
Velvet Blues
The next thing to do is install a plugin that will do the work for you. If you are lucky, it will change all the http files into https. I recommend “Velvet Blues Update URLs” plugin, or “SSL Insecure Content Fixer” plugin. You can find these in the WordPress plugin archive. Both of these plugins do pretty much the same thing. Once you have installed the plugin, it can be found in Tools > Update URLs.
Open Velvet Blues and type in the old URL (http) and the new URL (https). Tick all the boxes except the last one (Update ALL GUIDs). Click the button “Update URLs NOW”.
Still no green lock? Time to manually get to the nitty-gritty and find out exactly what is causing the Mixed Content issue.
The built in mixed content fixer in plugins such as “Velvet Blues Update URLs” fixes most mixed content in the HTML of your site. But there are some types of mixed content that cannot be fixed dynamically. These will need to be fixed either manually, or by going pro. This is because the links are hardcoded in (css or javascript) files on your site. So, what to do next?
This is where the nitty-gritty work comes in. You need to pinpoint the offending URL. It seems like a daunting task – thousands of lines of code to sift through from tons of files. But it’s not that bad. This is what I did:
- Scan your site to narrow down the search
First go to https://www.jitbit.com/sslcheck/ and get your site scanned. This will identify the pages that have mixed content, which then subsequently narrows down your search a little.
- Pinpoint the offending URLs
Next go to https://www.whynopadlock.com to pinpoint the URLs that are causing the Mixed Content.
As you can see, everything is hunky dory on the site except for one “soft failure” listed at the bottom. This is what you need to find and change. You already have a list of pages that have mixed content, so start there.
- Find the source
Open the first page on the list from the SSL scan from point 1. In order to pinpoint the offending URL, you need to open the browser’s developer tool which will reveal any web page’s code.
If you are using Opera like me, the easiest and quickest way into the developer tool panel is: right-click on the page > “Inspect Element”. Once the panel opens, click on “Console” on the navigation bar right at the top of the panel. Press the little yellow drop-down at the top to reveal your mixed content issues. Check out this page for more information on the various browsers’ developer console.
- Correct the issue
All you need to do now is go into WordPress Media and change the http to https on each of these images.
If the only Mixed Content errors were http, then at this point, once you have changed all the URLs listed in your developer tool console result, you should have the green lock. However, in my case, I had what is known as a URL Scheme Error. One of my links had a weird URL scheme. If this happens to you, then read on…
ERR_UNKNOWN _URL_SCHEME
I got up to this point and discovered that the offending link (an image link) was triggering an error that, according to net-informations.com, is a Chromium bug and could not be fixed. I have decided not to link the article as it is has no SSL and will only cause mixed content on my page again. The issue is called “ERR_UNKNOWN_URL_SCHEME error”. This occurs with URL schemes such as “mailto:”, “ftp:”, “http:” etc inside a container on the page. At the simplest level, a custom URL scheme allows users to open your app from other apps. There are temporary fixes but they are just that – temporary.
This error has no specific solution to date. It is occasionally patched, but seems to keep resurfacing. In some cases, prefixing your links with http:// (or https://) should resolve the issue for you:
Once I had identified the problematic image link, I decided to not just change the URL scheme but replace the image altogether. I was in the middle of optimising all images anyway, so I uploaded a new image that had been optimised. As my site was now on https:// anyway, it came in with that format. All I then needed to do was find the offending link in the html files and replace the complete URL there thus redirecting that link to the image I had just uploaded. Voilà. Solved and running smoothly.
Here is another article where I take you through the whole process of obtaining an SSL Certificate and implementing it so that you get that little green lock. “Switching from http to https – A complete step-by-step guide.”