How to fix insecure or mixed content in WordPress

Having an SSL certificate is now a must for all websites. It’s not only a great way to make your website secure from threats but also get a good SEO boost in return. 

All our hosting plans on JungleWP includes Automatic SSL, that is easy to setup on your pods with just a click. That's also something that our team can enable for you if you need us to do it for you.

However, configuring your website to HTTPS on an old WordPress website that was built over HTTP is a process that often involves many issues and errors. One of the common issues is the “insecure content” or “mixed content” error.

To prevent this error from affecting your business and traffic, it’s extremely important that you fix the error as soon as you discovered it. In this guide, we’ll show you how to fix the mixed content error using a simple free plugin. Keep reading to see how it works.

What Is Mixed Content Error?

The mixed content (or insecure content) error commonly occur when there’s an issue with your website’s HTTPS configuration.

For example, when you have your website configured for HTTPS but your images and other media links loads over the old HTTP, browsers see it as suspicious and unsafe activity and gives a mixed content warning to remind people that some links on the site could be harmful.

When the error occurs, browsers like Edge, Chrome and Firefox will show a warning message next to the HTTPS lock stating that the site hosts insecure content. Except they will see a warning sign next to HTTPS instead of the secured lock symbol.

In some situations, the browser will go as far as to block scripts or a page if it assumes the insecure content can be harmful to users. Especially when a website use HTTPS and loads code such as JavaScript in HTTP, browsers see it as malicious content and blocks the scripts from loading. Sometimes, it will even block a page by showing a scary warning page to users.

How It Can Break Your Website

In most situations, the mixed content error won’t do much harm to your website. Your blog posts and pages will continue to load and the website will function as normal. However, keeping your website in this condition could break your website and your business.

Seeing a warning message next to a website is definitely a red flag. Imagine going to a website to buy something and seeing a mixed content warning. Would you feel safe sharing your credit card information with such a website? Of course not!

Sometimes, the error can also mess with your website design and content. For example, if Chrome blocks an important JavaScript script from loading, your website theme won’t be displayed correctly to your website visitors. Or important media such as images and video won’t be shown to users.

How To Check For Mixed Content Errors

Thankfully, the error can be easily fixed. But first, you need to figure out which content causes the error. You can do this using the browser developer tools.

When using Chrome, load the website, then Right Click and select Inspect Element to open the developer tools console (or press Control + Shift + I). Switch over to the Security tab to see all the warning messages. Here you’ll see all the mixed content errors related to the website.

On Firefox, press Control + Shift I to access developer tools and you can see all warning messages in the Console tab.

With this method, you can figure out what kind of links, scripts, or media are loaded over HTTP and fix the links to load them properly over HTTPS.

How To Fix Insecure Content Error

If you have an old-school HTML website, you would have to go through a lot of work to manually fix each and every mixed content error. Luckily, there’s a plugin that let WordPress fix the errors instantly.

Aptly named SSL Insecure Content Fixer plugin is made specifically for fixing mixed content errors. Here’s how it works.

Step 1: Install SSL Insecure Content Fixer

Get started by first installing the plugin on your website.

Login to your WordPress admin dashboard and go to Plugins >> Add New. Then search for the SSL Insecure Content Fixer plugin.

Now click Install and then Activate.

Step 2: Select Which Content To Fix

Once installed, go to Settings >> SSL Insecure Content Fixer plugin tab to enable the plugin. Here you can also choose which content needs fixing.

The plugin offers 5 different configurations for fixing errors:

1. Simple: If you’re a complete beginner, this method is recommended to try before everything else. It performs a simple run that fixes the most common mixed content errors.
2. Content: This option does content and text widget fixing in addition to everything the Simple option does. Try this option if the first option doesn’t fix the errors.
3. Widgets: This option fixes all the errors in the above options and also make sure that errors related to WordPress widgets are fixed as well.
4. Capture: This option will fix all links on a page from header to footer. If the errors are related to scripts, this option will fix it. However, it may affect website performance so do it during off-peak times.
5. Capture All: This option fixes everything. Only use it if all the other options fail.

Now, if you’ve used the browser developer tools to figure out what’s causing the issue, you can use the appropriate configuration to fix the errors.

Step 3: Activate The Plugin

• To activate, simply select the optiont Capture All 

• Then scroll all the way down to select an HTTPS Detection option.
  
• Choose HTTP_X_FORWARDED_PROTO.

Click on the Save Changes button and the plugin will do its magic.