![Jo-el van Bergen](https://web.dev/images/authors/johyphenel.jpg) Jo-el van Bergen [X](https://twitter.com/johyphenel) ![Rachel Andrew](https://web.dev/images/authors/rachelandrew.jpg) Rachel Andrew Technical Writer [GitHub](https://github.com/rachelandrew) [LinkedIn](https://www.linkedin.com/in/rachelandrew) [Mastodon](https://front-end.social/@rachelandrew) [Bluesky](https://bsky.app/profile/rachelandrew.bsky.social) [Homepage](https://rachelandrew.co.uk)
A page has *mixed content* when its initial HTML is loaded over a secure [HTTPS](https://web.dev/articles/why-https-matters) 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**](https://www.ietf.org/rfc/rfc7835.html#section-2.1.1), 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. 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](https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html). 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. ![The Issues tab in Chrome DevTools shows detailed information about the specific mixed content issue and how to fix it](https://web.dev/static/articles/what-is-mixed-content/image/issues-tab-chrome.jpg) Each insecure resource is listed in DevTools, along with a restriction status. ### 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. In Chrome, you can view blocked content in the **Issues** tab in DevTools. ![The Issues tab in Chrome DevTools shows detailed information about the specific mixed content issue and how to fix it](https://web.dev/static/articles/what-is-mixed-content/image/the-issues-tab-chrome-de-0eea9d1e99f11.jpg) Some insecure resources are blocked to strengthen the security of your site. > [!NOTE] > **Note:** Browsers also highlight blocked content in their DevTools. Blocked content issues are detailed in the **Issues** tab in Chromium-based browsers. Firefox and Safari log messages in the console. ## The mixed content specification Browsers follow the [mixed content specification](https://w3c.github.io/webappsec-mixed-content/), which defines the [**optionally blockable content**](https://w3c.github.io/webappsec-mixed-content/#optionally-blockable-mixed-content) and [**blockable content**](https://w3c.github.io/webappsec-mixed-content/#category-blockable) 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. > [!NOTE] > **Note:** There is a [Level 2 of the Mixed Content specification](https://w3c.github.io/webappsec-mixed-content/level2.html) in progress, which adds automatic upgrading to the spec. In recent years, [HTTPS usage has risen dramatically](https://transparencyreport.google.com/https/overview), 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](https://w3c.github.io/webappsec/specs/mixedcontent/) 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.