How to Fix the Mixed Content Error in WordPress?

Introduction

When a user accesses a web page via HTTPS, their connection with the web server is secured through TLS, providing protection against most sniffers and man-in-the-middle attacks. However, if an HTTPS page contains content fetched using unencrypted HTTP, it is referred to as a mixed content page. Such pages are only partially encrypted, exposing the unencrypted content to potential sniffers and man-in-the-middle attackers. This comprises the overall security of the pages, making them vulnerable to unauthorized access.

What is Mixed content in WordPress?

WordPress is an open-source content management system (CMS) that utilises PHP and is coupled with a MySQL or MariaDB database. When a WordPress site loads both HTTPS and HTTP scripts or content simultaneously, a mixed content warning emerges in the user’s browser. This situation can lead to issues as HTTP and HTTPS operate as distinct protocols.

A common example of mixed content is when an image is loaded insecurely (http://xyz.com/image.jpg) while the page is requested using SSL (https://xyz.com).

How to check the mixed content error?

To determine whether your site is impacted by mixed content errors, inspect the console in the browser’s developer tools. If insecure content is preventing the padlock from appearing, you’ll observe yellow warnings; whereas, red warnings indicate that insecure content has been blocked from display.

Follow these steps in most browsers:

  1. Right-click anywhere on your page.
  2. Select “Inspect” from the context menu.
  3. Navigate to the “Console” tab.
  4. Any flagged insecure content will be displayed here (refer to the example shown in the image).

What Causes Mixed Content Warnings?

Mixed content warnings are frequently encountered immediately following the migration of a WordPress site from HTTP to HTTPS. This arises when certain HTTP links persist, triggering mixed content warnings. Other common causes of these warnings include:

  1. Developers use absolute paths (e.g., http://xyz.com/style.css) instead of relative paths (/style.css) in plugins or themes to reference CSS and JavaScript.
  2. Images with hardcoded URLs (e.g., http://xyz.com/image.png) that utilize HTTP, found within posts, pages, or widgets.
  3. Linking to HTTP versions of external scripts like Hosted jQuery, Font Awesome, and others.
  4. Embedded video scripts that employ HTTP rather than HTTPS.

Steps to fix Mixed Content Error in WordPress

  1. Make sure that you have activated SSL for your domain.
  2. You can use the WordPress plugin “SSL Insecure Content Fixer” which is recommended by WordPress to fix the Mixed content error.
  3. Upon activation, you need to visit the “Settings » SSL Insecure Content” page to configure the plugin settings.

4. The mixed content error resolution offered by this plugin is categorized into various levels: Simple, Content, Widgets, Capture, and Capture all.

5. Upon choosing a content fix level, proceed to the HTTPS detection section by scrolling down. Here, you can specify the method for detecting HTTPS content on your website.

6. Save your settings by clicking on the “Save Changes” button.

7. Before reviewing your website, ensure you clear the WordPress cache. If the mixed content error persists, revisit the plugin’s settings page and adjust the fix levels to the next tier. This process will effectively resolve the mixed content error in WordPress.

Conclusion

In conclusion, addressing mixed content errors is imperative for maintaining a secure and trustworthy online environment. With browsers like Chrome implementing strict measures and displaying “Not Secure” warnings, overlooking mixed content can have detrimental effects on user trust and SEO rankings. 

Proactive efforts to identify and rectify mixed content issues are essential, as relying solely on automated solutions may not provide immediate results. By promptly converting non-secure HTTP URLs to secure HTTPS, website owners can enhance security, user experience, and overall online competitiveness. Ignoring the significance of resolving mixed content errors may result in compromised data integrity and diminished credibility in the eyes of both users and search engines.

Nginx VS Apache

Introduction A web server, a software application operating on a computer, interacts with web browsers by responding to requests, facilitating the delivery of web pages

Read More »