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.

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?

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 cyber criminals.
  • 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.

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:

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:

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.

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.

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.