What Is “Mixed Content,” and Why Is Chrome Blocking It? How to Find and Fix Mixed Content
Google announced that Chrome browser will begin blocking web pages with mixed content beginning December 2019. Now Chrome will block all mixed content by default, breaking some existing web pages. Here’s what that means. Web publishers are urged to check their websites to make sure there are no resources that are being loaded using the insecure HTTP protocol.
In this article, we’ll discuss what mixed content, how to find and fix mixed content from your website. Let’s get started!
What is Mixed Content?
There are two types of content here: Content delivered over a secure, encrypted HTTPS connection, and content delivered over an unencrypted HTTP connection.
Mixed content is when a secure web page (loaded through HTTPS) also contains scripts, styles, images or other linked content that is served through the insecure HTTP protocol. This is called mixed content. 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.” Google now even hides the “https://” indicator by default, as sites should just be secure by default. And the new HTTP/3 standard will have built-in encryption.
Safe scripts are those transferred over Hypertext Transfer Protocol or HTTP. The newer Hypertext Transfer Protocol Secure (HTTPS) provides a much safer way for websites to transmit information. Many sites have moved from HTTP to HTTPS, but some site owners fail to make that switch completely, which results in mixed content.
Modern browsers display warnings about this type of content to indicate to the user that this page contains insecure resources.
Mixed Content Effects
Mixed content presents a security risk for your site visitor as well as to your website.
According to Google’s developer page on mixed content:
“Mixed content degrades the security and user experience of your HTTPS site.
…Using these resources, an attacker can often take complete control over the page, not just the compromised resource.”
Although many browsers report mixed content warnings to the user, by the time this happens, it is too late: the insecure requests have already been performed and the security of the page is compromised. This scenario is, unfortunately, quite common on the web, which is why browsers can’t just block all mixed requests without restricting the functionality of many sites.
When your site has mixed content, you’re more vulnerable to security breaches, likely to have lower search engine rankings, and, starting this year, you may even see your site blocked on Google Chrome.
Find and Fix Mixed Content
You may not know whether your site contains mixed content, but don’t worry.
There are multiple ways to check your site for mixed content.
You can find out quickly with a Secure Sockets Layer checker (SSL checker). This kind of tool verifies that your site’s Secure Sockets Layer (SSL) certificate has been properly installed and that your security is sound.
Multiple online tools can do this for you. The best ones give you a rating not only on the certificate but its protocol support and any potential vulnerabilities.
Online Mixed Content Scanner
JitBit SSL Checker
JitBit SSL Checker is a free online scanner that will scan up to 400 pages of your site.
Really Simple SSL
Really Simple SSL is a lightweight plugin that can handle the migration to SSL as well as check and fix mixed content.
If your WordPress site is already migrated to SSL then you can use SSL Insecure Content Fixer WordPress Plugin to scan your site and alert you to insecure resources and help you fix them.
Screaming Frog Crawl Software
Screaming Frog is a modestly priced crawl software (£149.00/year). This is a good option for crawling large sites. There’s a short learning curve for learning how to use the crawler, it’s quite intuitive. Screaming Frog will find your mixed content but it won’t fix it.
Finding Mixed Content In Your Source Code
You can search for mixed content directly in your source code. Search for http:// in your source and look for tags that include HTTP URL attributes. Specifically, look for tags listed in the mixed content types & security threats associated section of our previous guide. Note that having http:// in the href attribute of anchor tags (<a>) is often not a mixed content issue, with some notable exceptions discussed later.
If you have a list of HTTP URLs from Chrome mixed content errors and warnings, you can also search for these complete URLs in your source to find where they are included in your site.
Fixing mixed content
Once you’ve found where the mixed content is included in your site’s source, follow these steps to fix it.
Step 1: Install an SSL Certificate
While some hosts will supply an SSL certificate along with your plan, not all do so by default. If you haven’t installed one yet, this is a vital task. An SSL certificate adds an extra layer of protection for you and your visitors and is what enables your site to function via HTTPS.
There are many places to get an SSL certificate. First, however, you’ll want to become familiar with the options that are available to you. The three main types are:
- Domain Validation (DV)
- Organization-Validation (OV)
- Extended Validation (EV)
DV certificates are the easiest and quickest to get but offer the lowest level of security. OV certificates are a solid middle option, while an EV will take longer to secure but is a good choice for large e-commerce sites.
After you’ve purchased a certificate, you’ll need to install and enable it. How you do this will depend on your provider and platform. Here at A2 Hosting, all of our plans come with free SSL certificates, and set yours up is simple.
Step 2: Remove Any HTTP Hyperlinks from Your Website
As we mentioned earlier, most sites are served over either the HTTP or the HTTPS protocol. HTTPS allows for encryption and adds a layer of safety to your website.
Even if your site is linking to an external resource that contains an HTTP hyperlink, such as an image, you’re opening up your website to possible attacks. That also puts your website’s visitors at risk.
Once everything is set up, run the audit by using the following code to get your report:
lighthouse –mixed-content http://www.example.com
Lighthouse will show you all of the insecure links that are currently on your website. Then you can modify or replace them as needed.
Step 3: Set Up a 301 Redirect to Boost Security
If you have updated your website from HTTP to HTTPS, you may want to consider implementing a 301 redirect. This type of redirect permanently reroutes users from one domain to another.
If you choose not to do this, some visitors may inadvertently end up using an insecure version of your website, or might never find it at all. To make sure everyone is redirected to the HTTPS version of your site, you’ll want to access your .htaccess file via File Transfer Protocol (FTP). Then add the following line of code at the bottom of the file:
Redirect 301 / http://www.yourwebsite.com/
Don’t forget to replace the placeholder with your site’s domain. Then save and re-upload the file, and your redirect will be ready to go.
Mixed Content Conclusion
Having your website blocked in Google is a worrying prospect. The good news is that if your site is at risk due to mixed content, there are some easy steps you can take to smooth the process.
To recap, here’s what you’ll want to do:
- Install or update your SSL certificate.
- Remove any unsecured links.
- Set up a permanent redirect.
Do you have any questions about mixed content? Ask away in the comments section below!
February 11, 2020