Did you just move your WordPress site to HTTPS only to be met with some weird mixed content warning instead of that beautiful green padlock that you were expecting? Or, maybe you’re still in the planning stages for using HTTPS at your WordPress site and wondering what to expect when you make the switch.
Either way, this post is going to be helpful for you because I’m going to show you how to fix one of the most annoying issues after moving a site to HTTPS/SSL:
The mixed content warning.
First, I’ll explain what the mixed content warning actually means and why it might be happening to you, as well as what it looks like in various popular web browsers.
Then, I’ll give you a step-by-step guide on how to diagnose and fix the mixed content warning for your WordPress site.
Here’s What The Mixed Content Warning Means And Why It Happens
When you use HTTPS and an SSL certificate, it encrypts all the data that passes between your server and your visitors’ web browsers. However, in order for that encryption to work, everything passing between the server and browser needs to use HTTPS.
For example, you need to load:
- Images or videos (both your own media or media that you’re embedding from somewhere else)
- Scripts (both internal or external tracking scripts)
- CSS files
- …you get the idea – everything!
The mixed content warning appears when your site is still loading some assets over HTTP instead of HTTPS.
So why is that a problem? Well, let me quote from Google here as they do a good job of summing the issue up. Mixed content…
…weakens the security of the entire page, as these requests are vulnerable to man-in-the-middle attacks, where an attacker eavesdrops on a network connection and views or modifies the communication between two parties. Using these resources, an attacker can often take complete control over the page, not just the compromised resource.
That doesn’t sound too nice, right?
Basically, even though you’re trying to do the right thing by using HTTPS, loading mixed content isn’t getting you the full benefits of HTTPS because a malicious actor could still hijack that HTTP content.
What The Mixed Content Warning Looks Like In Different Browsers
Because mixed content weakens the security of your page, most browsers show a warning to visitors if your site serves up mixed content. Here’s what the mixed content warning looks like in popular browsers, so you can tell whether or not it’s happening to your site.
Mixed Content Warning In Google Chrome (And Other Chromium Browsers)
In Chrome or other Chromium browsers (e.g. Opera), mixed content gets the generic information icon instead of the green padlock. Additionally, if users hover over the icon they’ll see that ominous “Your connection to this site is not fully secure” message:
Mixed Content Warning In Firefox
In Firefox, you see the same information icon, as well as a yellow alert symbol over the padlock. If users hover, they’ll see “Connection is not secure”:
Mixed Content Warning In Edge
In Edge, it actually shows the Not secure message, as well as a deeper explanation if users click:
Most Likely Causes Of Mixed Content On Your WordPress Site
Ok, if you just moved your site to HTTPS but are getting the mixed content warning instead of the green padlock, here are some of the most likely causes.
You’re Still Loading HTTP Images (Either Your Own Or Other People’s)
When you update your WordPress site’s URL to use HTTPS, it changes all the WordPress-generated links like:
- Menu items
- Post archive links
- Widgets
- Etc.
But it doesn’t change all of the links in your content (e.g. anything you typed into the WordPress editor), including the images that you’ve embedded. As a result, all of your old images are still loading over HTTP.
Thankfully, this is pretty easy to fix by running a search/replace on your database.
If you’re hotlinking images from other servers and loading them over HTTP, that might be another reason for the warning. You’ll need to fix these manually.
You’re Using External Scripts Or Embeds Over HTTP
Pretty much every site is going to load external scripts or embed external content. For example, the Google Analytics script, or a YouTube video.
If those scripts/embeds use HTTP, they’re going to trigger a mixed content warning.
Most modern scripts that you’d embed are already using HTTPS, but this can be an issue if:
- You haven’t updated the embed code in ages (e.g. I had an Amazon embed code from years ago that still used HTTP, even though Amazon had since moved to HTTPS)
- You’re using a lesser-known script that uses HTTP for some reason
One Of Your Plugins Uses Absolute Paths (A No-No)
This one should not be an issue if plugin developers use proper code standards. But some plugin developers use absolute paths instead of relative paths, which might cause some plugin content to load over HTTP.
You probably won’t run into this that often because most developers do things properly – but it can happen.
How To Fix WordPress Mixed Content Warning: Step-By-Step
Now that you know what the issue is and why it might be happening, let’s cover how to diagnose and fix it.
Step 1: Figure Out What’s Causing The Issue (i.e. Find The HTTP Content)
To start, you need to sniff out the HTTP content on your site that’s triggering the mixed content warning.
There are a few ways that you can do this.
First, there are lots of tools that can help you find mixed content on your site.
If you’re only getting the error on a single page, the free Why No Padlock tool is great. All you do is enter your URL and it tells you the exact resource that’s causing the problem:
It even tells you what you need to do to fix the issue.
Why No Padlock only works for a single URL, though. So if you’re seeing the mixed content error sitewide, you might want a bulk tool like HTTPS Checker, which will crawl up to 500 pages for free (or up to 10,000 pages for $9 per month).
Alternatively, you can also just use the Security tab of Chrome Developer tools to find what content is insecure:
Step 2: Fix The Issue (A Few Different Scenarios)
Once you find what’s causing the issue, you simply need to update the resource to use HTTPS (if possible) or stop loading the resource (if it doesn’t support HTTPS).
Here are a few ways to do that depending on what’s causing the problem.
Because some of these changes involve your database, I would highly recommend backing up your site before you continue.
Fix Your Own Images Or Content Still Loading Over HTTP
If your own images or other self-hosted content are still loading over HTTP after you’ve already installed an SSL certificate and activated HTTPS for your site, the best way to fix the problem is to run a search and replace on your database.
Basically, you’re going to find all instances of http://yoursite.com and replace them with https://yoursite.com.
The easiest way is by using a free plugin from Delicious Brains called Better Search Replace.
Once you install and activate it, go to Tools → Better Search Replace.
Fill out the form like this:
- Search for:
http://yoursite.com - Replace with:
https://yoursite.com(note the addition of the S) - Select tables: – choose all tables
For now, leave the Run as dry run? box checked. This will do a test run before making any permanent changes. Then, click Run Search/Replace to run the test:
If the test run goes through without any issues, uncheck the Run as dry run? box to run it for real.
Fix External Content Loading Over HTTP
If the issue is external scripts or content loading over HTTP, you’ll want to fix things manually.
Let’s say the issue is that you’re embedding Font Awesome via the BootstrapCDN and the Font Awesome CSS file is loading over HTTP (BootstrapCDN uses HTTPS – this is just an example):
In that screenshot, you can see that the offending script link is:
http://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
To see if you can load this script over HTTPS, just add an “s” and see if it works in your browser. Below, you can see that I am indeed able to load the script over HTTPS and get the green padlock:
Once you’ve verified that the script/content loads over HTTPS, all you need to do is add the “s” to all instances of that script/content on your site.
Usually, you can do this by just going to where you’ve embedded the script and adding the “s” that way:
If you can’t find where you’ve embedded the script, another option is to use the same database search/replace method from the previous step to replace the HTTP version with the HTTPS version:
Step 3: Verify That You Get The Green Padlock
Once you’ve replaced all the HTTP content with HTTPS, go back and verify that your site does indeed now get the green padlock:
And there you go – that’s how to fix the mixed content warning on your WordPress site. Have any other questions about WordPress mixed content warning issues? Leave a comment!
