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