Mixed Content Warning in WordPress: Quick Fixes

If you’ve just encountered a mixed content warning while using WordPress, you’re probably here to learn how to fix it. Luckily, a mixed content warning can often be fixed in a jiffy. In general, the warning appears as a result of incorrect HTTPS or SSL settings. This article created by our team at wpDataTables, will answer any questions you may have regarding mixed content and show you a few easy ways to fix it.

Having your website properly secured with HTTPS is a must for most websites, especially eCommerce sites and any other site that lets users enter personal details or credentials. People will lose trust in your website if they see a warning pop up that your website is not secured. Not only that, but HTTPS is also a great way to earn trust from the search engines, which will improve your SEO.

Defining “mixed content warning”

Users encounter mixed content warnings whenever the content on their site is not secured entirely. For instance, if only some of the content that you publish on your site is encrypted, users will be greeted with a mixed content warning. In short, your website needs to have an SSL certificate that covers absolutely all of the content to avoid this warning.

When you add an SSL certificate to your site, the connection between the user and the server takes place through encrypted HTTPS (Hypertext Transfer Protocol Secure) instead of unencrypted HTTP. Once your SSL certificate is correctly configured and the connection is made with HTTPS,there’s a small change in how your URL looks in a browser when you add all layers of security to a site. That is, a green padlock icon will be present to the left of the URL in the browser’s search bar. That tiny padlock has become an international sign of online security, and not having it will impact your website negatively.

What types of mixed content exist?

Insecure content can be separated into two different categories. Both types of mixed content are as damaging to your users’ trust, soit’s best to know a few things about each. Mixed content can be classified as passive and active, as presented below.

Passive

Passive mixed content refers to the published content that doesn’t interact dynamically with other elements on the website. For instance, unsecured images, videos, or audio content can be called passive mixed content because the resources behind them are static and fixed. Attackers will be limited in what chaos they can cause if they target passive mixed content.

Active

Active mixed content, on the other hand, can interact with other elements on the page. For instance, stylesheets, Flash resources, or scripts allow attackers to mess with your website much easier because the limitations mentioned in the case of passive mixed content no longer apply. If this content is unsecured, attackers can snoop on the contents and possibly steal sensitive information as it flows between the user and the server.

What causes this warning to appear?

When making a change on a website, you need to make sure that the changes fully reflect throughout the site. This is also the case when adding HTTPS to a website that was published a while ago. When changing an HTTP website to an HTTPS one, some of the links included in the previous version of your site will still remain HTTP. This is why you might not be able to get the green padlock next to your URL right away.

The main causes behind the mixed content warning include:

Hardcoding HTTP links during the theme/plugin development process. The HTTP links that are hardcoded in CSS and JavaScript files will result in getting a mixed content warning. The only way to fix it would be by manually changing the hardcoded HTTP links into HTTPS links.

Hot-linked images. When an image is called from an external resource, the only way to avoid a mixed content warning would be to use a URL that has HTTPS included. If the image URL begins with http://instead of https:// itwill result in a mixed content warning.
Using CSS and JavaScript files from external domains. This is similar to hot-linking resources, as you will call files from other places on the internet. As long as you use a link with HTTPS, no warning should appear. This is especially relevant to resources that come from a CDN.

Different fixes for the Mixed Content Warning

Fix 1 – Console

If you’ve paid attention to all the precautions and yet you still get a mixed content warning, it’s time to move on to fixing it. First of all, determine which piece of content is responsible for the issue. To do that, carefully review the JavaScript console using your browser’s built-in Developer Tools. When some content loads and triggers a warning, the console will let you know, as shown above. After finding the content that is responsible for the warning, you can take note of it and fix the problems manually by taking the necessary actions to secure the content.

Fix 2 – HTTPS Rewrites

For those who use Cloudflare or a similar CDN, the easiest method to fix mixed content warnings is to make all the website’s resources available via HTTPS using the Automatic HTTPS Rewrites. You can turn this feature on in Cloudflare’s dashboard in the Crypto section. There you will find a switch that turns the feature on and off.

Fix 3 – Plugins

Instead of bothering to do everything by yourself, there are a few plugins that can help you find the offending content and fix the issue automatically. One of the most popular is Why No Padlock. As the name suggests, this plugin will help any website owner that can’t get the green padlock to show up next to their URL.

Another similar plugin is SSL Insecure Content Fixer. For those who get content warnings often, this will be the best solution and it can be found directly in the WordPress plugin directory.

If you want to search for the content yourself and replace it with the appropriate secured version, check out Better Search Replace,which can help you find hard-coded HTTP links in your database and replace them with HTTPS links.

Fix 4 – Post processing (WPEngine users)

If you host your site with WP Engine and the resources that cause trouble are located directly on your domain, you will have to run an HTML post-processing task. Post-processing refers to changing the domain even after the page is rendered by PHP and published. This option is only available for WP Engine users and you can find it in the footer section of the WPEngine tab in your Admin dashboard.

Other methods you can try

If the mixed content warning still persists, you can try these additional fixes:

Delete your website cache and see if the problem resolves by itself.
Use the Incognito / Private Browsing mode on a browser and see if the problem persists. If not, delete your browser cache.
Review the theme/plugin settings and see if everything looks as it should. Look into WordPress files for hardcoded HTTP links – e.g. in wp-config.php.

FAQ on Mixed Content

What’s this whole “mixed content” thing in WordPress about?

Man, you’d think with all the tech jargon out there, it couldn’t get more confusing, right? But here’s the deal: mixed content happens when a webpage loads over HTTPS but tries to fetch some resources (like images or scripts) over HTTP.

It’s like serving a healthy salad but with a side of deep-fried onion rings. Not the best combo for web security.

Why do I get those browser warnings when visiting my site?

Ah, those pesky browser warnings! They’re like the crossing guards of the web. When your site has mixed content, browsers see the insecure HTTP stuff and go, “Hey! This might not be safe!” That’s why you see those warnings.

Your browser’s just looking out for you, making sure you don’t accidentally munch on something bad in your internet salad.

How can I spot these mixed content issues in WordPress?

Good question! There are tools and plugins, like Really Simple SSL, that can help you find them. Or, if you’re a DIY person, you can use browser tools. Open a page on your site, right-click, choose “Inspect”, and look for any resources loading over HTTP in a HTTPS page.

Kind of like a treasure hunt, but instead of gold, you’re hunting for HTTP links in your HTTPS oasis.

How does mixed content impact my WordPress website security?

Imagine if you left your back door open while the front door was locked. That’s what mixed content does. It leaves a weak point on your website.

Attackers could exploit this and, y’know, cause all kinds of havoc. They could mess with the HTTP content in HTTPS pages, making your site vulnerable. Always best to keep all doors locked!

Is there a way to fix these mixed content issues?

Absolutely! First, ensure your website is entirely on HTTPS. This might involve getting an SSL Certificate.

Then, check out WordPress plugins that can help with the switch. Also, manually update any links, images, or scripts loading over HTTP to HTTPS. Bit of legwork, but think of it as a gym session for your website.

Why did mixed content issues even start on my site?

It often happens during migrations. Maybe you moved your website from HTTP to HTTPS (which is great, by the way!).

But sometimes, bits and pieces like images or scripts don’t get the memo. They stay on HTTP. Like a stubborn kid refusing to switch seats at a party. Blame it on site migration to SSL or outdated plugins.

What’s the deal with SSL and how’s it connected?

SSL, or Secure Sockets Layer, is this magic thing that encrypts data between a web server and a browser.

When you have an SSL, it means you’re serving your site over HTTPS. If you mix in non-SSL content (HTTP), that’s when you get the mixed content drama. Think of SSL as the superhero cape for your website.

Will mixed content issues affect my site’s SEO?

Here’s the not-so-fun part: Yep, it can. Search engines love secure sites. If your site has mixed content, it might be seen as less trustworthy.

It’s like going to a bakery and finding out they use expired ingredients. Google, and other search engines, might rank you lower because of the mixed content warning. So, yeah, best to get it sorted!

Are there plugins to resolve this in WordPress?

You bet! WordPress, being the cool platform it is, has got your back. Plugins like Really Simple SSL can help you sort these issues out. A few clicks here and there, and bam, you’re on your way to a more secure site. It’s like having a trusty sidekick in your web journey!

Can’t I just ignore this? What’s the worst that can happen?

Oh boy, diving into the deep end, huh? Well, besides the obvious security risks, think about your visitors. They see those browser warnings and might just hit the back button. Nobody wants to stay on a site that might be compromised. Ignoring mixed content is like ignoring a leaking tap. It might seem minor, but over time, it can cause a big mess.

Summary

Consider all of the tips and tricks presented here, and you should be able to prevent and solve the mixed content warning from ever appearing. Remember that the issue is easily solvable and what causes it is the inconsistency between secured and non-secured content. Sometimes, a simple search and replace (on either your database or website files) will do the job, regardless of the approach you select.

If you enjoyed reading this article about Mixed Content Warning in WordPress, you should read these as well: