How to Quickly Fix WordPress Mixed Content Warnings (HTTPS/SSL)

Running your WordPress site over HTTPS is no longer optional. 🔒 Not only is it more secure (everything is encrypted, nothing passed in plain text), but it also builds trust, is an SEO ranking factor, and provides more accurate referral data. 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.

(Suggested reading: if you’re using legacy TLS versions, you might want to fix ERR_SSL_OBSOLETE_VERSION Notifications in Chrome).

We have an in-depth guide on how to migrate from HTTP to HTTPS, and a very common problem website owners encounter afterward is “mixed content warnings.” Today we’ll show you a few different ways you can fix these on your WordPress site.

• What is a Mixed Content Warning?
• What Causes Mixed Content Warnings?
• How to Fix Mixed Content Warnings

What is a Mixed Content Warning?

A mixed content warning appears in a user’s browser when the WordPress site is loading both HTTPS and HTTP scripts or content at the same time. You can’t load both as they are completely separate protocols. When you migrate to HTTPS, everything needs to be running over HTTPS.

Wired actually documented their transition from HTTP to HTTPS and a mixed content warning snag they ran into:

“[…] one of the biggest challenges of moving to HTTPS is preparing all of our content to be delivered over secure connections. If a page is loaded over HTTPS, all other assets (like images and Javascript files) must also be loaded over HTTPS. We are seeing a high volume of reports of these “mixed content” issues, or events in which an insecure, HTTP asset is loaded in the context of a secure, HTTPS page. To do our rollout right, we need to ensure that we have fewer mixed content issues—that we are delivering as much of WIRED.com’s content as securely possible.”

Below are some examples of what happens in the browsers if you don’t fix these warnings.

Chrome Mixed Content Warning Example

Here is an example of what happens in Chrome when a mixed content warning fires on a WordPress site. According to NetMarketShare, Chrome currently leads in the pack in terms of browser market share, being used by over 60% of the web. So the following warning is most likely what most of your visitors would see.

Firefox Mixed Content Warning Example

Here is an example of what happens in Firefox when a mixed content warning fires on a WordPress site.

Microsoft Edge Mixed Content Warning Example

Here is an example of what happens in Microsoft’s Edge browser when a mixed content warning fires on a WordPress site.

Internet Explorer Mixed Content Warning Example

Here is an example of what happens in Internet Explorer when a mixed content warning fires. As you can see, IE is probably one of the worst because it actually breaks the rendering of the page until the popup is clicked. Thankfully, Internet Explorer doesn’t hold that much of the browser market share anymore.

What Causes Mixed Content Warnings?

We’ve found that the most common time mixed content warnings appear is right after someone migrates their WordPress site from HTTP to HTTPS. HTTP links simply get carried over and this causes mixed content warnings to start firing. Another reason could be that you just added a new service or plugin.

• Plugin developers sometimes use absolute paths (http://yourdomain.com/style.css) in their plugins or themes to link to CSS and JavaScript instead of using relative paths (/style.css).
• Images have hardcoded URLs (http://yourdomain.com/image.png) that point to HTTP. These could be within a post, page, or even a widget.
• Your linking to HTTP versions of external scripts. (Hosted jQuery, Font Awesome, etc.)
• You have embedded video scripts using HTTP instead of HTTPS.

How to Fix Mixed Content Warnings

Follow the simple steps below to fix your WordPress mixed content warnings. This assumes you have already done the following:

• Installed an SSL certificate
• Redirected HTTP to HTTPS (sitewide)

We’ll be using our development site (wpdev.ink) in the examples.

Step 1

The first thing you need to do is find out which resources are still loading over HTTP. Browse to the page where it’s happening and launch Chrome DevTools. Remember, it might only be happening in certain areas of your site, not globally.

• Windows: F12 or CTRL + Shift + I
•  MAC: Cmd + Opt + I)

You can also open Chrome DevTools from the tools menu.

Step 2

There are are a couple places you can check which resources aren’t loading over HTTPS. The first is the “Console” tab. Note: You might need to refresh the page after you have Chrome DevTools open for it to properly load everything.

Below we can easily see that there is an insecure image being linked to an HTTP version of the site and a link pointed to an HTTP hosted version of jQuery.

You can also look in the “Security” tab. It will show you the non-secure origins and you can click to “View the request in the network panel.” Note: You might need to refresh the page after you have Chrome DevTools open for it to properly load everything.

And last but not least, you can view the requests in the “Network” tab. Note: You might need to refresh the page after you have Chrome DevTools open for it to properly load everything.

If you aren’t using Chrome, or 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.

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.

• There is a free little tool called SSL Check from JitBit which you can use to crawl your HTTPS WordPress site and search for insecure images and scripts that will trigger a warning message in browsers. The number of pages crawled is limited to 200 per website.
• The Ahrefs audit tool now has the ability to detect HTTPS/HTTP mixed content. If you already have access to this, or someone on your marketing team does, this can be a great way to be thorough.
• HTTPS Checker is desktop software you can install that will scan your site. It can help you check for “not secure” warnings and content after big changes. It is available on Windows, Mac, and Ubuntu. The free plan allows you to check up to 100 pages.

Step 3

The next step is confirming that those resources loading over HTTP are accessible over HTTPS. They most likely are, you just need to update the links. If our example above we’ll use the insecure image and hosted jQuery.

• http://wpdev.ink/wp-content/uploads/2018/06/website-never-done.jpg
• http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

If we take both of those URLs, input them into our browser’s address bar, and append HTTPS on the beginning, we can see that they load just fine. Therefore we simply need to proceed to do a search and replace on our site.

Alternatively, you can also do a search and replace with the interconnect/it Search Replace DB PHP Script or WP-CLI.

Step 4

After you finish doing the search and replace you’ll want to double check your site to confirm the mixed content warnings are gone. We recommend just visiting your site 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 insecure image is now fixed, but the hosted jQuery warning still remains. The reason is that we ran a search and replace on resources loading from our own domain. This is an external script which has to be manually updated.

In this case, the script had been manually added in our WordPress header (header.php). The script should be using a relative URL, so we updated it to: //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

For most of you, the search and replace will most likely fix all of your issues. It’s really own those of you that have hardcoded something on your WordPress site that might run into additional issues. If you think there is an external script hardcoded in one of your plugins or theme, and you’re having trouble tracking it down, feel free to reach out to the developer for assistance.

Chrome No Mixed Content Warnings Example

Here is an example of what happens in Chrome when everything is loading correctly over HTTPS with no mixed content warnings.

Firefox No Mixed Content Warnings Example

Here is an example of what happens in Firefox when everything is loading correctly over HTTPS with no mixed content warnings.

Microsoft Edge No Mixed Content Warnings Example

Here is an example of what happens in Microsoft Edge when everything is loading correctly over HTTPS with no mixed content warnings.

What About HSTS?

Some of you might be wondering why you can’t simply use HSTS (HTTP Strict Transport Security) fix this. 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 in which you add to your web server and is reflected in the response header as Strict-Transport-Security.

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 third-party sites enabling HSTS. Therefore you need to always update http:// URLs.

Credits: Kinsta