Watch out for mixed-content warnings on SSL-sites

Contents
Lately, I have been performing a number of SEO Audits for clients. One category of issues that I see very frequently these days is SSL-related issues. Probably because of the availability of cheap and free SSL certificates (Let's Encrypt), everybody seems to be installing them just like that. However, you should carefully plan this. Otherwise, you are doing just as bad as you previously were....
The errors I see are basically 2-fold:
- Simply installing an SSL certificate without enforcing SSL-access
- Installing and enforcing SSL access and then think you are ready
Let's take a quick look at both issues.
Enforce SSL
This one is really a no-brainer if you read my blog. If you only install the certificate but don't enforce SSL access, your site is available both with and without SSL: http://example.com and https://example.com. First of all, this creates duplicate content, as every URL is available in 2 versions and secondly, it does not enforce the secure access you want, everybody can simply choose which version to access in the browser. The solution is simple: enforce SSL access in the Joomla Global Configuration:
Avoid Mixed-Content warnings in your browser
Most people get it right so far. Then they do a quick check on their homepage and if they see a nice green padlock in their browser, they think they are ready. However, in the majority of cases, this is not the case, especially in older websites. The big issue is that if you access a website over SSL, all resources the page loads should also be SSL. Now with most resources, this is probably fine. The majority of images, CSS, and Javascript files are loaded with a path relative to the main (https) URL: no problem.
The problem starts with hardcoded resources. As an example: if you ever inserted an image with a hardcoded path and this was an http-path, this will cause you problems, regardless of whether you load the image from your own domain or an external domain. First of all, your browser no longer shows the green padlock:
Even more, when you try to fill in a form on a page like this, browser warnings become even more severe. So, obviously, all this should be avoided.
Causes for Mixed-Content
Next to the mentioned hardcoded images, there are a number of other issues that I often see:
- Embedded videos from Youtube. Until a few years ago, youtube embedded videos were served from http, so the old -embed code is insecure. You can easily fix this: simply change http to https, and everything will remain functioning correctly. Basically, this counts for all embed- and iframe snippets.
- Bad templates pulling hardcoded resources. This can even be local resources, but more often it concerns http-references to Google Webfonts or remote Jquery libraries. You will have to update the template to use https-references.
- Crappy form extensions: I have seen some forms that pull in local Javascript validation files over http. This is something that you will have to ask the developer for.
- Scripts to load ads or tracking scripts.
- There are more exotic issues I sometimes see, but these are the most frequent.
How to find all of these issues
Finding all of these problems is often the hardest bit. If you have a small site of no more than a few dozen pages, it is easy enough: simply browse all pages and keep an eye on the green browser padlock. However, this is undoable if your site has a few hundred pages or more. Happily, there are some tools to help you with this, and they are often free to use:
Screaming Frog SEO Spider
I have mentioned this tool many times on my blog. It scans your site for many SEO issues. A little bit hidden, under the Reports section, you find an option to check for SSL-pages with insecure content:
It will produce a CSV-file with all erroneous URLs. This tool is free to use for sites up to 500 URL's and you can download it here.
Website Auditor by SEO Powersuite
I use this tool myself. It offers similar functionality as Screaming Frog, but the interface is a little more friendly and easier to use. Also, it displays all URLs with insecure content without having to download a CSV file. It is listed directly under HTTPS pages with mixed content issues:
This is a very easy way to find all pages with issues. The tool is free to use if you don't want to save your projects, otherwise, it's a relatively cheap one-off fee. You can download it here (note that the suite contains 4 tools, of which the website auditor is one).
So now you have the list of pages with insecure content. Next, you will have to check which insecure item there is to fix on these URLs. This is pretty straightforward: browse the URL and open up your Chrome inspector. It will immediately scream the issue at you:
Now that you see the issue in front of you, simply correct the resource and load it securely. With a bit of luck, you only have a few of these issues. And once fixed, you are good to go, all secure and well: it keeps Google happy...
I must admit I sometimes use a Quick & Dirty technique when I have too many of these issues. It is not always applicable, but I sometimes have great results with the Regularlabs tools DBreplacer and Rereplacer. They both give you very sophisticated search and replace functionality. Use them wisely though: simply replacing every occurrence of http with https might be too much and good damage your site and SEO. If you use it very specifically, you can have nice results very quickly. Say hat I have many images with hardcoded http-paths. Most probably they all share the following path in Joomla: http://example.com/images/..... In such a case, you can use http://example.com/images/ as your search string and https://example.com/images/ as your replacement string.
