How To Fix Mixed Content Error In WordPress! (Solved)
Last Updated on 5th March 2023 by Ajmer Singh
This article contains a detailed guide on how to fix mixed content errors in WordPress.
Have you ever run across a mixed content issue on your site? Oftentimes, it is a result of migrating from HTTP to HTTPS.
During the process of migration, some files were carried over.
Hence, the end product is a mixed content error.
Wondering what the mixed content error is? I will explain this in the next paragraph.
Let’s proceed.
What is a mixed content error?
Mixed content is a term used by web browsers to describe pages viewed over HTTPS that include insecure assets, such as images or scripts loaded from HTTP locations.
If your website uses HTTPS then it will have an SSL certificate which basically secures the connection between the user’s browser and your server.
The problem is that not all web servers are properly configured for hosting websites with SSL certificates, so sometimes people see this kind of error message in their browser:
That’s why I recommend choosing fully performance-based hosting like Cloudways (for best performance) or Bluehost (for low-budget users).
Mixed Content Example:
The page at ‘https://domain.com/page-1’ was loaded over HTTPS, but requested an insecure script ‘http://domain2.com/script2.js’.
This request has been blocked; the content must be served over HTTPS.
Mixed content example in Google Chrome
In case you see this warning in your browser – it means that the page is trying to load javascript code over an http (insecure) connection.
First, let’s understand what causes mixed content:
Some web servers do not support hosting multiple websites with SSL certificates and also scripts and images from external sources or other websites.
Secure way to serve shared files: /home/site1/subdir1/script2.js –> https://domain.com/subdir1/script2.js
Unsecured way to serve shared files: /home/site2_subdir4_sharedimage3.png –> http://third-partydomain-or-IP/sharedimage3.png
As you can see – the first way is clean and secure, while the second one includes all kinds of variables that may create security flaws on your site.
In case you have a WordPress website then there are two possible solutions for mixed content:
1) You manage your web hosting account and configure it to support secure websites.
In this case, contact your hosting provider and ask them to enable an SSL certificate on your web server.
Also, they should ensure that scripts from external sources will be requested over the https:// connection as well.
2) If you do not have control of the hardware or hosting plan used by your web host,
then you have to use some other way how to fix mixed content errors in WordPress.
For example, by using some plugin that forces all your content to be served by https://
Really simple SSL or WP Force SSL is one of such plugins and it will redirect all http requests over SSL as well as force scripts and styles to use https connections – basically mitigating mixed content error in WordPress.
We can conclude that the main reason for mixed content is insecure servers that cannot host websites properly.
So do not forget about contacting your hosting provider and asking them to fix the issue.
What does the mixed content error mean?
Mixed content error is said to happen if your website loads over a secured HTTPS connection,
but other content such as the image, and scripts are loaded over an insecure HTTP connection.
If a site displays a mixed content error, it simply means that some of the content on that site is not secured and is susceptible to malware attacks.
However, there are two types of mixed content, and I will be explaining them below;
Types of mixed content error!
We have two types of mixed content errors namely:
- Passive mixed content error
- Active mixed content error
1. Passive mixed content error
Mixed content error is said to be passive when the HTTP content of the site is restricted and cannot react with the rest of the page. (Images and videos)
For instance, an attacker can have access to only the videos or image content on the site,
but is restricted and can’t have access to alter any change to the rest of the page.
Oftentimes, the passive mixed content error is not considered a threat to a site, but in actual fact, it is.
An attacker can decide to replace the image or video content on your site with nudes and indecent content,
or with ads that redirect users to a different site.
This defaces your site to users, hence the need to act fast.
2. Active mixed content error
A mixed content error is said to be active when the unencrypted HTTP content is not restricted, It can interact with and alter the entire page.
The active mixed content poses more threat to a site’s page than the passive mixed content.
Once compromised, an attacker has access to the entire webpage and can alter or make changes to the entire page.
The attacker has access to sensitive information about your users and this might include their login details, their bank information, etc.
He can decide to redirect users to an attacker’s site and can also make use of the sensitive information of users against them.
Most browser often indicates that a site isn’t secured and contains mixed content, However, some browsers block the active mixed content.
However, each rule varies with different browsers.
Causes of mixed content error!
The mixed content error appears often times after the migration of a WordPress site from HTTP to HTTPS.
Some of the content refuses to be loaded over the HTTPS, hence mixed content warning occurs.
Below are some of the causes of mixed content warnings;
- Images that have hardcoded URLs (Images that run over HTTP)
- Links attached to the HTTP version of external scripts
- Embedded video script that is loaded on HTTP instead of HTTPS
Where to check mixed or insecure content?
To know if your site contains the mixed content error
-Simply right-click or Ctrl+SHIFT+I on your web page
-Choose the ‘inspect‘ option from the series of options displayed
-A page will pop open on the right side of the page.
-Click on the console tab. If your site has any mixed content error, it will be displayed here.
How to fix mixed content errors in WordPress?
The first approach to getting the mixed content error fixed in WordPress is to install and activate the SSL Insecure Content Fixer plugin.
SSL Insecure Content Fixer Plugin Settings
Upon activation, navigate to the settings page of the SSL insecure content fixer plugin to get it configured.
The plugin provides five levels for fixing the mixed content error, I will give an explanation of each one of them.
- Simple
- Content
- Widgets
- Capture
- Capture all
1. Simple
This is the most recommended and fastest method of fixing mixed content errors in WordPress for beginners.
It fixes mixed content errors for scripts, style sheets, and WordPress media automatically.
2. Content
If after trying out the simple method, the mixed content error on your site isn’t fixed, try out this method.
It uses all the features found in the simple method, but it also has an additional feature of fixing WordPress content and text widgets.
3. Widgets
These contain all the features in the content method.
It has an additional feature of fixing resources loaded in the WordPress widgets of your site
4. Capture
The capture method, however, captures every page on your website including the header and footer of your page.
It also replaces all URLs with HTTPS.
The disadvantage of this method is that it is quite slow and it affects the performance of your site.
5. Capture all
After you have tried out all the methods listed above, and you still don’t get your expected result, try this method.
The capture-all method fixes everything on your site.
However, the downside of this method is that it has a negative impact on the performance of your site.
After you have successfully activated and configured the SSL insecure content fixer plugin, it’s time to verify that the issue is solved.
How to verify that the mixed content issue is solved?
In this paragraph, I will be illustrating how you can verify that the mixed content error issue on your site has been solved.
To verify, simply use the whynopadlock online tool to check.
This tool consequently checks your website and informs you about the success of the process.
All you need to do is simply visit the whynopadlock website on your browser. Enter the URL of your site.
Click on the test page option displayed.
You will receive a response similar to the image below if the mixed content issue has been resolved on your site.
Another method of verifying that the mixed content error issue has been fixed is by clicking around a few pages and checking the browser status indicator in the search bar.
A secured padlock indicates that the error has been fixed
If after clicking a few pages, the mixed content error isn’t fixed, you will have to revisit the plugin and restart the configuration process.
FAQS about Mixed Content Errors!
Q: What is a mixed content error?
A: A mixed content error occurs when a website is loaded over a secure HTTPS connection, but some of the resources on the page (such as images, scripts, or stylesheets) are loaded over an insecure HTTP connection.
This can cause warnings or errors to appear in the browser, and can potentially make the website less secure.
Q: How can I check if my WordPress site has a mixed content error?
You can check if your WordPress site has a mixed content error by opening the site in a web browser and looking for a warning or error message in the browser’s address bar or developer console.
Some browsers will display a “Not Secure” warning, while others may show a padlock icon with a warning symbol.
Q: Are there other ways to handle mixed content?
A: You can set up HTTPS on an alternate port or subdomain so that you are not serving over HTTP at all.
This solution requires SSL certificates and may require a separate IP address.
Q: I have a secure SSL certificate installed on my webserver and my page still shows a mixed content error. What should I do?
A: You can check your website with WhyNoPadlock to determine if you have a mixed content issue.
If the checklist results in one or more errors, then you will need to resolve them before your site is secure.
A migration from HTTP to HTTPS needs to be handled carefully, and it is recommended that developers of websites use a professional migration service.
We recommend using Cloudways as a web hosting provider with their free professional migration service.
Q: Can a plugin help me fix a mixed content error in WordPress?
A: Yes, there are several plugins available for WordPress that can help you fix mixed content errors like the one I mentioned above.
These plugins can automatically update links and references to resources in your content and theme files, and can also detect and fix mixed content errors caused by third-party plugins or themes.
Conclusion
Webmasters and site owners need to be aware of mixed content errors, as they can cause a number of problems with your website.
If you’ve noticed that some parts of your sites are not loading properly or you have security warnings about certain scripts on the page,
then it is possible that there may be an issue with mixed content.
We hope we were able to answer any questions and provide helpful information in regard to fixing your mixed content error issue.