What is ‘Mixed Content’? (& how to fix it?)
A few years ago it was common to see website addresses like:
http://www.glassmountains.co.uk
….whereas the more modern version is:
https://www.glassmountains.co.uk
You’ll be forgiven for not noticing the difference right away, it’s all down to the HTTP / HTTPS bit at the front.
In short, HTTPS means that the connection has to via a secure, encrypted connection, which means that the bad guys cannot simply eavesdrop on our conversations and pick up all manner of private or sensitive information. You’ve probably heard of SSL CERTIFICATES, these are an integral part of HTTPS.
Feeling insecure?
Whilst modern website development best practices mean that all websites today should be built to be HTTPS compliant, there can be issues. E.g. the other day I noticed Fig 1 below when I visited a website in Google Chrome (name obscured to save blushes):
The big, blaring ‘Not Secure’ label is not what we want to see:
….where in Fig 2 we see the nice, reassuring padlock displayed instead.
Digging Deeper
If I click the ‘Not Secure‘ label, you will see this:
The element that should catch your eye here is where it says ‘Certificate (Valid)‘.
So the website has a valid SSL certificate, but we are still getting a warning – what gives?
Mixed Content
To understand that answer, we need to remember that, under the calm surface of your webpage, there is a spaghetti nest of content and connection requests going on to fulfil all the needs for you page; images from here, stylesheets from there, Twitter feed from over there etc etc. And if any of those connections are the insecure HTTP instead of HTTPS, then Chrome will report this error – if one fails, it all fails – that’s security for you!
How can this happen?
WordPress is a moveable feast, we add plugins, we make changes, perhaps hosting is migrated, WordPress itself updates – there are many moving parts here. And if one of those things goes wrong, it can cause mixed content problems. As Viper says in Top Gun – “You fly jets long enough, something like this happens“.
https://getyarn.io/yarn-clip/7080b26b-b1f9-4a50-8439-8e135ea07615
How do I troubleshoot this?
The quickest way of addressing this is simply to get your web developer or agency on the case but if you don’t have that luxury (though you can hire us!) you may need to do some digging first in case you can fix it yourself (or, at least, give more precise information to someone who can fix it).
Hello to Google Chrome Inspect!
In Google Chrome we have the ‘Inspect‘ tool which helps us peel back the veneer of a web page and look directly into the spaghetti nest of connection requests which make up a web page:
I’ll save a full tour of Google Chrome’s “Inspect” tool for another day but, for now, if you go the your problematic page, and click Inspect, you should see something as follows:
Don’t panic! You don’t need to know everything that’s going on here.
What you are seeing here is a black box flight recorder of everything that’s going on with your webpage – web developers like us use this all the team as it is an essential debugging and research tool.
If you look closely, you’ll see that Inspect is trying to warn you of what is going wrong.
In the CONSOLE window, you’ll see the warning signs for MIXED CONTENT.
And you’ll see the telltale signs of URLs (fancy word for web page addresses) start with HTTP instead of HTTPS.
Those are what are causing your mixed content issues (and Google Chrome to complain).
How to fix
Sometimes the issue is as simple as editing the page in question, and changing the HTTP to HTTPS on any media (typically images) you’ve embedded into the page or the post. Sometimes deleting and re-adding your image from the media library can rectify this as well.
If you can’t find the culprit, you’ll need to hand over to a professional (e.g. we can run scans of all entire WordPress database looking for occurrences of HTTP and fixing things en masse).
The End
Hopefully, this makes you more aware of the issue & gives a plan to fix it.
And you do want to fix it as security warnings sew doubt into the minds of our fickle web site visitors minds Also, Google is increasingly suppressing websites which are not fully secure – i.e. this is an SEO bullet you want to dodge.
Thanks
Joel
p.s. feel free to jump into our Facebook group to chat about this or any other WordPresss/website related topic (and do keep an eye on our upcoming online events).
sdf
Tags: Google Chrome Inspect, HTTPS, SSL
No Comments