Mixed content warnings happen when only some content on your website is secured and encrypted with an SSL certificate.
This leads to security issues as well as an error message that your visitors can see indicating your website is insecure.
In this post, I’ll share more detail on mixed content warnings, what they mean, how to fix them and how they can be avoided on your WordPress website.
What is Mixed Content?
Your website is made up of many different types of content: an HTML file, images, videos, stylesheets, scripts and more. When a user types a URL into a browser, the browser makes a request to the server to return the files.
Because of the amount of content in a website, your browser may have to make multiple requests to a server to properly load everything.
While the initial HTML file will load under a secure connection, (providing you have an SSL certificate) the latter requests for subresources may not be returned securely.
The result of both HTTPS and HTTP resources are being loaded onto a single page is mixed content.
This happens when some URLs aren’t set up to be served over HTTPS. Updating the URLs from HTTP to HTTPS will resolve the warning. This is explained in detail later on.
As previously mentioned, most browsers will display a mixed content warning to let the user know that the resources they have loaded are insecure.
Types of Mixed Content
Not all insecure content holds the same level of danger if your site is compromised. Mixed content can be broken down into two categories: passive and active.
Passive
Passive mixed content doesn’t interact with other content on the page. This includes resources such as images, videos and audio content. Because the resources are static, attackers are limited in what they’re able to accomplish if they get a hold of your site.
Possible hacking could include changing images, inserting ads, defacing the site, and shifting elements around to confuse users such as the save and delete button images.
Also, even if the hacker doesn’t alter the content of your site, they are still able to track user patterns and view what pages, resources, and products they viewed.
Active
Active mixed content interacts with the page as a whole and includes content such as stylesheets, scripts, iframes and flash resources. A hacker is able to do quite a lot to your website if they get ahold of these.
The attacker would be able to change anything about the page, including inserting different content, stealing passwords or even redirecting users to a malicious site.
If you have active content that some browsers block entirely from the site, it can impede the user experience as well as your visitor’s trust in your website.
Why Mixed Content is Bad
Using HTTPS protocol and encrypting communication between browser and server is important to protect your site and your users from attack.
Pages with mixed content are only partially encrypted, which leaves the unencrypted content susceptible to hackers.
Depending on whether the content is passive or active, you can potentially surrender control of your entire website without being aware of it.
How Browsers Behave
Ideally, all browsers would block all dangerous content. But, this isn’t really feasible as millions of people rely on the internet to exercise freedom of speech. But, not everyone has the ability to stay up-to-date on the latest security practises.
Instead, browsers block dangerous content and allow the less dangerous content to be requested by a user. It decides the danger level using the mixed content specifications and determines whether content is optionally blockable or blockable.
Content is optionally blockable “when the risk of allowing its usage as mixed content is outweighed by the risk of breaking significant portions of the web,” according to W3C’s Mixed Content Specification.
All mixed content that is not considered optionally blockable is blockable. So, browsers that are updated to follow the Mixed Content Specification restrict it.
It may be important to note that not all visitors use up-to-date browsers. When developing a site, specific browser behaviors involving mixed content can be found on each browser’s website.
Unmixing the Content
If you have been receiving these mixed content warnings, there are a few steps you can take to help secure your website and content.
Back It Up
Before you make any drastic changes to your site, be sure you have a backup just in case anything goes awry. You’ll also want to make a backup after these changes to lock in your newly secure content.
If you need some advice on picking a backup plugin, take a look at 5 Free and Best WordPress Backup Plugins: The Definitive List.
Some plugins even have built in security scanners to keep your content safe.
Playing Detective
Each browser has a different way of notifying you about your mixed content warning. But, it’s typically found in the URL bar with an altered padlock icon.
Chrome version 21 or later has a grey shield with a red box on the right side of the URL bar.
Firefox has a small lock with a warning icon. Safari versions 9.0.1 or later don’t display a mixed content warning, but content may still be blocked.
Console Method
Once you have seen the mixed content warning for your site, you can determine what content is insecure by checking the JavaScript console in your browser.
The method to reach the console varies from browser to browser and you can consult your browser’s documentation for details.
In Chrome, right click on the window and select Inspect.
At the top of the Inspector window there’s a series of tabs. Click Console.
If any content has loaded on the page and triggered a mixed content warning, it appears in the console.
The notification will tell you what made it through with the HTTPS protocol and what was deemed either optionally blockable or blockable by your browser. You can then take note of all your insecure content so you can secure it later.
Please note: The JavaScript console only loads mixed content warnings for the page it’s on. So, you’ll have to visit each page manually to test your site’s content.
Source Code Method
You can also view insecure content your website has by looking at its source code.
In Chrome and Firefox, right click on your website and select View Page Source. In Safari, the option is called Show Page Source.
Your entire page source code will appear. Then, you can do a search for “http://” to see what resources on your site aren’t using the HTTPS protocol.
Verifying Your Content
You can also place the URL of the insecure content you find into your browser’s address bar. But, replace “http://” with “https://” to make sure the resource is still available over a secure connection.
If your website loads without error, you can go into your files and settings. Then, permanently change each URL to the secure “https://” prefix.
Search and Replace Plugins
There are a number of plugins and tools that will help you find insecure content, then replace it in a few clicks.
The plugin options can be deleted once your URLs have been updated.
Why No Padlock
Why No Padlock is a website that lets you plug in a secure URL and the site will give you a report about your SSL certificate as well any mixed content in your site.
It also checks for SHA-1 Algorithm test, POODLE test and insecure form calls.
It’s an excellent alternative to a plugin if you want to keep your site files lean. But, it’s only a diagnostic tool and won’t do any actual replacing.
SSL Insecure Content Fixer
The SSL Insecure Content Fixer is a plugin that will check and find your insecure content and fix it for you.
There are a number of different levels of depth that they utilize to search for insecure content from URLs to checking every single element of your website.
You can start with static content and work your way from there if the mixed content warnings still appear.
Better Search Replace
The Better Search Replace plugin lets you run a search for a string of text, then update content on a website to make sure you’re running properly after the transfer of a website.
You can search for the “https://” prefix. Then, automatically replace any URLS which contain it to have the “https:// prefix instead.
One of the neat features of the Better Search Replace plugin is the ability to do a dry run to make sure that you haven’t changed anything accidentally or unintentionally.
This plugin also comes with Multisite support.
Content: Unmixed
A mixed content warning may not be obvious, but it helps point out a major issue with your site. Taking a few steps to modify your insecure resources is worth your time. Especially for your users’ peace of mind, not to mention your own.
Did you find the mixed content warning on your WordPress website? Were you able to resolve it or did you run into issues? What’s your favorite solution for fixing the mixed content warning? Feel free to share your experience with us in the comments below.
