How to Fix Mixed Content Error in WordPress?
Last Updated on 2nd October 2023 by Ajmer Singh
Are you looking to” Fix mixed content error in WordPress website”?
Having a secure and reliable website is more important than ever.
One of the most important steps in ensuring the security and reliability of your website is to use HTTPS (Hypertext Transfer Protocol Secure) throughout your website.
HTTPS is a protocol for securely transmitting data between a user’s browser and a website, and it is becoming increasingly important for website owners to adopt HTTPS to protect their users’ data and improve the trust and confidence of their website.
However, even if you have implemented HTTPS on your website, you may still encounter a common issue called mixed content error.
Mixed content error occurs when a website serves some content over HTTPS and other content over HTTP, which can cause security vulnerabilities and a poor user experience.
In this article, I will discuss how to fix mixed content error in WordPress and how to avoid it in the future.
| My Blogging Picks of 2023 |
|---|
What is a mixed content error?
If you’re a website owner or developer, you may have come across the term “Mixed Content Error” while working with WordPress.
Simply put, mixed content error is an issue that arises when a website loads both secure (HTTPS) and insecure (HTTP) content on the same page.
This can happen when a website is migrated from HTTP to HTTPS, or when individual elements on a page, such as images or scripts, are loaded from insecure sources.
For example, let’s say you have recently installed an SSL certificate on your website to enable HTTPS.
However, you notice that some elements on your pages, such as images or scripts, are still being loaded from HTTP sources.
This can trigger mixed content error, causing the browser to display a warning message that your website is not fully secure.
Mixed content errors can have a negative impact on your website’s security and user experience.
It can lead to issues such as broken functionality, poor performance, and lower search engine rankings.
Mixed Content Examples
1. Image Loaded Over HTTP
Error Message: “Mixed Content: The page at ‘https://example.com’ was loaded over HTTPS, but requested an insecure image ‘http://insecureimage.com/image.jpg’. This content should also be served over HTTPS.”
Description: In this case, an image on a secure webpage is loaded from an insecure source using HTTP.
2. JavaScript File Loaded Over HTTP:
Error Message: “Mixed Content: The page at ‘https://example.com’ was loaded over HTTPS, but requested an insecure script ‘http://insecuresite.com/script.js’. This request has been blocked; the content must be served over HTTPS.”
Description: A JavaScript file is included in a secure webpage but is being loaded from an insecure HTTP source.
3. Stylesheet Loaded Over HTTP:
Error Message: “Mixed Content: The page at ‘https://example.com’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://insecuresite.com/styles.css’. This content should also be served over HTTPS.”
Description: The webpage includes a stylesheet that is loaded over HTTP, which is not secure.
4. Font Loaded Over HTTP:
Error Message: “Mixed Content: The page at ‘https://example.com’ was loaded over HTTPS, but requested an insecure font ‘http://fonts.example.com/font.woff’. This request has been blocked; the content must be served over HTTPS.”
Description: Fonts used on a secure webpage are being loaded from an insecure source via HTTP.
Causes of Mixed Content Errors in WordPress
1. When external resources, such as images or scripts, are loaded from HTTP sources.
For example, if you’re using a plugin that loads an external script from an HTTP source, it can trigger a mixed content error on your website.
To avoid this issue, always ensure that any external resources used on your website are loaded from secure sources with HTTPS.
2. When internal resources, such as images or links, are incorrectly specified with HTTP URLs instead of HTTPS URLs.
This can happen if you have manually added links or images to your website without updating them to use HTTPS.
To avoid this issue, always ensure that all links and images on your website are using HTTPS URLs.
3. Some plugins or themes may hardcode HTTP URLs within their code, causing mixed content errors on your website.
To fix this, you’ll need to modify the code of these plugins or themes to use HTTPS URLs instead.
4. If your SSL certificate is not properly configured or if there are issues with your server configuration, it can also lead to mixed content errors.
In such cases, you’ll need to work with your hosting provider to ensure that your SSL certificate is installed and configured correctly.
Types of 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)
Like, 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.
Identifying Mixed Content Error
1. Use your browser’s developer tools to identify the insecure content on your website.
To do this, you can open your website in your browser, right-click anywhere on the page, and select “Inspect” or “Inspect Element.”
This will open the browser’s developer tools, where you can view the console tab for any mixed content errors.
2. Use online tools such as the Why No Padlock or the SSL Checker.
These tools will scan your website and identify any insecure content that may be causing mixed content errors.
How to Fix Mixed Content Error – Manually?
Updating URLs to HTTPS:
The first step in fixing mixed content errors is to update all URLs on your website to use HTTPS instead of HTTP.
To do this, you can go to your WordPress dashboard and navigate to “Settings” > “General,” and update the WordPress Address (URL) and Site Address (URL) fields to use HTTPS.
You should also update any links or images on your website to use HTTPS.
This can be done manually, by editing each link or image on your website, or by using a plugin such as the Velvet Blues Update URLs plugin, which can automatically update all links and images to use HTTPS.
Modifying URLs in the Database:
If you have a large website with many links and images, manually updating each one can be a time-consuming process.
In such cases, you can modify the URLs in the database directly.
To do this, you can use a plugin such as the Better Search Replace plugin, which allows you to search and replace HTTP URLs with HTTPS URLs in your database.
Fixing Mixed Content Error in Themes or Plugins:
If you have identified that the mixed content error is caused by a specific theme or plugin, you’ll need to modify the code of that theme or plugin to use HTTPS URLs instead of HTTP URLs.
This can be done by editing the code directly. (Not recommended for beginners)
How to Fix Mixed Content Error – Using Plugin?
One of the most popular plugins for fixing mixed content errors is the Really Simple SSL plugin.
This plugin automatically detects any insecure content on your website and fixes it by updating all URLs to use HTTPS instead of HTTP.
The plugin also sets up a redirect from HTTP to HTTPS, ensuring that your website is fully secure and reliable for your users.
If you prefer a more comprehensive solution, you can use a plugin such as the SSL Insecure Content Fixer plugin.
This plugin not only fixes mixed content errors but also provides several options for configuring SSL and HTTPS on your website, such as enabling HSTS and forcing HTTPS on all pages.
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?
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.
Wrapping Up: Mixed Content Errors
Ensuring that your website is secure with HTTPS is important for maintaining the security and reliability of your website.
Mixed content error can be a frustrating issue that can lead to security vulnerabilities and a poor user experience.
However, by following the best practices outlined in this article, you can fix mixed content error and ensure that your website is fully secure and reliable for your users.
People also search for: