Mixed Content: Insecure Assets on Secure Pages

When a website is loaded over secure HTTPS, all assets (such as images, scripts, stylesheets, and fonts) must also be delivered over HTTPS. If any resource is instead loaded over unencrypted HTTP, the page is in a state of Mixed Content.

Mixed content weakens the security of your entire page and causes browsers to show warnings, block assets, or remove the padlock icon.

sequenceDiagram
    participant B as Browser
    participant S as Secure Server (HTTPS)
    participant U as Unsecure Server (HTTP)

    B->>S: HTTPS Request for Index Page
    S-->>B: Returns index.html
    Note over B: Browser parses HTML and finds external resources
    B->>S: Fetches HTTPS CSS (Success)
    S-->>B: Secure Stylesheet
    B->>xU: Fetches HTTP Script (Blocked!)
    Note over B,U: Browser intercepts and blocks active mixed content to protect the DOM
    B->>U: Fetches HTTP Image (Passive - Warning)
    U-->>B: Unsecure Image loaded (Padlock removed)

The Two Types of Mixed Content

Browsers classify mixed content into two categories based on the risk of the insecure asset:

1. Active Mixed Content (High Risk)

Active mixed content refers to assets that can interact with and modify the Document Object Model (DOM) of the page.

• Examples: Insecure scripts (<script src="http://...">), stylesheets (<link rel="stylesheet" href="http://...">), iframes (<iframe src="http://...">), web workers, and font files.
• The Threat: If an attacker intercepts the unencrypted HTTP request for a script, they can inject malicious code into the script. Because the script runs in the context of your secure page, the attacker gains full control over the session, allowing them to read cookies, hijack form submissions, or steal credentials.
• Browser Behavior: Modern browsers block active mixed content completely by default. The asset will fail to load, and a warning will appear in the developer console.

2. Passive Mixed Content (Lower Risk)

Passive mixed content refers to assets that are rendered on the page but cannot alter the DOM or execute code.

• Examples: Insecure images (<img src="http://...">), audio files (<audio src="http://...">), and video files (<video src="http://...">).
• The Threat: An attacker can intercept the unencrypted HTTP request for an image to see what images the user is viewing, or replace the image with a spoofed or malicious image. This violates user privacy and allows visual defacement.
• Browser Behavior: Browsers typically load passive mixed content but will display an insecure warning in the address bar (removing the padlock icon or showing a warning indicator). Some browsers will attempt to automatically upgrade HTTP requests to HTTPS, falling back to blocking if HTTPS is unavailable.

How to Detect Mixed Content

To identify mixed content on your site:

1. Browser Console: Open your page in Chrome, Firefox, or Safari, right-click, and select Inspect. Go to the Console tab. Insecure assets will trigger warnings like: Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure stylesheet 'http://insecure-cdns.com/style.css'. This request has been blocked; the content must be served over HTTPS.
2. Network Tab: Reload the page with the Developer Tools open, select the Network tab, and filter requests by the http protocol to locate insecure requests.

How to Fix Mixed Content

To resolve mixed content permanently:

1. Use Relative or Protocol-Relative URLs

Update your source code to load assets using relative paths or secure absolute paths:

<!-- BAD: Hardcoded HTTP -->
<img src="http://cdn.example.com/logo.png" />

<!-- GOOD: Relative path -->
<img src="/assets/logo.png" />

<!-- GOOD: HTTPS path -->
<img src="https://cdn.example.com/logo.png" />

2. Implement the upgrade-insecure-requests CSP Directive

If you have a large database of legacy content containing old HTTP links, you can instruct browsers to automatically rewrite all HTTP requests to HTTPS before loading them by adding the following directive to your Content Security Policy (CSP):

Content-Security-Policy: upgrade-insecure-requests;

Sources & Standards

• W3C Mixed Content Specification: w3.org/TR/mixed-content - The security standards defining active vs. passive mixed content categories and browser blocking behavior.
• Mozilla MDN: How to fix a website with mixed content - A comprehensive guide to audits and CSP rules for handling mixed-content errors.
• W3C Content Security Policy: upgrade-insecure-requests: w3.org/TR/upgrade-insecure-requests - The specification outlining client-side upgrading of unencrypted URLs.