Mixed content warnings in Google Chrome

Keep a lock on it

Editor’s note: This article originally published on the Sucuri Blog

Migrating your website to HTTPS might seem like a simple task. Get the TLS/SSL certificate, install it on your web server, and you’re done.

The real pain for large projects, however, is changing http:// resources to https://. These resources include images, videos, sounds, forms, scripts and CSS files, along with any externally loaded third-party elements like tracking, ads and widgets.

If an HTTPS page includes any of these elements served over the HTTP protocol, they are passed unencrypted from your web server to a visitor’s browser.

This problem is called mixed content and can pose a number of different threats to your website and visitors.

 

For example, an attacker can see what images the visitors are viewing — and even replace images with their own.

Leaving even just a single benign image loaded over HTTP poses serious privacy risks, as it allows bad actors to track what pages are being visited. In a worst-case scenario, mixed content can also allow attackers to intercept and rewrite active content such as scripts or iframes, potentially taking full control of your page or even your entire website.

Related: The importance of managing your SSL certificate

Upcoming mixed content warnings in Google Chrome

When mixed content is detected in modern browsers, they show the HTTP image but change a status icon in the address bar to indicate a problem.

Screenshot Showing How Various Browsers Warn Of Mixed Content Issues

Safari hides the padlock icon, Firefox shows a small warning icon, and the current version of Chrome shows an information icon. Site visitors can click on these icons to read more about the problem.

Upcoming Changes for Chrome 80

Screenshot Of Chrome 80 Security Warning

In Chrome 80, which has an anticipated release date of early 2020, mixed images will still be loaded over HTTP but will cause Chrome to display a noticeable “Not secure” warning in the address bar.

Chrome 80 will try to load mixed audio and video resources over HTTPS. If changing http:// to https:// is enough, the videos will be displayed. If it fails, the videos will not be loaded over HTTP — and website owners will need to fix the URL manually.

Upcoming Changes for Chrome 81

Chrome 81 will treat mixed images the same as videos: the browser will first try to load the image by replacing http:// with https://. If the image cannot be loaded over HTTPS, then it will not be displayed.

Locating and fixing mixed content

In a large project, it’s easy to miss http:// resources and serve mixed content. We’ve outlined a couple of steps you can take to mitigate risk and prevent warnings in the upcoming versions of Chrome.

Finding potential problems

GoDaddy provides SiteCheck, a free security scanner that can find mixed content on your website. SiteCheck scans the source code of your page to find potential problems — even if the resource is not displayed by default.

TLS Recommendations Page For Mixed Content

For example, a trans_pixel.aspx image is placed into the <noscript> tag on Microsoft.com, so you won’t see a mixed content warning there. Mixed content warnings will only appear if the visitor has disabled JavaScript in their browser, which does not happen often nowadays. SiteCheck can still find the problem in this type of long-forgotten code.

TLS Recommendations Page Showing Mixed Content Issues

Related: Top website security threats and how to protect your site from attack

Fixing the issues

The good news is that if you have GoDaddy hosting and are eligible for our Managed SSL Service, then we can take care of everything for you!

As part of the MSSL white-glove service, we install the TLS/SSL certificate and check the site for any mixed content warnings.

 

If we find any issues, we fix it.

DIY solutions

One simple method you can employ yourself is to use grep and database search-and-replace tools to find and fix any HTTP URLs.

Another quick-and-dirty solution is to add the upgrade-insecure-requests directive to your Content-Security-Policy header. In this case, the browser will automatically rewrite http:// resources to https://. If the https:// URL is different, this solution certainly won’t help.

That being said, one common problem is HTTP resources from third-party servers, such as CDNs or web APIs, which can be a source of mixed content warnings — just like the resources hosted on your server. That’s why running a grep search for http://your-website.com is not enough; you can miss something like http://chart.apis.google.com.

In summary

As Google continues to roll out improvements and updates to Chrome’s mixed content warning tools, it’s important to stay ahead of the curve and keep your content secure. To briefly recap:

  • Mixed content opens the door to attackers and poses serious security risks to both the website and its end-users.
  • Google is implementing updates to Chrome browsers to protect end-users in the case of mixed content, but it might cause display errors and functionality issues for affected websites.
  • Mixed content should be repaired as quickly as possible. You can choose to do this manually or — if you’re an eligible GoDaddy hosting customer — GoDaddy’s Managed SSL Service can fix it on your behalf.

Let GoDaddy’s easy and automatic Managed SSL Service do the heavy lifting and enjoy your peace of mind.

Image by: Chris Barbalis on Unsplash