Categories
Website

Google Chrome Will Block Mixed Content

Recently, Google Chrome announced that they will soon start blocking mixed content also known as insecure content on web pages.

This feature will be gradually rolled out starting from December 2019. This should give website owners enough time to check for mixed content errors and fix them before the block goes live.

Failing to do so will cause poor user experience, loss of traffic, and loss of sales.

In this guide, we will explain Google Chrome’s mixed content blocking and how you can be well prepared for it.

Getting ready for mixed content block by Google Chrome

Since this is a comprehensive guide, we have created an easy to follow table of content:

What is Mixed Content?

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

HTTPS represent websites using a SSL certificate to deliver content. This technology makes websites secure by encrypting the data transfer between a website and a user’s browser.

Google, Microsoft, WordPress.org, WPBeginner, and many other organizations are pushing HTTPs as the standard protocol for websites.

They have been very successful in their efforts. According to Google, “Chrome users now spend over 90% of their browsing time on HTTPS on all major platforms.”

However, there are still many websites serving partial insecure content (mixed content) over HTTPs websites. Google aims to improve this situation by giving website owners a nudge in the right direction.

Why Google Chrome Wants to Block Mixed Content?

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

Blocked mixed content on a web page

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 for 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 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.

How to Prepare Your WordPress Website for Google Chrome’s Mixed Content Block

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.

Here is what you need to do to prepare your website for these changes.

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.

Not Secure HTTP website

It is about time to finally move your website to HTTPS.

We know that changes like these can be a bit intimidating for beginners. Some site owners postpone the move due to cost, which is no longer an issue as you can easily get a free SSL certificate for your website.

Other website owners delay it because they think it will be a complicated process and could break their website.

That’s why we have created a step by step guide to easily move your WordPress site from HTTP to HTTPS.

We will walk you through every step and show you how to get that secure padlock icon next to your website address in all browsers.

Finding Mixed Content on an 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.

If Google Chrome has blocked a script on your website, then you will see the scripts blocked shield icon at the right corner of the address bar.

Blocked mixed content on a web page

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.

Unblocked mixed content

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.

Console tool in Inspect view showing mixed content errors and warnings

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

There are two easy methods that you can use to fix mixed content warnings and errors on your WordPress website.

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

This method is easier and recommended for beginners. We will use a plugin that will find and replace HTTP URLs to HTTPs on the fly before sending it to 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. For more details, see our step by step guide on how to install a WordPress plugin.

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

Secure Content Fixer 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.

For more detailed instructions, see our article on how to fix mixed content error in WordPress.

Method 2. Manually Fix Mixed Content Issues in WordPress

This method can get a bit complicated for beginners. Basically, 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 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.

Better search and replace plugin settings

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 the https.

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

If the mixed content resources are loaded by your WordPress theme or plugin, then you will need to inform the theme or plugin developer, so they can release a fix for that.

For more details, see our complete beginner’s guide to fixing the common SSL/HTTPs issues in WordPress.

We hope this article answered your questions regarding Google Chrome’s mixed content block and helped you get ready for it. You may also want to see our guide on how to use Google Search Console to grow your website traffic, and the important marketing data you must track on all WordPress sites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

Categories
Website

How to Fix the Mixed Content Error in WordPress (Step by Step)

Are you seeing the mixed content error in WordPress? Mixed content error in WordPress is caused by incorrect HTTPs/SSL settings. Often times it doesn’t affect your website’s functionality, but it can have adverse affects on your website’s SEO and user experience. In this article, we will show you how to fix the mixed content error in WordPress.

How to fix the mixed content error in WordPress

What is Mixed Content Error in WordPress?

It is highly recommended to add HTTPS / SSL in WordPress because after July 2018 Google Chrome will mark all http versions of website as insecure.

SSL adds an additional security layer around data transferred from your website to users’ browsers. Search engines like Google recommend using SSL on your website as well.

All best WordPress hosting companies are now offering free SSL as part of their packages. If your hosting company doesn’t offer that, then you can get free SSL through Let’s Encrypt for your WordPress site.

If you have correctly implemented SSL on your website, then you will see a green padlock icon next to your website’s URL in the browser address bar.

Secure content sign

On the other hand if your HTTPs/SSL settings are not properly setup, then you will see an info sign or a broken padlock icon in the address bar.

Not fully secure due to mixed content

This indicates that while your website is using a SSL certificate, some content on your website is still served from non HTTPS urls.

You can find out which content is served through insecure protocol by using the Inspect tool. The mixed content error will be displayed as a warning in the console with details for each mixed content item.

Mixed content displayed in developer tools

If it is just a single item that you can manually fix, then you can go ahead and fix it by editing the post, page, or theme file where it appears.

However, in most cases these items are added dynamically by WordPress or stored in your database. In that case, it will be hard to detect all of them and fix them manually.

That being said, let’s take a look at how to easily fix the mixed content error in WordPress.

Fixing Mixed Content Error in WordPress

First thing you need to do is install and activate the SSL Insecure Content Fixer plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » SSL Insecure Content page to configure the plugin settings.

SSL secure content plugin settings

This plugin provides different levels of fixes to the mixed content error. We will explain each one of them, what they do, and which one is best for you.

1. Simple

This is the fastest and recommended method for all beginner users. It automatically fixes the mixed content error in WordPress for scripts, stylesheets, and WordPress media library images.

2. Content

If the simple method doesn’t fix the mixed content error on your website, then you should try this method. It will use all the features of simple, in addition to checks for fixes inside WordPress content and text widgets.

3. Widgets

This includes all fixes applied in content level plus an additional fix to resources loaded in all WordPress widgets on your website.

4. Capture

This method captures everything on every page of your website from header to footer and replaces all URLs with HTTPs. It is slower and would affect performance of your website.

5. Capture all

When all above levels fail, then you can try this method. It attempts to fix everything which may result in some unexpected behavior on your website. It will also have the most negative impact on performance.

After selecting a content fix level, you need to scroll down to the HTTPS detection section. This is where you can choose how to detect the HTTPs content on your website.

HTTPS detect

The default option is to use a WordPress function, which would work for most website.

Below that you will find other options which are particularly useful if you’re using Cloudflare CDN, nginx web server, and more. Go ahead and select the method that you think applies to your website depending on your particular setup.

Don’t forget to click on the save changes button to store your settings.

You can now visit your website to see if this resolved the insecure content issues on your website. Make sure to clear your WordPress cache before checking your website.

If the mixed content error in WordPress is not fixed, then revisit the plugin’s settings page and readjust the fix levels.

We hope this article helped you learn how to fix the mixed content error in WordPress. You may also want to see our list of the most common WordPress errors and how to fix them.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link