How to Find and Fix Mixed Content Warnings on HTTPS Sites
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 3.00 out of 5)
Loading...

How to Find and Fix Mixed Content Warnings on HTTPS Sites

Simply supporting HTTPS isn’t always enough — you also need to know how to identify and fix mixed content errors

If you recently migrated your website from an insecure HTTP connection to a more secure HTTPS connection, you may still run into the problem of receiving mixed content warnings. Worse yet, your site may render as insecure to site visitors, causing them to quickly click the ‘back’ button and find elsewhere to explore.

That said, the real problem with mixed content warnings on HTTPS connections is emerging with Google Chrome’s latest release — Chrome 79. With this new release, some content that continues to load over an insecure connection will automatically be blocked. It will mark websites that use TLS 1.0 or 1.1 as “Not Secure” and no longer show the lock icon for them.

Further down the road with Chrome 81, scheduled to be released sometime in March, Google will completely remove support for the legacy TLS protocol, which will block all non-secure content by default. In other words, content on your site that is not loading via HTTPS will not load at all, and your site visitors will not see this content.

If you want to make sure all your site’s content is loading over a secure connection and site visitors see it all, keep reading. Today we’re explaining what mixed or insecure content is, why it’s a problem, and how to find and fix mixed content warnings if you see them on your HTTPS website.

Let’s hash it out.

What Is Mixed Content?

According to Google, mixed content occurs when HTML on a website loads over a secure HTTPS connection (thanks to a recently installed SSL certificate) but other content, such as images, video content, stylesheets, and scripts, continue to load over an insecure HTTP connection. This results in some web content loading securely and some web content loading insecurely.

Hence the name “mixed content.”

The thing with mixed or insecure content is that it all loads over a secure HTTPS connection, whether the content itself is secure or not. And when this happens, modern browsers such as Google Chrome display warnings to users trying to view the web content that the site contains insecure content.

Graphic: A collage of mixed content error messages on websites

Secure websites that load over HTTPS connections provide the following benefits:

  • Authentication. Reassure your site visitors that they’re safe when they land on your website and engage with your site content, especially if you run an online shop where financial information is shared. In addition, verify for site visitors that they’re on the website they want to be and haven’t been redirected to a malicious site.
  • Data Integrity. Visually tell site visitors that their personal and financial information is secure and safe from hackers no matter what action they take on your site. In addition, give browsers the ability to detect whether a hacker has changed any data a browser receives. In other words, help users trust that a hacker hasn’t redirected money paid via your online store to another account.
  • Anonymity. Guarantee site visitors that their behavior while on your site isn’t being intercepted by others and used maliciously.

In short, HTTPS allows website owners to secure their data and build trust with those that visit their site so they can continue to build their brand and business.

Why Is Mixed Content a Security Issue?

Graphic: A screenshot example of a mixed content error
(Image source: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content)

If mixed content loads over a secure connection, you may be asking yourself why it matters. After all, the HTTPS connection should be securing the resources regardless of whether it’s mixed or not, right?

Wrong.

Any time there is mixed or insecure content on a webpage, the entire website becomes vulnerable to attack. While it doesn’t open the webpage up to all types of cybercrime, it weakens the overall security of the site. This means that if a hacker breaches a website that loads mixed content, they might be able to take control of the entire page, not just the resource that is insecure.

While most modern browsers display mixed content warnings for people to see before they visit a website, the truth is, many of these warnings come too late. In fact, oftentimes hackers have already broken into mixed content websites and have begun doing damage without the site owners or visitors knowing what’s occurred.

Here are some other ways mixed or insecure content on your HTTPS site can become a security problem:

  • Hackers can intercept HTTP requests to load an image and swap your site’s image out for another one the hacker prefers.
  • Your ‘save’ and ‘delete’ button images can be switched, causing site visitors to accidentally save or delete content.
  • The front end of your site can be defaced, which is especially bad when it’s with lewd or inappropriate images or text.
  • A hacker can intercept written content and rewrite it entirely.
  • Passwords, session cookies, and other login credentials can become compromised and land in the hands of cybercriminals.
  • Your site visitors can be redirected to another site without knowing any different.

Browsers do their best to block the most dangerous types of mixed content on websites. However, it’s impossible to block all of it (though that seems like an obvious solution) because so many well-established and highly trafficked websites render mixed or insecure content for site visitors. Blocking all of it will lead to ruin and cause a lot of problems.

That said, you can expect popular browsers like Chrome to continue to block more and more mixed content as new versions are released.

How to Find and Fix Mixed Content Warnings on Your HTTPS Website

If you’ve taken a proactive approach to site security and have installed an SSL certificate on your site, be proud. Data from Google’s Transparency Report indicates that desktop users load more than half the pages they visit over HTTPS connections and spend more than two-thirds of their time on HTTPS webpages.

Graphic: A Google Transparency Report chart of platforms people use to access HTTPS sites.
(Image Source: Google Transparency Report)

Unfortunately, data encryption is less prevalent across mobile devices, though more site owners are taking measures to secure their mobile sites as time goes on and mobile usage worldwide continues to climb.

However, just because you’ve done the right thing by encrypting your site’s data, doesn’t mean your website’s content is fully secure. That’s why you must work hard to prevent loading mixed content on your website in the first place. Otherwise, that SSL certificate does you no good.

Let’s look at how to find and fix mixed content loading on an HTTPS website using Google Chrome.

Step 1: Visit Your Website

Visiting your website to find mixed or insecure content warnings may seem obvious. But, in reality, how many times do you casually visit your own website as though you’re a site visitor?

It’s important you check your site first to see if you’re loading mixed or insecure content over your secure HTTPS connection. Remember, Google Chrome will display mixed content warnings if mixed content is present on your site.

To view Chrome’s mixed content warnings, first click on the webpage you want to check. Then, right-click and scroll down to ‘Inspect Element.’ When you do, choose the tab labeled Console. The browser will detect mixed content and display warnings like this:

Graphic: A behind-the-scenes look at mixed content
(Image source: https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/passive-mixed-content.html)

If the mixed content is very serious (meaning it opens up hackers to take complete control over your entire web page), the mixed content warnings will display in red:

Graphic: A screenshot of a mixed content error
(Image source: https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/active-mixed-content.html)

The Chrome Developer tools will only display mixed content warnings for the webpage you’re currently viewing. This means you will have to manually inspect every single web page on your website if you want to fix all the mixed content warnings on your site. As you can see, this can be a very time-consuming and tedious task if you don’t catch the problems early on.

Step 2: Verify Your Site’s URLs

Besides inspecting the source code on your entire website, another surefire way to identify insecure content on your site, despite having an HTTPS connection, is to check your site’s URLs.

If you notice that some of your site’s URLs are HTTP instead of HTTPS when you know that you have an active SSL certificate on your site, then you know there’s likely a problem with some mixed content loading on the front end for site visitors. It’s best to keep a list of all web pages on your site that are loading mixed or insecure content. This will help you stay organized when it comes to fixing all the warnings you discover.

Step 3: Compare the HTTP vs HTTPS Web Pages

Once you know mixed content is loading on your HTTPS website, the next thing you’ll want to do is compare your insecure HTTP web page against the secure HTTPS web page (using the same URL for both). If the web pages are identical over HTTP and HTTPS, move on to the next step. This means no content is being blocked by Google Chrome and you can move on.

Graphic: An illustration of mixed content in the browser
(Image source: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content#finding_mixed_content_by_visiting_your_site)

If, however, you see a warning or the content will not display over the HTTP connection, you should do one of the following:

  • Get rid of the resource altogether (e.g. the image, video, etc. that will not display over HTTP);
  • Include the resource from another host if available; or
  • Download and host the resource on your site directly.

Step 4: Change the URL and Save

If your website renders the same over both HTTP and HTTPS connections, the next step is to change the URL from http:// to https://, save the source file and redeploy the updated file.

Then, click on the web page where the mixed content error appeared and make sure it’s fixed and rendering over a secure HTTPS connection.

Ways to Prevent Mixed Content Warnings on Your HTTPS Site

It can be frustrating to install an SSL certificate on your website and continue to receive mixed content warnings despite the secure connection. That’s why taking a few additional measures to secure your website, and safeguard your site visitors, is sometimes necessary.

1. Always Use HTTPS URLs When Loading Your Webpages

It’s important that you apply your HTTPS connection (https://) to all web pages on your website whenever possible. If you notice that your web pages are loading over an insecure connection, despite having an active SSL certificate on your site, you need to fix this. This might mean getting in touch with your web hosting provider’s support team if they’re the ones providing you with an SSL certificate.

2. Use the Content-Security-Policy-Report-Only Header

If you want to collect reports of mixed content on your website automatically, you might consider adding this snippet of code to your site’s HTTP response header:

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

Though this isn’t 100% reliable for fixing mixed content before it becomes a problem, it does help those with large websites stay on top of insecure content.

When a site visitor lands on a web page that has mixed content, a report is sent to https://example.com/reportingEndpoint alerting you that something has violated the content security policy.

The report will include the:

  • URL of the webpage in question, and
  • The subresource that violated the policy.

By configuring your reporting endpoint to log these reports, you can track mixed content on your website without having to visit each webpage yourself. That said, the only time this strategy works is if a site visitor lands on a web page with mixed content. Not to mention, you’ll only receive reports for moderately to highly trafficked web pages, meaning mixed content may be loading for some time before you become aware of it.

3. Use the Upgrade-Insecure-Requests CSP Directive

Another way to automatically detect and fix mixed content warnings on your HTTPS site before it becomes an issue is to use the upgrade-insecure-requests directive tool. This tool tells the browser to upgrade all insecure URLs before making any user requests.

In other words, an insecure URL will be made secure before loading for a site visitor on the front end of your website.

To do this, add this meta tag snippet of code to the document’s HTML <head> section:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Remember, if the resource that is loading via HTTP over an HTTPS connection is not available over HTTPS, this tool will not work. Therefore, the resource will not be upgraded as secure and will not load for site visitors. Though this means site visitors will miss some of your site’s content, it also means they remain secure as they explore your site.

4. Use an Online Tool to Identify Mixed Content Warnings

If you have a large website and don’t have the time and manpower to do all of the above, you can always use a web crawler service to help identify mixed content warnings on your HTTPS website:

  • Why No Padlock? This free tool will allow you to quickly check your URL to ensure there are no insecure links found on your site.
  • HTTPS Checker. This “freemium” software, which is available for Windows, Mac, and Ubuntu Linux, is great for
    • checking for Chrome’s ‘Not Secure’ warnings,
    • helping you prepare for an HTTPS migration,
    • scanning many domains at once, and
    • checking for issues related to major imports or content changes.
  • Mixed Content Scan. Found in GitHub, Mixed Content Scan lets you scan your HTTPS website for mixed content. After scanning your site, you’ll see a list of URLs causing mixed content warnings. You’ll see the varied warnings in different colors so you can easily spot what is causing problems on your site.
  • JitBit Scanner: This free tool scans your entire website, even following internal links, to look for insecure images, scripts, and CSS files that trigger mixed content warnings. That said, you can only scan up to 400 web pages with this tool.

Wrapping Up

In the end, having an HTTPS website is more important than ever. Google Chrome will be the first to tell site visitors when your site isn’t secure and using an HTTPS connection. Your search rankings will tank if you have an insecure site, and people will be slow to trust your brand or business if you can’t prove to them that they’re safe while browsing your site.

A free SSL certificate is often included in web hosting plans, but premium certificates can cost up to hundreds or thousands of dollars. While there’s no one right answer for which type of certificate to choose (because everyone’s needs are different), keep in mind that any free SSL protection is usually domain-validated only (i.e. the least secure option). Here is a comparison of SSL certificate types to give you an idea of prices, features and level of security offered.

As you can see, just enabling HTTPS on your website isn’t enough. If you have mixed content loading over a secure HTTPS connection, you’ll continue to receive mixed or insecure content warnings and push people away. So, take the time to check and monitor your site for insecure content. Because you can bet that even though some site visitors will still risk visiting your site with mixed content warnings, popular browsers like Chrome are going to continue to crack down on insecure sites and prevent users from engaging with them the way you’d like in the future.

Author

Matt Ahlgren

Matt Ahlgren is a web developer and technology blogger who is passionate about educating small businesses about online security. Matt is the founder of websitehostingrating.com.