Mixed Content
Definition
Mixed content is the state of a page delivered over HTTPS that contains insecure parts. Browsers split it in two. Passive mixed content means images, video and audio: these are loaded, but the padlock disappears and the address bar drops to a neutral or warning state. Active mixed content means scripts, stylesheets, iframes, web fonts and fetch calls — anything that could alter the page — and every current browser blocks it outright rather than warning. The distinction follows from what an attacker on the network could do: swapping a photograph is unpleasant, while swapping a script hands over the whole page. The usual cause is mundane, an old link with http:// typed into it that nobody noticed after a site moved to a protected address.
Why It Matters
Active blocking is silent from the visitor's side, which makes it a nasty class of bug. The stylesheet does not load, so the page renders as unstyled text; the script does not run, so the navigation menu does nothing and the form never submits. Nothing appears in the page itself — the explanation is sitting in the browser console, which most people never open. Passive mixed content is less destructive but costs you the padlock on every page carrying one stray image, and a visitor who notices a warning on a download page tends not to download. On a site of any size this is rarely a single reference: one hardcoded address in a shared header template can take the padlock off a hundred pages at once.
How It Works
The browser records the origin a document was loaded from. As it parses the markup it compares the scheme of every subresource address against that origin, and an http:// address inside an https:// document is flagged. Active types are dropped before the request leaves the machine and a console message names the blocked address; passive types are fetched, and the security indicator for the page is downgraded. Two fixes work: rewrite the addresses to https:// where the other server supports it, or use a relative path such as /img/logo.png for anything on your own site, which inherits the scheme automatically and survives a later move. To find every instance, add the Content-Security-Policy directive upgrade-insecure-requests, which rewrites them in flight, or block-all-mixed-content to make the failures loud rather than partial.
Real-World Example
An agency uploads a client microsite to 99helpers and it goes live at velle-launch.99helpers.site with the padlock showing. The page looks wrong — no styling, no fonts — because the markup still references a stylesheet at an old http:// address from the previous host. The browser blocked it as active mixed content and said so only in the console. Changing that one line to a relative path fixed the rendering and kept the padlock.
Common Mistakes
- ✕Debugging a broken layout in the markup instead of the console — a blocked stylesheet produces exactly the same unstyled page as a missing one, but for a completely different reason
- ✕Assuming a warning means everything still loaded — passive content does load, active content was already thrown away before the request went out
- ✕Using protocol-relative addresses starting with two slashes as the fix — they are deprecated and break entirely when a page is opened from a local file
- ✕Checking only the home page after a migration — the offending address is usually in a shared template or an embedded widget, so it shows up on pages nobody thought to test
Related Terms
HTTPS
HTTP carried inside an encrypted TLS connection, shown in the browser as an https:// address. It is the same web protocol as before, with the traffic protected and the server's identity checked first.
TLS
Transport Layer Security, the protocol that encrypts traffic between a browser and a server and verifies which server it is talking to. SSL was its predecessor and is long dead, but the old name stuck to the paperwork.
SSL Certificate
A small signed file that proves a server is genuinely the one answering for a given hostname, so a browser will open an encrypted connection to it. Everyone calls it an SSL certificate, though the protocol it is used with has been called TLS for years.
Relative Path
A relative path points at a file starting from the page that mentions it, rather than from the site root. It has no leading slash — styles.css, img/logo.png, ../fonts/inter.woff2.
Web Asset
A web asset is any supporting file a page pulls in once the HTML has arrived — stylesheets, scripts, images, fonts, icons, videos. The HTML is the page; the assets are everything it asks for next.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →