How to Quickly Find & Fix Mixed Content Issues (SSL/HTTPS)

Originally published: August 23, 2023 by Rianna MacLeod

With the web’s increased emphasis on security, all sites should operate on HTTPS. Installing an SSL certificate allows you to make that transition with your website. But it can also have an unintended consequence for sites that have been operating on HTTP previously: Mixed content issues and warnings.

Most site owners first encounter mixed content issues right after migrating to HTTPS, not before. The certificate is in place, you expect to see the padlock in the browser, but instead you get a warning, missing images, or a broken layout. That is why checking for mixed content should be your first troubleshooting step after any HTTPS migration, not just an item on your pre-launch checklist.

This guide breaks down why mixed content errors happen, what causes them, and how to fix them whether the problem lives in your template files, your database, or inside WordPress itself.

Contents:

• What is mixed content on HTTPS sites?
• Why does mixed content matter?
• What causes mixed content warnings?
• How do I unblock mixed content?
• How to fix mixed content in WordPress
• Mixed content issues in generic files
• Mixed content issues in your database
• Support for SSL and HTTPs
• Mixed content FAQs

What is mixed content on HTTPS sites?

Mixed content warnings happen when a site’s content loads through a mix of HTTP and HTTPS connections.

This typically takes the form of the initial HTML loading via HTTPS, and then various content resources loading through HTTP.

When a browser detects mixed content, it will alert the user and potentially block the content. Here’s an example of what that might look like:

Why does mixed content matter?

Quite plainly, mixed content presents a security vulnerability. Since the communication on the HTTP connections is insecure, unencrypted content could be exposed in a man-in-the-middle attack. This could potentially allow attackers to replace content on the website, eavesdrop on users, or even take control of the site in extreme cases.

Browsers now take a hard line on mixed content. They block insecure assets outright, and in some cases, they block access to the entire site until the issue is fixed.

Scripts, iframes, and stylesheets likely get outright blocked. With audio and video, a browser may try to load the asset via HTTPS first – and then block the content if it can’t. Images might still load, but deliver a warning.

In any case, your site visitors won’t experience your site as intended – or maybe not experience your site at all if a dependency like .css or .js file is blocked.

There is another cost that is easy to miss. Mixed content is also a trust and visibility problem. Search engines see your site much like a browser does, so blocked scripts and stylesheets can change how your pages are indexed. A warning next to your padlock erodes trust with every visitor who notices it.

So, if you encounter these warnings on your site, addressing the issue should be high on your priority list.

What causes mixed content warnings?

We most frequently see mixed content warnings on sites with heavy use of site assets – especially external ones – like images, media files, JavaScript, and even CSS.

Two primary causes for these warnings include:

• URLs to files are hardcoded in the site
• Default configurations load the assets over HTTP

So, when a site gets updated to HTTPS those paths still link to the HTTP version.

As far as how that looks in a site’s code: This can happen when the absolute URL path is set, instead of relative paths for images, CSS, or JavaScript files.

Absolute path:

<img src="http://mydomain.com/myimage.png">

Relative path:

<img src="/myimage.png">

How do I unblock mixed content?

Most browsers let users unblock mixed content, and they provide instructions for doing so. But given the security risks, we do not recommend this approach. Even if you could walk your users through the process, you would be exposing them to unnecessary risk.

It is far easier to fix mixed content at the source than to try to work around it. If you see warnings right after moving to HTTPS, the cause is almost always leftover HTTP references, which you can clear out using the database search and replace steps below.

How to fix mixed content with a WordPress Plugin

Let’s take a look at a tool you can use to find and fix mixed content issues in WordPress.

Use the really-simple-ssl plugin

If you’re using the WordPress CMS, you are in luck because you can make use of the really-simple-ssl plugin. It automatically fixes and redirects HTTP to HTTPS on your behalf.

There’s a premium version as well, which will report on any issues that couldn’t be resolved automatically, fix back-end issues, add security headers, and more.

After installation and activation, if you don’t yet have SSL certificates active on your site then the tool will show you the following screen.

From this dialog, click on Install SSL to proceed to check your system status and follow the prompts.

If you have an active certificate already, you’ll see the following dialog in the plugin instead.

Click Activate SSL to proceed.

Find and fix mixed content issues in generic files

If your site’s CMS template and/or files are in HTML or PHP files, you can find and fix mixed content issues with the following steps:

1. Conduct a mass search

If you know how to use terminal commands, a grep command can help you identify every file that references a http://. Be sure to be in the root of your website (i.e., /public-html/, /www/html/, etc..):

$ grep -r "http://yourdomain.com/"

If you’re looking for a less technical way to assess your site, run a scan with a tool like WebPageTest. In the results, look for content elements that do not show up with a padlock next to them (like number 2 in this screenshot).

Our own SiteCheck tool will also report on mixed content. You’ll find these noted under TLS Recommendations, as seen below.

2. Replace your content

You’ll then change all references to http:// to include https://.

Find and fix mixed content issues in your database

Depending on the platform you choose, your website technology might dynamically render the asset locations in the database. So you’ll want to go directly to the database and update all protocol references.

Here are some quick tips to find and fix mixed content in your database:

1. Get a database search and replace tool to identify and replace mixed content

There is a great tool called Database Search and Replace, built by Interconnected/IT. As the name implies, it allows you to do a quick search of your database, replacing values as needed. Of course, be careful.

2. Configure database search and replace

Download the Database Search and Replace tool at the root of your website:

[root@server [domain directory]# wget https://github.com/interconnectit/Search-Replace-DB/archive/master.zip 
[root@server [domain directory]# unzip master.zip 
[root@server [domain directory]# cd Search-Replace-DB-master/

Once you have installed the tool, you can access it directly by going to http://yourdomain.com/Search-Replace-DB-master/index.php

When you load the tool, it will pull the values from your /wp-config.php. If for whatever reason it doesn’t, here is how you map the values:

Name = define('DB_NAME', 
User = define('DB_USER', 
Password = define('DB_PASSWORD', 
Host = define('DB_HOST', 
Port = Default 3306

3. Run search and replace

When running “search and replace” be mindful of all the things you can inadvertently break. To account for this, I recommend being as specific as possible. For instance, in the image above, you can see I search for http://yourdomain.com and replace with https://yourdomain.com. This is an effort to avoid breaking any other http references that might cause unexpected issues.

Even then, before you run the tool, please be sure to have a database backup.

The tool also helps by giving you two very distinct options: Dry Run and Live Run. I recommend running a Dry Run first, checking the output, then running a Live Run if everything works well.

4. Identify and handle HTTPS traffic

Next you want to make sure that your server/website is ready to handle HTTPS traffic. Of course, the first step is to install your SSL certificate. If you’ve done that, you can then take the next step using really-simple-ssl or directly through your /wp-config.php file.

/* Handle HTTPS Protocol */ 
if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') 
$_SERVER['HTTPS']='on';

This forces your server to accept all HTTPS requests and enables HTTPS on your site. There are many deployment types, so for more options, see the administration over SSL documentation on WordPress.org.

When done, clear any caches you might have enabled and visit your website. You should now get the secure padlock in the browser without any mixed content warnings:

5. Remove the database search and replace tool

Whatever you do, do not forget to remove the DS&R tool from your root once you have found and fixed all your mixed content issues. Leaving it on your server could introduce itself as a potential attack vector later on.

Support for HTTPS

Mixed content isn’t a certificate problem; it’s a leftover-reference problem. Work through your template files, then your database, then confirm the padlock in a fresh browser session with your caches cleared. After that, the habit worth keeping is checking new assets as you add them, so old HTTP paths don’t creep back in later.

If you’re an existing Sucuri customer and are having issues getting things configured, please connect with our team by submitting a ticket. And if you are deploying LetsEncrypt locally, refer to our simple guide on how to install SSL to get started!

Frequently asked questions

How do I find mixed content on my site?

Start with the steps under “Conduct a mass search”: run grep -r “http://yourdomain.com/” from your web root to list every file holding a hardcoded HTTP reference. Want something less technical? Scan the page with WebPageTest, or use our SiteCheck tool, which reports mixed content under TLS Recommendations.

Why is mixed content a security issue?

Because HTTP requests aren’t encrypted, as “Why does mixed content matter?” explains. Anyone sitting between your visitor and your server can read or alter those unprotected assets in a man-in-the-middle attack. That’s why browsers block scripts, iframes, and stylesheets outright rather than load them alongside your secure page.

Does mixed content affect SEO?

Not through a penalty we can point to, but the side effects matter. Blocked stylesheets and scripts change how pages render for visitors and crawlers alike, and a warning beside your padlock chips away at trust. Rewriting the HTTP references in your files and database clears both problems at once.

Can I unblock mixed content warnings?

Most browsers let you, and they document how — but as “How do I unblock mixed content?” explains, we don’t recommend it. You’d be asking every visitor to accept unencrypted assets. Working through the file and database search-and-replace steps is less effort than teaching people to bypass a warning.