What Is “Mixed Content,” Why Is Chrome Blocking It? and How to Correct Mixed Content

Google Chrome already blocks some types of “mixed content” on the web. Now, Google announced it’s getting even more serious: Starting in early 2020, Chrome will block all mixed content by default, breaking some existing web pages. Here’s what that means.

What Is Mixed Content?

There are two types of content: Content delivered over a secure, encrypted HTTPS connection, and content delivered over an unencrypted HTTP connection. When you use HTTPS, content can’t be snooped on or tampered with in transit, which is why its critical websites offer encryption when dealing with financial information or private data.

The web is moving to secure HTTPS websites. If you connect to an older HTTP website without encryption, Google Chrome now warns you these websites are “not secure.”

But some web pages can be neither entirely HTTPS nor completely HTTP. Some web pages are delivered over a secure HTTPS connection, but they pull in images, scripts, or other resources via an unencrypted HTTP connection. Such web pages have “mixed content” because they’re not fully secure.

Mixed content is a term used to describe non-HTTPS content loading on an HTTPS website.

Why does Google Chrome want to Block Mixed Content?

Google Chrome already blocks mixed content, but it’s limited to certain content types like JavaScript and iFrame resources.

From December 2019, Google Chrome will move forward to start blocking other mixed content resources like images, audio, video, cookies, and other web resources.

An insecure HTTP file on a secure HTTPS webpage can still be used by hackers to manipulate users, install malware, and hijack a website. This jeopardizes your website security as well as the safety of your website visitors.

It also creates a bad user experience as Google Chrome cannot indicate whether a page is completely secure or insecure.

What Will Happen if a Website is Showing Mixed Content?

Google Chrome has announced a gradual plan to implement mixed content blocking. It will be implemented in three steps spawning over the next three releases of Google Chrome.

Step 1

Starting from December 2019 (Chrome 79), it will add a new settings option to the ‘Site Settings’ menu. Users will be able to unblock the mixed content already blocked by Google Chrome including JavaScript and iframe resources.

If a user opts out of a website, then Google Chrome will serve mixed content on that site, but it will replace the padlock icon with the insecure icon.

Step 2

Starting from January 2020 (Chrome 80), Google Chrome will start auto upgrading HTTP video and audio file URLs to HTTPS. If it fails to load them over HTTPS, then it will automatically block those files.

It will still allow images to load over HTTP, but the padlock icon will change to the Not Secure icon if a website is serving images over HTTP.

Step 3

From February 2020 (Chrome 81), Google Chrome will start auto-upgrading HTTP images to load over HTTPS. If it fails to load them over HTTPS, then those images will be blocked as well.

Basically, if your website has any mixed content resources that are not upgraded to HTTPS, then users will see the Not Secure icon in their browser’s address bar.

This will create a poor user experience for them. It will also affect your brand reputation and business.

No need to panic though. You can easily prepare your website to fix all mixed content errors.

What do you need to do to prepare your website for these changes?

Google Chrome is the most popular browser in the world among both mobile and desktop users.

Leaving your website with incomplete HTTPS implementation or no HTTPS at all will result in loss of traffic, sales, and overall revenue.

Move Your Website to HTTPS

If your website is still using HTTP, then Google Chrome will already be showing a ‘Not Secure’ icon when users visit your website.

It’s time to move your website to HTTPS.

Find and fix mixed content on HTTPS website

If you already have an HTTPS-enabled website, then here is how you will find mixed content on your site.

The first indication of mixed content issues will be visible in Google Chrome’s address bar when you visit your website.

Google Chrome has already blocked the insecure content and that’s why the padlock icon on the left corner of the address bar will not change.

The second indication that you should look for is the info icon. This icon will replace the padlock if the page you are viewing has mixed content that Google Chrome has not blocked.

Clicking on the icon will show the notice that ‘Your connection to this site is not fully secure’.

Usually, this content includes images, cookies, audio, or video files. Chrome does not block those files at the moment and that’s why it shows this notice.

If your site has both icons, then this means your site is loading multiple types of mixed content files using HTTP.

Next, you need to find out which files are loaded using the insecure HTTP URLs. To do that, right-click anywhere on your website and select Inspect tool from the browser menu.

Switch to the ‘Console’ table under the Inspect window to view page load errors. You’ll be looking for ‘Mixed content:’ errors and warnings to find out which files are blocked and which files are loaded using the HTTP URLs.

Fixing Mixed Content Errors in WordPress

Method 1. Fix Mixed Content Errors and Warnings Using a Plugin

We will use a plugin that will find and replace HTTP URLs with HTTPS on the fly before sending them to the user’s browser.

The downside is that it adds a few milliseconds to your website’s page load speed which is barely noticeable.

First, you need to install and activate the SSL Insecure Content Fixer plugin.

Upon activation, go to the Settings » SSL Insecure Content page to configure the plugin settings.

Select the ‘Simple’ option and then click on the ‘Save changes’ button to store your settings.

Visit your website to look for mixed content warning errors.

Method 2. Manually Fix Mixed Content Issues in WordPress

you’ll be finding the insecure URLs across your website and replacing it with secure URLs.

We will still use a plugin to find insecure HTTP URLs on your website. However, you’ll be able to deactivate the plugin once you have changed the URLs, so this will not impact your page speed like the first option.

Let’s get started.

First, you need to install and activate the Better Search and Replace plugin.

Upon activation, you need to visit the Tools » Better Search Replace page.

Under the ‘Search’ field, you need to add your website URL with http. After that, add your website URL with HTTPS under the ‘Replace’ field.

Click on Run Search/Replace button to continue.

The plugin will now run and find all instances of your website URLs starting with HTTP and replace them with HTTPS.

The plugin works on your WordPress database, so it will only change URLs for your content areas.

You need to notify the theme or plugin developer if the mixed content resources are loaded by their theme or plugin.

CONCLUSION:

We hope this article answered your questions regarding Google Chrome’s mixed content block and helped you get ready for it.

You can follow us on Twitter and Facebook.