Running your WordPress site over HTTPS is no longer optional. Not only is it more secure (everything is encrypted, with nothing passed in plain text), but it also builds trust, is a search engine ranking factor, and provides more accurate referral data. Unfortunately, when migrating from HTTP to HTTPS, website owners can encounter several issues. One of which is ‘mixed content warnings’.
Performance issues tied to encryption have been fixed for the most part thanks to HTTP/2, and Let’s Encrypt has changed the entire industry by providing you with an easy way to get free SSL certificates.
Most importantly for online businesses, web browsers such as Google Chrome and Mozilla Firefox are cracking down on sites not running over HTTPS, and are showing stricter warnings to potential visitors. For example, if you’re using legacy TLS versions, you may encounter ERR_SSL_OBSOLETE_VERSION notifications in Chrome. Warnings are the last thing you want your visitors to see.
To help you avoid those problems, we have an in-depth guide on how to migrate from HTTP to HTTPS. However, after following that process, you might still see mixed content warnings.
Today we’ll show you a few different ways you can fix this issue on your WordPress site.
What Is a Mixed Content Warning?
A mixed content warning appears in a user’s browser when the WordPress site they’re trying to visit is loading HTTPS and HTTP scripts or content at the same time. This can cause problems since HTTP and HTTPS are completely separate protocols.
Mixed Content Warning Examples
Chrome is currently the top browser, used by over 77% of the web. So the following warning is what most of your visitors would see:
A mixed content warning in Google Chrome
Of course, not everyone is using Chrome.
Here is an example of what happens in Firefox when a mixed content warning displays on a WordPress site:
A mixed content warning in Firefox
Next is an example of what this warning looks like in Microsoft Edge:
A mixed content warning in Microsoft Edge
And here’s how it appears in Internet Explorer:
Internet Explorer mixed content warning
As you can see, Internet Explorer is probably one of the worst places for this warning to appear, because it actually breaks the rendering of the page until the popup is clicked on.
This isn’t an error you want visitors on any browser to see. It can be fixed, but first, you’ll need to understand why it occurs.
What Causes Mixed Content Warnings?
We’ve found that most common mixed content warnings appear right after someone migrates their WordPress site from HTTP to HTTPS. Some HTTP links simply get carried over, and this causes mixed content warnings to start firing.
Here are some additional causes of this warning:
Unfortunately, you may not uncover the real source of the issue until you start troubleshooting.
With that in mind, let’s take a look at some methods you can use to fix mixed content warnings.
How to Fix Mixed Content Warnings (4 Steps)
You can follow the four simple steps below to fix your WordPress mixed content warnings. This process assumes that you have already done the following:
We’ll be using an example development site in the following examples.
Step 1: Find Out Which Resources Are Loading Over HTTP
The first thing you’ll need to do is find out which resources are still loading over HTTP.
Remember that these warnings might only be happening in certain areas of your site, not globally. Browse to the page that’s prompting the warning and launch Chrome DevTools by hitting:
- Windows: F12 or CTRL + Shift + I
- macOS : Cmd + Opt + I
You can also open Chrome DevTools from the tools menu in your browser:
Chrome developer tools in browser tools menu
There are a couple of places you can check to find out which resources aren’t loading over HTTPS.
The first is the Console tab. Note that you might need to refresh the page after you have Chrome DevTools open for it to properly load everything.
If mixed content errors are present, they’ll be highlighted in either red or yellow. Typically, they’re accompanied by information explaining that “This request has been blocked; the content must be served over HTTPS.” This means that the browser settings are configured to automatically block any HTTP content.
In an effort to ensure pages only load over HTTPS, Chrome started to begin blocking mixed content by default with Chrome 79. Most recently, they unrolled features to start auto-upgrading mixed images and media.
Therefore, when using Chrome DevTools, you may see mixed content messages indicating some requested elements were automatically upgraded:
Chrome DevTools mixed content in console
Here, we can clearly see that there are a variety of insecure elements causing the mixed content warnings, including a stylesheet and script.
You’ll also notice that a request was made for an insecure .jpg image, which was automatically upgraded to HTTPS. (Note: If this were in another browser other than Chrome, it wouldn’t be automatically upgraded).
You can also look in the Security tab of Chrome DevTools. This will show you any non-secure origins:
Chrome DevTools security
Under the Network tab, you can also find a list of blocked requests:
Chrome DevTools Network
If you aren’t using Chrome, or you just want a quick summary of the errors, you can also use a free tool like Why No Padlock.
It scans an individual page and shows you all of the insecure resources:
Why No Padlock summary of mixed content errors
This tool is easy to use. You can simply enter your URL and click on Test Page, and it will show you any errors that are present. Plus, it’s free!
Checking HTTPS Warnings in Bulk
If you’re worried about the rest of your site, you might want to check it in bulk. Here are some recommended options for doing that:
Using any of the above tools can help save you time over having to manually check each page on your site for mixed content warnings and errors. For a thorough assessment of the potential errors on your site, you might consider using a combination of these solutions.
Step 2: Verify Whether HTTP Resources Are Accessible Over HTTPS
The next step is confirming that the resources loading over HTTP are accessible over HTTPS. They most likely are, you just need to update the links.
As an example, let’s say our mixed content errors pointed to the following insecure jQuery script and .jpg image:
If we take both of those URLs, input them into our browser’s address bar, and replace “http” with “https” at the beginning, we can see that they load just fine. Therefore, we simply need to do a search and replace on our site.
Step 3: Perform a WordPress Search and Replace
There are a lot of ways to perform a WordPress search and replace. In this section, we will walk you through two different recommended options.
If you’re curious, we don’t recommend using a tool such as Really Simple SSL. While it’s a great plugin, it’s best not to rely on a solution like this over the long term. You won’t be migrating back to HTTP later, so it’s best to do it the right way and update your HTTP URLs in your database (as we’ll show you below).
If you’re a Kinsta customer, you can use our search and replace tool, which is available right within the MyKinsta dashboard.
Go to your site’s Tools page and click on Search and Replace:
The Search and Replace tool in MyKinsta
Next, in the search field, enter the value you want to look for in the database.
In this case, we will use our HTTP domain: http://kinstalife.com. Then click on the Search button. The search and replace tool will show the number of occurrences for the given string.
Check the Replace box to continue with the replacement process. In the Replace with field, enter whatever should replace the value you are searching for. In this case, we will use our HTTPS domain: https://kinstalife.com.
We also recommend leaving the Clear cache when ready box checked, to automatically purge the Kinsta cache after the search and replace process is complete. Finally, click on the Replace button:
HTTP to HTTPS search and replace in MyKinsta
Important: Make sure you don’t include any leading/trailing white space in either of these fields, as this might produce undesirable results.
Search and Replace Alternatives
If you aren’t using Kinsta, you can accomplish this same task with the free Better Search Replace plugin, and then simply delete it after you’re done:
Tired of subpar level 1 WordPress hosting support without the answers? Try our world-class support team! Check out our plans
The Better Search Replace WordPress plugin
You can download this tool from the WordPress Plugin Directory, or by searching for it within your WordPress dashboard.
After activating it, just search for your HTTP domain (http://yourdomain.com) and replace that with your HTTPS domain (https://yourdomain.com):
The Better Search Replace WordPress plugin options
Note that this plugin hasn’t been tested with the latest release of WordPress.
Step 4: Confirm That the Mixed Content Warnings Are Gone
After you finish doing the search and replace, you’ll want to double-check your site to confirm that the mixed content warnings are gone. We recommend visiting your site on the frontend and clicking around on a few pages while looking at the browser status indicator up in the address bar.
On our site, we can see that the .jpg image is now fixed, but an insecure script warning remains.
That’s because we ran a search and replace on resources loading from our own domain. The jQuery warning is caused by an external script that has to be manually updated:
Mixed content warning in Console
In this case, the script needed to be manually added to our WordPress header (header.php). It should be using a relative URL, so we updated it to //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:
HTTP external script added to WordPress header in Theme Editor
The search and replace will most likely fix all of your issues.
In general, you’ll only run into additional problems if you have something hardcoded on your WordPress site.
No Mixed Content Warnings Examples
So you now know what to look for to fix these mixed content errors.
Here is an example of what happens in Chrome when everything is loading correctly over HTTPS, with no mixed content warnings:
Chrome no mixed content warnings
Firefox will offer a similar message:
Firefox no mixed content warnings
And here’s what you’ll see in Microsoft Edge:
Microsoft Edge no mixed content warnings
Although the wording of the message may vary slightly depending on which browser you’re using, you should see a notification indicating a secure connection. If you do, you’ll know that you are no longer dealing with mixed content errors on your WordPress site.
What About HSTS?
Some of you might be wondering why you can’t simply use HSTS (HTTP Strict Transport Security) to fix this problem. HSTS was created as a way to force the browser to use secure connections when a site is running over HTTPS.
It’s a security header you can add to your web server and is reflected in the response header as ‘Strict-Transport-Security’.
However, HSTS isn’t a quick fix for all mixed content warnings. HSTS merely handles redirects, whereas the mixed content warning is a feature of the browser itself. You also don’t have control over whether third-party sites enable HSTS.
Therefore, you’ll always need to update your http:// URLs. Esa Jokinen dives deeper into the reasons why in this Server Fault discussion.
Additional Recommendations (Special Cases)
If you’re using the Elementor page builder, you must also go into the Elementor settings and update your site’s URL there, so the CSS files will regenerate with the new URL. O
Mixed content warnings can be frustrating to deal with, especially when there are a handful of causes they can be attributed to. Luckily, there are some simple steps you can take to fix these issues.
In most cases, a simple search and replace should quickly resolve your mixed content warnings and have your site back to normal in just a few minutes. If that doesn’t fix everything, it’s likely there are one or two hardcoded scripts left behind. You’ll need to find them and manually update them in order to clear this error or hire a developer who can do that for you.
If you have any feedback or run into any issues, let us know below in the comments section!
The post How to Quickly Fix WordPress Mixed Content Warnings (HTTPS/SSL) appeared first on Kinsta.
This content was originally published here.