Quick Links

"This site has insecure content;" "only secure content is displayed;" "Firefox has blocked content that isn't secure." You'll occasionally come across these warnings while browsing the web, but what exactly do they mean?

There are two types of mixed content -- one is worse than the other, but neither is good. Mixed content warnings are in indication that something is wrong with a web page you're visiting.

What is Mixed Content?

Related: What Is HTTPS, and Why Should I Care?

This all comes down to the difference between HTTP and HTTPS. HTTP is the most commonly used type of connection -- when you visit a website using the HTTP protocol, your connection to the website isn't secured. Anyone eavesdropping on the traffic can see the page you're viewing and any data you're sending back and forth.

That's why we have HTTPS, which is literally "HTTP Secure." HTTPS creates a secure connection between you and the web server. The connection is encrypted and authenticated, so no one can snoop on your traffic and you have some assurance you're connected to the correct website. This is extremely important for securing account passwords and online payment data, ensuring no one can eavesdrop on them.

Mixed content warnings indicate a problem with a web page you're accessing over HTTPS. The HTTPS connection should be secure, but the web page's source code is pulling in other resources with the insecure HTTP protocol, not HTTPS. Your web browser's address bar will say you're connected with HTTPS, but the page is also loading resources with the insecure HTTP protocol in the background. To ensure you know that the web page you're using isn't completely secure, browsers display a warning saying that the page has both HTTPS and HTTP content -- mixed content, in other words.

chrome-this-page-includes-script-from-unauthenticates-sources

Why This is Dangerous

Related: What Is Encryption, and How Does It Work?

Here's why this is actually dangerous. Let's say you're on a payment page and you're about to enter your credit card number. The payment page indicates it's a encrypted HTTPS connection, but you see a mixed content warning. This should raise a red flag. It's possible that the payment details you enter could be captured by the insecure content and sent over an insecure connection, removing the benefit of HTTPS security -- someone could eavesdrop and see your sensitive data.

Because HTTP doesn't authenticate the web server in the same way HTTPS does, it's also possible that a secure HTTPS site pulling in a script from an HTTP site could be tricked into pulling an attacker's script and running it on the otherwise secure site. When HTTPS is used, you have more assurances that the content was not tampered with and is legitimate.

In both cases, this eliminates the benefit of having a secure HTTPS connection. It's possible that a website could have an insecure content warning and still secure your personal data properly, but we really don't know for sure and shouldn't take the risk -- that's why web browsers warn you when you come across a website that's not coded properly.

chrome-mixed-content-https-problem

Mixed Active Content vs. Mixed Passive Content

There are actually two types of mixed content. The more dangerous one is "mixed active content" or "mixed scripting." This occurs when an HTTPS site loads a script file over HTTP. The script file can run any code on the page it wants to, so loading a script over an insecure connection completely ruins the security of the current page. Web browsers generally block this type of mixed content completely.

The second type is "mixed passive content" or "mixed display content." This occurs when an HTTPS site loads something like an image or audio file over an HTTP connection. This type of content can't ruin the security of the page in the same way, so web browsers don't react as harshly. However, it's still a bad security practice that could cause problems. For example, an attacker could replace the image with a misleading image, tampering with a theoretically secure page. An image load request also contains headers that contain cookie information associated with a website, so even loading an image over an insecure connection can cause problems. Web browsers often display a warning icon or message rather than blocking the content completely, as this type of mixed content is still so common on real websites. In Chrome, you'll see a padlock with a yellow triangle.

chrome-padlock-yellow-triangle-mixed-content-warning

What To Do When You See a Mixed Content Warning

Web browsers generally block the most dangerous types of mixed content by default. Don't unblock it. If you can't log into a website or enter online payment details without loading the mixed content, you should just leave the website and not enter your information into an unsecure website. Let the website owners know their site is unsecure and broken.

If you see a warning that a page contains other resources that may not be secure, it's probably safe to log in anyway. It's not a good sign if a website as important as your bank has this problem, but this type of mixed content warning is very common.

On the other hand, mixed content warnings are not really a big deal if you're accessing a website that doesn't need HTTPS. All a mixed content warning means is that a web page guaranteed to benefit from HTTPS security -- in other words, in a worst case scenario, the web page you're visiting is as insecure as a standard HTTP site. So, if you were accessing a website like Wikipedia just to read some articles and you saw a mixed content warning, you shouldn't need to care about it too much. In a worst case scenario, it's just as insecure as if you were reading articles on Wikipedia over a standard HTTP connection, which you'd have no problem doing anyway.

firefox-has-blocked-content-that-isn't-secure

Why Some Web Pages Have This Problem

You'll only see this error if there's a problem with the way a web page is coded. If a web page is served over HTTPS, it should also use the HTTPS protocol to pull in script files and other content it requires. Web developers should test their web pages, ensuring that they don't trigger scary-looking warnings in users' browsers. If you're a user, you can't really do anything about this -- it's up to the website owner to fix it.

If you're a web developer, all you have to do is ensure your HTTPS pages load content from HTTPS URLs, not HTTP URLs. One way to do this is by making your entire website only work over SSL, so everything just uses HTTPS.

If you want to make a page that can be served over HTTP or HTTPS and does the right thing automatically, you can use "protocol relative URLs" to have the user's browser automatically choose HTTP or HTTPS as appropriate, depending on which protocol the user is connected with. For example, a protocol relative URL to load an image would look like <img src="//example.com/image.png">. The browser will automatically add either http: or https: to the start of the URL, whichever is appropriate. Of course, you'll need to ensure the site you're linking to offers the resource over both HTTP and HTTPS.

only-secure-content-is-displayed-internet-explorer

Web browsers are automatically blocking mixed content or your protection, and this is why. If you need to use a secure website that doesn't work properly unless you enable mixed content, the website's owner should fix it.