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.
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:
- WordPress White Screen of Death Quick Fix
- WordPress Stuck in Maintenance Mode? Here is What to Do
- How to Leverage Browser Caching in WordPress? Steps to Follow
