Having a secure HTTPS connection is meaningless if the page itself loads resources over insecure HTTP. This is known as 'Mixed Content'. When a secure page loads an insecure asset, the browser's 'lock' icon often disappears or shows a warning, signaling to the user that the page's integrity is compromised.
Passive mixed content refers to resources that do not have the ability to modify the page's DOM, such as images (`<img>`), audio, or video. While less dangerous than active content, they still pose a privacy risk: an attacker can see exactly which images a user is viewing, which can leak sensitive information about the user's activity.
💡 Modern browsers often 'Auto-Upgrade' passive content by attempting to fetch the image via HTTPS first. If it fails, they fall back to HTTP but may show a warning.
<!-- Passive Mixed Content Example -->
<p>Welcome to our secure portal!</p>
<img src="http://insecure-cdn.com/logo.png" alt="Company Logo">
<!-- The browser will flag this as mixed content -->In the example above, the image is fetched over HTTP. An attacker on the network could replace this logo with a malicious image or a deceptive banner without the user's knowledge.
Active mixed content consists of resources that the browser *can* execute or that can alter the page, such as JavaScript (`<script>`), CSS, or iframes. This is a critical vulnerability. If a script is loaded over HTTP, an attacker can inject malicious JS into the secure page, steal session cookies, or redirect the user.
⚠️ Active mixed content is so dangerous that modern browsers (Chrome/Firefox) now **block it by default**. The script simply will not load, and a console error will be generated.
| Content Type | Example | Risk Level | Browser Action |
|---|---|---|---|
| Passive | Images, Video | Medium | Warning / Auto-upgrade |
| Active | JS, CSS, iframes | Critical | Blocked by default |
| API Calls | AJAX / Fetch | Critical | Blocked if destination is HTTP |
The goal for any developer is 'HTTPS-Everywhere'. The most effective way to eliminate mixed content is to use a Content Security Policy (CSP) that forces all resources to be loaded over HTTPS.
# The CSP header that forces all requests to HTTPS
Content-Security-Policy: upgrade-insecure-requestsSimply changing `http://` to `https://` in your code is not enough if the remote server doesn't actually support TLS. This will lead to 'Connection Refused' errors.
Verify exercises to earn ★ 140 XP and unlock next lab level.