Instructions to fix mixed content error in WordPress
If you encounter mixed content warning on the page WordPress yours, don't ignore it. This warning indicates that something is wrong with the website configuration, even after you have SSL settings successful. This error can lead to more serious problems if it is not resolved. But luckily, you can fix these mixed content warnings pretty easily.
In this article, we'll learn what a mixed content warning is, why it's important, and how to fix it easily.
What is mixed content?
Error mixed content is a browser error warning that this site cannot provide a perfectly secure connection. The reason may be that the main path of the website runs on HTTPS, but some part of the website (images, videos, links, etc.) is only using an HTTP connection instead of HTTPS.
In order for HTTPS to work and show a secure lock, every element of the website needs to be able to run under the HTTPS standard.
Depending on your browser, you'll see different mixed content warnings.
The sign of mixed content error on Firefox is the yellow triangle icon, with the error code: Parts of this page are not secured (such as images) as shown below:
The sign of mixed content error on Chrome is an i warning symbol with an error code: Your connection to this site is not fully secure as shown below:
In short, this warning is an announcement that this site cannot provide a secure connection. In most cases, the warning appears after move website from HTTP to HTTPS.
You move your website from HTTP to HTTPS in the hope of creating a more secure connection.
But if not done right, WordPress will not load all resources over HTTPS connection. As a result, the browser gives a mixed content warning.
Mixed content error cases
Usually there are 3 cases where mixed content warning appears:
- When developers use HTTP links to code themes or plugins – they use absolute paths instead of relative paths.
- When you link to a resource without HTTPS enabled.
- When you call resources that use the HTTP protocol.
But why do you need to use HTTPS over HTTP? If you do not know, it is used to increase security.
HTTPS stands for Hyper Text Transfer Protocol Secure, which means all data transferred will be encrypted for security. With this encryption, anyone without permission to the data cannot read the data. All sensitive information such as credit card information will be protected.
If your WordPress site is SSL protected – using HTTPS – you will see a secure lock in the address bar. You can click to see the details of the SSL certificate.
Why shouldn't mixed content warnings be ignored?
As long as the mixed content error persists, your site may not be as secure. That's why you have to fix it as soon as possible.
Security
Today, security is not an option.
In fact, it is one of the top priorities when managing WordPress sites. If you use a secure HTTPS connection, you reduce the risk of impacting your visitors.
An unsecured connection may discourage customers from performing financial transactions on the site. So, if you run an online business, make sure your customers don't encounter this warning before making a purchase.
Factors affecting SEO
SEO is an important factor for every website to attract organic visitors.
Google has officially confirmed HTTPS as the main SERP ranking factor. Mixed content can affect website loading speed. Remember speed is an SEO factor. Therefore, ignoring the mixed content warning will hinder your SEO efforts.
Reliability
Unsafe content displayed in the browser can damage your company's reputation. Alerts can create a bad user experience and hinder you from building trust with your customers.
So if you have great, informative content but have security issues, visitors will leave as quickly as they arrive.
Types of Mixed Content
There are two types of mixed content:
- Actively Mixed Content – called mixed scripting. This mixed content loads the web page over an HTTPS connection, but the script loads over an HTTP connection. You should pay attention to this type of mixed content the most. It attracts attackers because they can intercept the connection and take advantage of it to steal data or inject malware.
- Passive Mixed Content – occurs if audio, video or image files are loaded over HTTP instead of HTTPS.
Identify HTTP Assets loaded on HTTPS pages
Before getting into troubleshooting, you need to identify the problem.
The first thing you need to do is make sure you have an SSL certificate for your website. If not, you can buy SSL from Hostinger with preferential price.
Now let's continue to identify these https mixed content errors using 3 different methods: by plugin, online test site and inspect element.
Using Plugins
You can install a plugin to determine the HTTP element before performing a repair.
WordPress HTTPS (SSL) is one of the best plugin to handle this task. After installing and activating the plugin, you can access the HTTPS settings page in the dashboard. There you will have options to:
- Enter all secure URLs into SSL Host
- Enable SSL
- Securing posts and pages by individual
Use the web to check online
You can also use WhyNoPadLock. This online test site has helped more than 5 million websites manage security.
You need to enter the URL and start testing the page. If there's a problem, you'll see an output similar to this.
But if you see a green tick, the site is well configured.
Also you can try HTTPS checker. This good tool has an online and desktop version. It will help you check any active or passive mixed content, unsafe redirects and links, and the status of your site's SSL certificate.
Using Inspect Element
The third way is our advice.
If you use Google Chrome as your main browser, you can use the element inspector by right clicking on the page then clicking Inspect -> Console.
Basically, you don't need to manually find https errors, because this tool will provide a list of errors that need to be fixed. But, remember with this approach, you will have to check the problem page on every page.
If you want to check multiple issues, you can use Ahrefs audit tool. This tool will help you check links and resources that are causing problems. In fact, this tool can examine the site more closely than just identifying mixed content.
How to fix Mixed Content error
After identifying the problem, installing SSL, but on the browser, an error is displayed, the security lock icon is not displayed. Now it's time to fix mixed content on WordPress website.
With the problems identified, the easiest way is to change from HTTP to HTTPS. To do this, you can go to your WordPress dashboard, Settings -> General. Then change everything WordPress Address (URL) and Site Address (URL).
But this will be time consuming if you have to manually troubleshoot the whole site.
You can install SSL Insecure Content Fixer for easy problem identification.
After installation and activation, go to the page Settings. You can choose one of five remediation levels:
- Simple – this is the default setting. This way the plugin will edit the scripts and stylesheets files registered with images or other media. Although simple, it cannot fix every image or iframes has been hard coded into HTML.
- Nội dung – this level will do simple bug fixes plus clean up frames and media embedded in content and widgets.
- Widgets – this option adds functionality to clean up all widgets, not just the text on the widget.
- Capture – with this level you will get complete fixes including scripts, stylesheets and embedded media on your WordPress site.
- Capture All – this level is the top level that also includes the AJAX request. Although this level is powerful, you must use it with care as it can cause serious conflicts.
Our advice is to start with the default option and gradually move on to the next levels if you want to do more advanced debugging.
Epilogue
Ignoring the mixed content warning is not a good idea. Because it shows a warning on every visitor's browser, and indeed the connection is still not completely secure. It will weaken the site security link, so we strongly encourage you to act immediately.
We have seen that fixing the mixed content warning in WordPress is not as difficult as it seems. You are free to use it however you like. But, sometimes, you need to do more advanced troubleshooting in rare cases.
Good luck with your fix and can keep your WordPress site safe! If there's a better way to fix mixed content, or you're having trouble fixing it, please leave a comment.
Hai G. is an expert in managing and operating website services. He has many years of experience in VPS, Hosting, technical SEO, CMS. Especially love WordPress and have been using it for over 5 years now. His hobbies are reading, blogging, traveling and mentoring young people to start a business.
