How to Fix the Mixed Content Issue in WordPress

So you’ve installed your SSL certificate on your WordPress site, but the browser is saying it’s still not secure due to mixed content? Well, that kinda sucks, but don’t worry. In this article, you’ll learn how to fix the mixed content issue in WordPress.

Mixed content, in the context of SSL, refers to a situation where a secure webpage (loaded over HTTPS) includes both secure (HTTPS) and non-secure (HTTP) resources. These resources can include images, stylesheets, scripts, fonts, and other media files that are loaded on a web page. When a webpage contains mixed content, it poses a security risk because the non-secure resources can be intercepted or altered by malicious entities, and thusly, compromising the overall security of the page.

The risks associated with mixed content are:

• Data Vulnerability
• Reduced SSL Effectiveness
• Insecure User Experience

Data Vulnerability

The non-secure resources can be intercepted or altered by hackers or bots, possibly resulting in the exposure of sensitive information, such as login credentials or personal data.

Reduced SSL Effectiveness

Mixed content weakens the overall security provided by SSL, as it breaks the confidence users have in the secure connection.

Insecure User Experience

The warning displayed by the browser can give off a negative user experience, creating distrust and credibility in the website.

To understand the significance of mixed content, it is essential to grasp how SSL works.

So, mixed content has to do with SSL, also known as Secure Sockets Layer. The SSL protocol provides a secure and encrypted connection between the user's browser and the Web server. It ensures confidentiality and protection from potential threats of data that has been shared by both parties.

SSL is a security certificate which authenticates the website's HTTPS connection with its visitors. This encryption ensures that the user's browser data, such as logon credentials, credit card numbers and personal information are sent to a web server without being intercepted. It acts as a virtual bridge to assure users that the site they are visiting is reliable and secure.

When a user accesses a website secured with SSL, their browser requests the SSL certificate from the web server. A trusted third party entity referred to as the Certificate Authority (CA) has issued this certificate. The certificate has a public key to the website that will be used for encrypting data before it is transmitted.

The user's browser and web server will be able to perform a process called an SSL handshake after the certificate has been obtained. In order to ensure that an SSL certificate has been issued by a legitimate Certificate Authority and is still valid, the browser verifies its authenticity during handshake. If the certificate is valid and the connection is secure, the browser and the web server will set up an encrypted channel for the exchange of data.

The data transmitted over this encrypted channel is scrambled and can only be decrypted by the intended recipient, the web server. This ensures that any potential eavesdroppers or hackers who might intercept the data will only see encrypted gibberish, making it nearly impossible for them to access sensitive information.

The SSL certificate also includes information about the website's owner, such as the domain name, the company's name, and the certificate's expiration date. Users can verify this information by clicking on the padlock icon or the HTTPS prefix in the website's URL bar, which indicates a secure connection.

In order to maintain a strong SSL implementation and ensure that the user's experience is secure, it is important to address inconsistencies in content. Some steps to resolve mixing content problems are given below:

• Serve All Resources Over HTTPS
• Update Third-Party Resources
• Use Relative URLs
• Update Content Management Systems
• Use Content Security Policy
• Test Your Website

Serve All Resources Over HTTPS

Ensure that all resources on your website (images, stylesheets, scripts, etc.) are served over HTTPS. Update any internal links and references to use the secure "https" protocol instead of "http".

Update Third-Party Resources

If your website relies on external resources from third-party websites, for example, like outside APIs from social media sites, make sure that they are also loaded over HTTPS. Check with each third-party provider for HTTPS versions of their resources.

Use Relative URLs

Instead of using absolute URLs (starting with "http" or "https:"), use relative URLs for internal resources. Relative URLs automatically inherit the protocol of the main page, ensuring they are loaded securely.

Update Content Management Systems

If you are using a CMS like WordPress, configure it to use HTTPS for all internal links and resources. Some CMSs have plugins or settings to automatically handle mixed content issues.

Use Content Security Policy

Implement a Content Security Policy that restricts the sources from which resources can be loaded, minimizing the risk of mixed content.

Test Your Website

Regularly check your website for mixed content issues using online tools or browser developer tools to identify and fix any insecure resources.

Below are the steps to fix the mixed content issue in WordPress:

1. Backup Your Website
2. Identify the Mixed Content
3. Update Your WordPress URL Settings
4. Use a Plugin to Fix Mixed Content
5. Update Internal Links and Resources
6. Update Third-Party Resources
7. Use Relative URLs
8. Update WordPress Settings
9. Test Your Website
10. Update Your SSL Certificate

1. Backup Your Website

Because you’re about to make some major changes to your WordPress site, create a backup of your WordPress website to make sure that you can revert to a working version if anything goes wrong during the process. You can use a backup plugin or your hosting provider's backup service for this purpose.

2. Identify the Mixed Content

Before you start fixing the issue, it's essential to identify the specific resources causing the mixed content warning. You can do this by inspecting your website using browser developer tools or by using online mixed content checkers. These tools will show you which resources (images, scripts, stylesheets, etc.) are loaded over HTTP instead of HTTPS.

However, a faster way, if you’re not eager to look at code or learn the developer tools of a browser, is to use the form on Why No Padlock? It’s free to use, though you may be prompted to tell the form that you’re not a spammer, as there is a Recaptcha test. Just put the URL of the page that you want to check, and it will tell you if there’s any mixed content and will highlight which elements you need to correct.

You will want to check every page on your website with this tool. When you’ve corrected all the suggested issues, then you can re-check the page to make sure that there are no more errors.

3.Update Your WordPress URL Settings

In your WordPress dashboard, go to "Settings" and then "General." It’s important to make sure that both "WordPress Address (URL)" and "Site Address (URL)" have "https" in the URL field. If they aren’t, then update them to with HTTPS and save the changes.

4. Use a Plugin to Fix Mixed Content

Some WordPress plugins can help fix mixed content issues automatically. One popular option is the Really Simple SSL plugin. Install and activate the plugin from the WordPress plugin repository.

Upon activation, the plugin will detect your SSL certificate and configure your website to work over HTTPS automatically. It will also handle URL replacements and ensure all resources are loaded securely.

Please note that this might not always fix the mixed content issue in WordPress, so it’s important to check each page and fix what exists before getting to this step. In some cases, this step might not even be necessary.

5. Update Internal Links and Resources

Even with the plugin's assistance, some internal links and resources might still be using non-secure URLs. To fix this, you can use the Better Search Replace plugin, which allows you to search and replace URLs in your WordPress database.

Install and activate the plugin. Once activated, go to the Tools section of your WordPress dashboard and click on Better Search Replace. Enter your website's old URL that had the HTTP in the "Search for" field and the new URL with the HTTPS in the "Replace with" field.

After adding the URLs, choose the appropriate database tables or select "All" to search the entire database. Please note that the plugin gives you the option to select every database table, but if you have a very large website, you might need to select a few tables at a time. Double-check your entries and click "Run Search/Replace" to update the URLs on the Dry run.

Never do a live run with this plugin on the first try. You could possibly create a big mess. When the dry run is done, and seems successful, you can unclick the dry run option, and then run your search and replace query.

6. Update Third-Party Resources

If your website relies on external resources from third-party websites, like font sources or social media embeds, check to make sure that these resources are also using HTTPS. Visit each of those third-party services' documentation or support to see if HTTPS versions are available.

In the case that the issue is within the plugin or theme, and you can’t change it, make sure to tell the plugin or theme developer that they need to correct the issue so all of the users that are actively using their plugin or theme, aren’t getting mixed content errors.

7. Use Relative URLs

To avoid mixed content issues in the future, use relative URLs instead of absolute URLs (starting with "http" or "https") for internal resources. Relative URLs will automatically inherit the protocol of the main page, ensuring they load securely over HTTPS.

8. Update WordPress Settings

Check your WordPress settings or consult the CMS documentation to ensure that the appropriate options are selected for using HTTPS.

9. Test Your Website

After making these changes, thoroughly test your website for mixed content issues. Use online mixed content checkers, browser developer tools, or dedicated mixed content testing tools to verify that all resources are now loading securely over HTTPS.

10. Update Your SSL Certificate

In the case that you’re having mixed content errors after everything has been done, go back and check your SSL certificate. Make sure that your SSL certificate is properly installed and that it’s not expired. If you’re still having issues after correctly installing your SSL certificate, then you may need to contact your SSL certificate provider or hosting support to ensure your SSL certificate is valid and properly configured.

Not sure if you have a mixed content issue? It’s time to check your website. You should be checking every page in case you have an older site that you’ve been linking to other sites before SSL became more mainstream. Hopefully this article on how to fix the mixed content issue in WordPress will help you deliver a safe and secure site to your visitors.