Mixed Content Blocked by Google starting December 2019
Google will Block Mixed Content
Mixed content will be blocked by Google and other browsers as they continue to improve security. This is the a continuation of the improvements to security begun in 2018. That is when Google started marking sites that use HTTP vs. HTTPS as “Not Secure.” They even confirmed that security was a signal used in Search Engine Rankings (SEO.)
However, mixed content was allowed to load. While the HTTPS prevented the web page from being tampered with it did NOT prevent a malicious script, image or iframe from being pulled in via the insecure content.
Now Google is taking the next step in helping create a more secure internet. Starting in December 2019 some websites may stop functioning as desired as Google recently announced they will block mixed content. You can read their official announcement here: No More Mixed Messages About HTTPS https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html
This is a continuation of Google’s push to provide a secure, optimized experience for its users. And it’s not just Google. Mozilla’s Firefox and other browser are also blocking insecure content.
In order to ensure your content is viewable and your website functions as desired it is necessary to address mixed content issues.
What is Mixed Content
Mixed content occurs when a website is loaded over a secure HTTPS connection, but parts of the website (images, videos, stylesheet or scripts for example) are loaded over an insecure HTTP connection. Because both secure and insecure content is being loaded on the same page it is called Mixed Content.
Currently a browser will display this as a warning so the visitor to the website is aware that some part of the connection is not secure.
The timeline for blocking mixed content begins in December, 2019 with the release of Chrome 79. Users will get new settings to unblock mixed content. When Chrome 80 is released in January, 2020 audio and video that fails to load over HTTPS will be blocked. Finally, in February, 2020 with the release of Chrome 81 images that do not load over HTTPS will also be blocked.
Find Mixed Content on Your Website
Now that you know about the dangers of mixed content how can you check if your site is affected?
First, you can check your browser bar. If you see the following, the page contains insecure content:
Next, you can look at the info icon in the browser bar. It should show a padlock in the upper left corner. If you do not see the padlock, your page is not fully secure.
When you discover a page with mixed content you just need to right-click on the page then select the Inspect Element->Console to view what content is showing as mixed.
Google has provided a great step-by-step process for finding and fixing mixed content on your pages. It can be found here: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
For larger websites, you may want to use a tool to assist with this. Here are a few to check out:
JitBit https://www.jitbit.com/sslcheck/ is a free tool that will crawl up to 400 pages.
HTTPS Checker https://httpschecker.net/ will check up to 500 pages for free. Plans are available if you need to check more pages.
Missing Padlock https://www.missingpadlock.com/ will crawl up to 5,000 pages with limitations.
How to Fix Mixed Content
Now that we have found the mixed content, how do we fix it? Well we have to rewrite the HTTP content to HTTPS. There are several options to accomplish this:
Manually Update Content
You can manually update the content by doing one of the following:
- Include the resource from a different host, if one is available.
- Download and host the content on your site directly, if you are legally allowed to do so.
- Exclude the resource from your site altogether.
The above link to the Google documentation provides step-by-step instructions on how to perform these changes. Keep in my mind this process works best if you only have a small amount of content to update.
Implement a Content Security Policy
Another option would be to implement a Content Security Policy (CSP). This requires adding a <meta> tag in the <head> section of every page on your website. One drawback to this option is it assumes the site you are referencing supports HTTPS. If it does not, then the content you are referencing will not load.
Ask Your Hosting Provider for Help
You can also contact your hosting provider. Many providers offer tools to help find and replace mixed content. For example, our hosting provider, Siteground, has a tool that forces HTTPS functionality.
If you have a WordPress site here are a few plugins that can help:
SSL Insecure Content Fixer https://wordpress.org/plugins/ssl-insecure-content-fixer/ . This plugin is really easy to use and is recommended for beginners. However, it may add a few milliseconds to how fast your page loads.
Better Search and Replace https://wordpress.org/plugins/better-search-replace/ . While this plugin requires a little more knowledge to use, you need to know the URL of the content you want to replace; it is still quite easy to use.
I installed and activated the Better Search and Replace plugin on a website I manage that only had a few mixed content images that needed updating. Worked like a charm. When I was done, the site showed a padlock in the browser bar like you see below. 🙂
Now that the non-HTTP files have been fixed this site no longer has mixed content blocked by Google.
While fixing mixed content may be time consuming, Google plans to implement the changes gradually. So this will give you time to address any issues. You may want to dedicate a few hours over the next few months to check your site for any mixed content issues.
And, keep in mind, Google isn’t the only browser blocking insecure content. Firefox currently blocks insecure content. Edge, Opera and Safari show secure and not secure warnings in their browser bars and if they are not currently blocking content they will most likely follow Google’s example.
If you are struggling with how to fix mixed content or even how to install an SSL certificate on your website to secure it, feel free to give us a shout, we may be able to help. Every site we develop and hosting set up complete are HTTPS by default.