How to Fix the SSL Mixed Content Error

Website encryption is all but mandatory in today’s Internet. If you don’t encrypt your site, browsers will mark it as not secure. You could have the most original content on the web, but without SSL, your visitors will see an off-putting security warning instead.

SSL certificates have become essential to website building, but managing them remains quite a challenge for the less tech-savvy users. The installation of commercial certs may pose a few hurdles for the inexperienced, and no one can blame them.

Almost all servers and email clients have specific instructions on how to manage SSL, and if you’re not familiar with their dashboards or command lines, uploading your certs in the correct sequence may be tricky.

What’s more annoying, are the SSL connection errors that occur after you’ve already installed the certificate. One of the most common SSL issues is the mixed content error. In this article, we’ll examine what is mixed content and how to fix it manually, or with the help of SSL tools. Let’s get started!

What is mixed content?

Mixed content appears on a site when initial HTML is loaded over an encrypted HTTPS connection, but other resources such as videos, images, scripts, stylesheets are loaded over an unencrypted HTTP connection. When both HTTP and HTTPS requests happen on the same page, browsers may block the content or display a security warning to alert users that the page in question contains insecure resources.

Two types of mixed content exist: passive and active.

1. Passive mixed content

Passive mixed content applies to all the resources that don’t interact directly with your page. These could be your images, videos, or audio files. If hackers use man-in-the-middle attacks and intercept your HTTP requests, they can change your images, replace products with offensive content or ads, or swap the save and delete buttons, causing users to do unintended actions.

Even if the attackers don’t alter your content, they still can track your users and their actions using mixed content requests. The attackers can see the pages and products users are visiting based on the insecure resources that browsers load. Here are a few examples of passing mixed content.

2. Active mixed content

Active mixed content is even more dangerous than passive mixed content because it interacts with the page as a whole and gives attackers the freedom to do anything with it. Active mixed content includes stylesheets, scripts, flash resources, and other code that browsers load. If attackers intercept active mixed content, they gain full access and control of your website. Worst case scenario, they will steal users’ login credentials and passwords, or redirect them to a different site altogether. Due to the severity of active mixed content threats, many browsers block it by default to protect the users. But it’s important to keep in mind that your visitors may use older browser versions or browsers that don’t block active mixed content at all.

The guys from PULNO, an SEO audit, and website analysis service, examined over 37 million pages and discovered that over 2 million pages had resources that would fail to load over HTTPS. Of all hosts analyzed, 4,9% had mixed content. Among them, 66.5% had problems with images, and 17.1% had issues with JavaScript elements.

As you can see, the next step after the SSL installation is to ensure all your images and code load over HTTPS. Unfortunately, many webmasters overlook this aspect and end up chasing mixed errors, all while losing visitors to competition. Below we’ll show you the way to fix mixed content as soon as possible so that your website remains visible to everyone.

How to fix mixed content manually?

The first thing you should do if you encounter the Not Secure message in browsers is check for potential mixed content.

Here’s how to do it in Chrome:

1. Right-click anywhere on the page that doesn’t load over HTTPS
2. From the options, select Inspect Element
3. From the available tabs select Console

If you have mixed content on your site, the Console will display the mixed content warnings and show you the location of the HTTP file. Passive mixed content will appear next to a yellow warning, active mixed content next to a red.

If just a few URLs are listed in these errors and warnings, you can fix them manually in three quick steps:

Step 1

Ensure that the URL is available over HTTPS. Open a new tab in your browsers and enter the URL in the address bar by changing http:// to https://.

If the image loads without errors on both HTTP and HTTPS, great! Go to the next step.

Note: If a certificate warning pop-ups, the image is not available securely. This can happen with images hosted on external services. In this scenario, you can either download the image and upload it to your host if you’re legally allowed to do it, or remove it from your site altogether. As a rule of thumb, you should always host your images on your server. This way, you’ll have complete control over them.

Step 2

Change the URL from http:// to https:/, save the source file and redeploy the updated file if necessary.

Step 3

Open the page where you’ve found the mixed content error and double-check that the error no longer appears.

How to fix the mixed content automatically?

Replacing a couple is easy, but what to do if you have dozens or even hundreds of mixed-content links. Is there a way to fix them automatically? Sure it is. Most of the CMS systems should have plugins ready to assist you with his issue. WordPress for instance, isn’t short of options, with Really Simple SSL plugin being a popular choice.

If you’re a more advanced user, you can use this handy script to search your database and mass replace the HTTP URLs. You’ll need FTP access to upload the script. Please be careful as it can break your site if not properly.

Follow these safety instructions when using the script:

1. Rename the script root folder so that hackers won’t find it easily
2. Back up your site and database before using
3. Always double-check the text and do a Dry Run (practice) before a Live Run
4. Delete the script after it did its job

How to detect and prevent mixed content?

After you enable HTTPs, you should check your SSL certificate for errors and vulnerabilities. Plenty of tools can scan your website and detect potential SSL connection errors, including mixed content.

JitBit Scanner is a free tool that crawls your entire website and looks for insecure resources. Please note that you can only scan up to 400 pages with this tool.

An alternative option is Mixed Content Scan, a CLI (command-line interface) Script which crawls and scans HTTPS-enabled websites for mixed content.

Another way to automatically fix mixed content is the upgrade-insecure-requests CSP (content security policy) directive. This directive tells the browser to upgrade insecure URLs before making network requests.

You can enable this behavior by adding the following meta tag snippet of code to the documents HTMLsection.

Please keep in mind that if the HTTP resource is not available over a secure connection, the browsers will fail to upgrade and load it. However, visitors will still be able to access your page.

Final Thoughts

Keeping your site secure is imperative in the current online landscape. With web encryption surpassing the 90% figure across both Google and Firefox services, users will instantly spot and question an insecure website. You certainly don’t want your website to create the wrong impression because of the easy preventable mixed content error. Monitor your SSL certificate regularly, and update all your links as soon as you migrate to HTTPS. A secure website is a safe website for both your visitors and business.