A page has mixed content when its initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, and scripts) are loaded over an insecure HTTP connection. The name refers to the mix of HTTP and HTTPS content on a single page.
Requesting subresources using the insecure HTTP protocol weakens the page's security, because these requests are vulnerable to on-path attacks, in which an attacker eavesdrops on a network connection and views or modifies the communication between two parties. Using these resources, attackers can track users and replace content on a website, and in the case of active mixed content, they can take complete control over the page, not just of the insecure resources.
Although many browsers report mixed content warnings to the user, the report is often too late: the insecure requests have already been performed and the security of the page is compromised.
Most browsers now block mixed content for security reasons. Change insecure content requests to secure content to ensure that your page keeps loading correctly.
The two types of mixed content
There are two types of mixed content: active and passive.
Passive mixed content, including images, video, and audio, doesn't interact with the rest of the page, so a man-in-the-middle attack is restricted in what it can do if it intercepts or changes that content.
Active mixed content interacts with the page as a whole. This includes scripts, stylesheets, iframes, and any other code the browser can download and execute. Attacks on active mixed content let an attacker do almost anything to the page.
Passive mixed content
Passive mixed content is less of a risk than active mixed content, but that risk is still there. For example, an attacker can:
- Intercept HTTP requests for images on your site and swap or replace those images.
- Replace the images on buttons so that users confuse them and, for example, delete content they intended to save.
- Deface your site by replacing your images with pornographic content.
- Replace your product images with ads for something else.
Even if the attacker doesn't change your site's content, they can track users through mixed content requests. They can also tell which pages a user visits and which products they view based on images or other resources that the browser loads.
If passive mixed content is present, most browsers indicate in the address bar that the page isn't secure, even when the page itself is loaded over HTTPS. You can observe this behavior in this demo.
Until recently, passive mixed content was loaded in all browsers, because blocking it would have broken many websites. This is now beginning to change, so it's vital to update any instances of mixed content on your site.
In some cases, Chrome automatically upgrades passive mixed content. This means that if an asset has been hard-coded as HTTP but is available over HTTPS, the browser loads the HTTPS version. If there's no secure version, the asset doesn't load.
Whenever Chrome detects mixed content or auto-upgrades passive mixed content, it logs detailed messages to the Issues tab in DevTools to advise you on fixing your specific issue.
Active mixed content
Active mixed content poses a greater threat than passive mixed content. An attacker can intercept and rewrite active content, using it to take full control of your page or even your entire website. This lets them change any aspect of the page, including displaying different content, stealing user passwords or other login credentials, stealing user session cookies, or redirecting the user to a different site entirely.
Because the risks of active mixed content are so high, most browsers already block this type of content by default to protect users, but behavior varies between browser vendors and versions.
This demo shows examples of active mixed content. Load the example over HTTP to see the content that's blocked when you load the example over HTTPS. Blocked content is also detailed in the Issues tab in DevTools.
The mixed content specification
Browsers follow the mixed content specification, which defines the optionally blockable content and blockable content categories.
A resource qualifies as optionally blockable content "when the risk of allowing its usage as mixed content is outweighed by the risk of breaking significant portions of the web". This is a subset of passive mixed content.
All mixed content that isn't optionally blockable is considered blockable, and should be blocked by the browser.
In recent years, HTTPS usage has risen dramatically, and it has become the clear default on the web. This makes it more feasible now for browsers to consider blocking all mixed content, even those subresource types defined in the mixed content specification as optionally blockable.
Older browsers
Some visitors might use older browsers. Different browser versions from different vendors treat mixed content differently. At worst, older browsers and versions don't block any mixed content at all, which is unsafe for the user.
By loading all of your resources securely and fixing your mixed content problems, you ensure that your content is visible and protect users from dangerous content that older browsers might not block.