pfo-how-to-fix-mixed-content-wordpress

Updated on by Annie

4 Marvelous Ways to Fix Mixed Content WordPress

Does your WordPress site suddenly display a Not secure warning in Google Chrome even though your SSL certificate is valid?

This could be due to the mixed content error. It occurs when you migrate your website from an insecure HTTP connection to a more secure HTTPS one.

Consequently, visitors may feel your site is unsafe, prompting them to immediately click the Back button and look elsewhere to explore.

Worse yet, Google announced that they would deal with mixed content more strictly. Chrome will enforce a block on all non-secure resources (HTTP), which can even break your website.

It’s evident that the mixed content error can lead to serious negative effects. So the very important thing you need to do now is to find a way to fix it.

But the question is, how? Let’s hash it out.

What is a Mixed Content Error in WordPress?

Before diving into the concept of mixed content, you first need to have a grasp of HTTP and HTTPS content.

The on-site content with an HTTP connection is insecure and not encrypted. Using this site, you will encounter a higher risk of data breaches.

Sites using an HTTPS connection, on the other hand, are secure and encrypted. Simply put, it protects any data being transferred between a user’s computer. However, remember that HTTPS is not the opposite of HTTP. It is HTTP with encryption.

A mixed content error happens when both HTTP and HTTPS content are being loaded to display the same page. The site is loaded over a secure HTTPS protocol. But other resources, such as images, videos, stylesheets, scripts, audio, etc. are pulled from an insecure HTTP protocol.

pfo-mixed-content-error

This makes sites with mixed content errors not fully safe. While the site itself is on a secure connection, the loaded subresources may be vulnerable to third-party attacks. Using these resources, hackers can track users and change content on the site. Or even take complete control over the page, not just the insecure resources.

For this reason, Google and other browsers have started to both warn users about and block mixed HTTP content on websites. That way, they can prevent any unexpected third-party infiltrations on an otherwise secure HTTPS site.

If you have mixed content errors on your site, fixing them will be the only way to ensure the content continues to load.

2 Types of Mixed Content Error

There are 2 major types of mixed content error: active and passive.

Active Mixed Content: This comes as the most harmful mixed content type, including scripts, iFrames, stylesheets, and flash resources.

Since active mixed content interacts with the page as a whole, it allows cybercriminals to do almost anything with the page. They can rewrite the content, steal user data, redirect users to another site, or even take full control over the web page.

Passive Mixed Content: This refers to content that doesn’t communicate with the rest of the page, such as images, videos, audio, etc. Thus, while still being a security threat, it is not as much of a threat as its active counterpart.

As this content is inherently restricted, hackers are also restricted in what they can do if they have access to it. But they can still destroy your site by replacing product images or placing unwanted ads.

2 Ways to Detect Mixed Content Errors

When you move your site to HTTPS, the task at hand is to detect any potential mixed content on your pages. 2 ways you can do this: the manual way and the automatic way.

Manually Identifying Mixed Content Errors

To manually examine if your site has mixed content errors, follow these steps:

  1. Go to your website
  2. Click the lock icon on the address bar’s left side. A dialog box will appear to show you whether your site connection is secure. For example:

pfo-check-mixed-content-address-bar

In order to locate insecure files, you have to:

  1. Right-click anywhere on the site and select Inspect
  2. In the Inspect menu, press the tab labeled Console

The browser will scan mixed content and display warnings. Also, if there are any mixed content errors that may cause serious problems, it will highlight them in red.

Automatically Checking Mixed Content Errors

If your site has a lot of pages, it’d be impossible to go through each one to check if any have mixed content. Fortunately, there are a few online scanners that are intended to find mixed content errors on your site. Some of them are:

Why No Padlock?: This tool examines an individual page and displays all of the insecure resources. This can be considered the simplest tool to use. All you need to do is enter your URL and click on Test Page. Then it will show you any errors it has found. Plus, it’s free.

JitBit SSL Check: You can use this tool to scan your HTTPS site and check insecure images and scripts that will trigger a warning message in browsers. The number of pages is limited to 400 per scan.

HTTPS Checker: This is a desktop software you can install to scan your site. It is in charge of searching for Not secure warnings and content after big changes. It is available on Windows, Mac, and Ubuntu. The free plan enables you to check 500 pages per scan.

By applying one of these online scanners, you’ll find out exactly what pages might be marked as unsafe or blocked by Google. Knowing where mixed content errors happen, finding ways to deal with them won’t be a difficult task.

4 Methods to Fix Mixed Content WordPress

If you discover some mixed content errors on your site, don’t worry. Here are 4 simple ways to fix them.

Apply SSL Insecure Content Fixer Plugin

pfo-ssl-insecure-content-fixer-plugin

The easiest solution is using the SSL Insecure Content Fixer plugin. It assists you in addressing insecure links or files on WordPress sites.

This plugin provides different levels of action from which you can choose:

Simple: When enabling this level, the plugin will automatically fix the mixed content error in WordPress for scripts, stylesheets, and media library images.

Content: This level includes all the features of the Simple level, in addition to fixing the errors inside WordPress content and text widgets.

Widgets: Besides the features in the Content level, this level comprises an additional fix to resources loaded in all widgets on your WordPress website.

Capture: This level captures everything on every page of your website from header to footer and replaces all URLs with HTTPS.

Capture All: This level attempts to fix everything on your website.

To begin, install and activate the plugin, then:

  • Head to Settings → SSL Insecure Content to configure the plugin
  • Pick the level you want to deploy on your site
  • Click the Save Changes button to finish

Please notice that as you go higher with the level, the negative impact on your site increases as well. In other words, when you choose the Capture All level, it may seriously affect your site speed.

As a result, it is ideal to start with the Simple level first. If the previous level can’t completely fix the mixed content errors, then walk your way up to the advanced levels.

Inspect and Replace HTTP Files/Links

Does a hardcoded image or script cause the mixed content error on your WordPress site? Then the most effective way to fix it is to switch your URLs from HTTP to the secure HTTPS connection.

You can use the Elementor Page Builder plugin to find and eliminate mixed content errors. Once you activate the plugin, take the following steps:

  1. Go to your WordPress admin dashboard and choose Elementor → Tools
  2. Select the Replace URL tab
  3. In the Update Site Address (URL) field, enter your old HTTP format as well as your new HTTPS version
  4. Press on the Replace URL button

If it still doesn’t work, it’s necessary to update your site URL manually:

  1. Navigate to Appearance → Theme Editor in your WordPress admin menu
  2. In the Theme Files box, select header.php
  3. Type CTRL+F to open the search box and paste the link causing the mixed content error on your site
  4. Once you locate the link, replace http:// with https://
  5. When finished, press the Update File button

Modify .htaccess File

Occasionally when you migrate your site to a new server, or you just install an SSL certificate, some of the links and files would still retain the old insecure URLs.

This can easily be resolved by modifying the .htaccess file to redirect all requests from an insecure port to a secure HTTPS port.

To get started, connect to your site with an FTP client. After that:

  1. Double-click on the directory containing your site files
  2. On the directory, double-click on the .htaccess file to download a file backup
  3. Right-click on the file and then click the Edit option
  4. Open the file with a text editor and then remove all the content from it
  5. Rewrite the whole file using a new rule that will redirect any traffic from a secure port (in this case, port 443). Paste the code below on the file:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Now, save your changes and then re-upload the file to your server

Utilize CDN to Fix Mixed Content Errors

Content Delivery Networks (CDN) like Cloudflare are beneficial in relation to speeding up your site and protecting against SQL injections. Additionally, most CDNs provide free SSL certificates to users.

Cloudflare can also automatically replace mixed content on your website. This means, if a file is transferred by insecure HTTP, it will be converted to secure HTTPS before being displayed to the user.

To turn on this feature:

  1. Under the SSL/TLS section, select the Edge Certificates tab
  2. Scroll down and search for the Automatic HTTPS Rewrites option, then enable the feature

Fix Mixed Content Error WordPress Is No Longer a Problem!

Mixed content errors can be easily overlooked by website owners. But it will have devastating consequences if not promptly resolved. Thankfully, there are some feasible measures you can take to deal with these issues.

This article has demonstrated 4 marvelous methods to fix WordPress mixed content errors. You may be interested in 9 ways to fix the “Sorry, You Are Not Allowed to Access This Page” error.

Let’s choose the method that works best for you!