What Is Mixed Content? | HTTP vs. HTTPS

What is mixed content?

With TLS (also known as SSL), Internet communication is encrypted end-to-end, creating a more secure browsing experience. Users can easily identify TLS-encrypted sites because they have ‘https://’ in the URL instead of ‘http://’. But in some instances, an HTTPS site can also contain some elements that are loaded using the plaintext HTTP protocol. This creates a condition known as mixed content, sometimes referred to as ‘HTTP over HTTPS’.

With mixed content, users will be under the impression that they are on a secure, encrypted connection because they are on an HTTPS-protected site, but the unencrypted elements of the page create vulnerabilities, opening up those users to malicious activity such as unauthorized tracking and on-path attacks. The severity of the vulnerability depends on whether the mixed content is passive or active.

What’s the difference between passive/display mixed content and active mixed content?

Passive/Display Mixed Content: In this case, the unencrypted HTTP content is restricted to encapsulated elements on the site that cannot interact with the rest of the page – for example, images or videos. For example, an attacker can block or replace an image loaded over HTTP, but wouldn’t be able to modify the rest of the page.

Active Mixed Content: In this case, elements or dependencies that can interact with and alter the entire webpage are served over HTTP. These include dependencies like JavaScript files and API requests.

Active mixed content presents a more severe threat than passive/display mixed content; when compromised, it allows an attacker to take over an entire webpage, collect sensitive user input such as login credentials, serve the user a spoofed page, or redirect the user to an attacker’s site.

Most modern web browsers provide warnings in the developer console for mixed content, as well as blocking the more dangerous types of mixed content. Each browser has its own set of rules, but generally speaking, active mixed content is much more likely to be blocked.

Although passive/display mixed content poses less of a threat, it still provides an opportunity for attackers to compromise privacy and track user activity. Furthermore, since a lot of browsers allow some forms of passive mixed content and only provide users with mixed content warnings in the developer console, many users will be unaware that they are being exposed to mixed content.

Users on antiquated web browsers are particularly vulnerable, as these browsers may not block mixed content at all.

Why don’t browsers just block all mixed content?

An unfortunately large number of popular websites serve mixed content in one form or another. A web browser that blocks all mixed content would be delivering a very narrow version of the web to their users. Until more websites clean up this issue, browsers must compromise by permitting some of the less severe forms of mixed content.

How can mixed content errors be fixed?

Web developers own the responsibility for eliminating mixed content. Over time, web browsers have become more and more restrictive in regards to mixed content, and this trend will only continue. It is therefore imperative that developers eliminate mixed content if they want web browsers to continue displaying their site.

The fix for mixed content is quite simple: Web developers need to ensure that every resource on their page is loaded over HTTPS. In practice, this can prove tricky, as modern websites often load several different resources from various places.

A good tool for developers to spot all instances of mixed content on their pages is the Google Chrome developer console. Developers can also check their source code for instances of resources, such as API calls and libraries, that are loaded using an ‘http://’ URL. In some cases, the solution is simply replacing the ‘http://’ URL with ‘https://’. But first, it must be verified that an HTTPS version of that resource is available. If an encrypted version of the resource isn’t available, it will either need to be replaced or removed altogether.

Check out the Cloudflare tool for identifying SSL issues, including mixed content: https://www.cloudflare.com/diagnostic-center/