Google will begin to protect users more aggressively from otherwise-secure websites that load insecure resources in the coming releases of Google Chrome. This type of content is known as “mixed content,” or serving content using different security protocols (HTTPS or HTTP). Google will begin to block resources from loading on an HTTPS website if the resources are not secure or using HTTPS.
What this means for your website is if you have image files, CSS, JavaScript, or third-party resources that your site relies on for display or functionality purposes, they might not work in Chrome if they are not secure. The results could end up being as small as one image not showing up, or as catastrophic as your site no longer working properly in Chrome to a non-secure JavaScript file.
If you’re currently relying on insecure resources, this change has the potential to be bad for your website, your business, and your users. Outside of individual site concerns, though, this is a good security step for Google to be taking, and we wouldn’t be surprised to see other browsers take their lead.
We should also note that Google is taking steps to help webmasters ease into this change and aren’t out to break the web. Google plans to roll out these aggressive mixed content protections over several versions of Google Chrome. With each release, Google will become more strict in its allowance of mixed content. The important thing is that Chrome will try to auto-upgrade resources from HTTP to HTTPS and load them that way. If the resource loads at a secure location, then the site will work as usual, but if it doesn’t work at a secure location, the resource will not load.
For example:
- Say we have a JavaScript file on our site that loads from “http://coolsiteforseo.com”
- The reference in our HTML to this file is
- As is, this resource is insecure, but Google will try to load
- If it loads, then Google will display or execute it
- If it fails to load at HTTPS, then Google will block it. This means that whatever functionality the coolstieforseo.com script was supposed to provide will not work.
ZDNet has a detailed write up on which versions of Chrome will be affected by what changes, but here is the gist:
- Chrome 79: A new setting will be introduced to unblock insecure content on specific sites. If your site has mixed content, insecure content will not load, but a user will be able to “unblock” that insecure content manually.
- Chrome 80: Mixed audio and video files will be upgraded automatically to use HTTPS if it is available; otherwise they will be blocked. Mixed images will still load but there will be a “not secure” warning shown.
- Chrome 81: Images will be upgraded automatically to HTTPS, and will be blocked if they cannot load securely.
Why is Mixed Content a Problem?
This comes down to security. Content served via HTTP (insecure) is less secure than HTTPS. Resources that are served via HTTP are easier to intercept and manipulate to potentially harm a website and its user. Using HTTPS drastically reduces resource vulnerabilities. HTTPS provides three key benefits:
- Authentication allows us to be sure that the website serving the resource is the actual website we want.
- Data maintains its integrity, meaning no one has tampered with it in transit between the serving site and your website.
- Secrecy lets us be sure that the data we’re sending to and from the website is secure and is not being read by a third party.
Google provides some great details and examples around why web pages with mixed content are less secure, which you can read here.
Being Proactive
Even though Google is taking steps to help us out by attempting to auto-upgrade insecure resources, webmasters should not rely on Google’s help and should take this matter into their own hands.
We recommend finding and updating any HTTP resources on your websites to HTTPS, if possible, so that we do not have to rely on Google figuring it out for us. Google will likely only get more aggressive about this, so fixing it now will help us future-proof our security. We also have the chance to change the resource if there isn’t an HTTPS version available.
Finding Insecure Content
There are a few methods for finding insecure content on your site, including built-in browser tools, third-party websites, and good old “by-hand” methods.
Built-in Browser Tools
This is going to be the easiest method for most websites, since it is likely already built into your browser.
Here is how to find insecure content with Chrome, Firefox, and Safari:
Chrome
Using Chrome, right-click anywhere on the page to bring up your developer console. To do this, right-click and select “Inspect.” Then click the “Security” tab. This panel will tell you whether your website is secure and provide links to insecure content on the site.
The left-hand panel will display whether the website is secure, whether it’s using HTTPS itself, and what resources are or aren’t secure.
Below you’ll see an example of insecure resources on a website we analyzed.
You can also use the Network tab and try typing in “http:” into the filter bar to find resources the website loaded using HTTP:
Firefox
In Firefox, you can do the same by right-clicking in the browser window, selecting Inspect Element, and clicking the Network tab.
You might need to reload your website so that each resource can be displayed as it is loaded. Once you have the full is of resources, you can find the insecure ones by looking for rows of elements that have a padlock crossed out—these are insecure resources. Each will need to be updated with a secure version of that resource, or it will not display correctly in Chrome.
Safari
This can be done in Safari as well, following a similar series of steps. First, right-click in the browser window and select “Inspect Element.” Then navigate to the Network tab and look for resources without a padlock—these are insecure resources.
The downside to using this method, regardless of the browser you’re using, is that you can only find insecure resources on one page at a time.
Third-Party Tools
While the built-in browser tools are perfectly fine and will help you find your insecure content, there are third-party websites that can do the same and more sometimes.
A website like https://www.whynopadlock.com/ will let you enter a URL, and then it will scan for insecure content and present you with its findings, orlet you know your site is secure, and no insecure resources were found.
Screaming Frog
A paid power user tool, Screaming Frog, will show which files are insecure content in a few ways; the most comprehensive is their Insecure Content report, which will give you a full list of insecure resources.
All you need to do is run a crawl of your website, then click the Reports button and choose the “Insecure Content” report, which will produce an exported spreadsheet.
The advantage to using something like Screaming Frog is you can find insecure resources across your entire site rather than just one page at a time—this could be a major time saver.
What Should You Do With Insecure Content?
If you’ve found insecure resources on your site, don’t panic. As we said earlier, Google will try to auto-upgrade any resources it finds to HTTPS and load them that way. The problem is if there is no secure version, then nothing will load. Here are some things we should do to be proactive.
-
Try Self-Upgrading
So, you’ve found an insecure image or Javascript file. What now? Well, first, you should try to change the URL of the resource to use HTTPS instead of HTTP. This might be all you need to do to make an insecure resource a secure one, if the resource’s host is keeping up to date with security. Self-upgrading may or may not work; it will depend on whether the source of the resource has upgraded to HTTPS.
Try swapping the HTTP for an HTTPS in your insecure resource and see if it loads.
-
Find an Alternative
If you can update a resource as explained above, we recommend doing so, but what if the resource won’t load even at HTTPS? This is when you will have to find a resource to replace the non-secure one. You might have to find a new JavaScript tool to replace an old one, or find a new securely-hosted image.
-
Host the Resource Yourself, Securely
If you cannot find a good replacement for an insecure resource, then your next best bet might be to host the file on your own site securely. This might require copying the image or copying the JavaScript file to your own server (if you have the rights to do so) and then serving it from a secure URL that way. This comes with its own issues, like keeping files up to date or terms of services using third-party JavaScript, but this might be your best option for keeping the same resources if you can’t find secure versions of them.
Next Steps
The security of your website should be a top priority for you as a webmaster or business owner. Taking steps to ensure your site is following the latest best practices when it comes to security is critical, so take some time and ensure you’re website is not using mixed content, and if you are, fix it!
Additional Resources
- https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
- https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html
- https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
- https://www.whynopadlock.com/
- https://www.screamingfrog.co.uk/
