What is Mixed Content?
Definition
Mixed content occurs when a page loaded over HTTPS requests some of its resources, such as images, scripts, stylesheets or iframes, over unencrypted HTTP. Those resources can be read or altered in transit. Modern browsers automatically upgrade image, audio and video requests to HTTPS and block other types such as scripts and stylesheets, which can leave the page looking broken.
Also known as: mixed content warning, insecure content on HTTPS, mixed active content
Why one HTTP resource is enough to cause trouble
HTTPS encrypts the connection between browser and server so nobody in between can read or alter what is sent. That protection only covers resources that actually arrive over HTTPS. If a securely loaded page pulls in a script over http://, an attacker on the network can swap that script and take control of the whole page. Images look less dangerous, but a tampered image can still show false information or change what a button appears to do.
What browsers do about it
Current browsers split mixed content into two groups:
| Group | Examples | Behaviour |
|---|---|---|
| Upgradable | <img>, <audio>, <video> and <source> set via src | Silently rewritten to https://. If the server has no HTTPS copy, the resource fails to load. |
| Blockable | <script>, stylesheets, <iframe>, fetch() and XHR, web fonts, images in srcset or <picture> | Blocked outright. |
Requests whose host is an IP address rather than a domain name (http://203.0.113.10/logo.png) are blocked instead of upgraded. Downloads started from a secure page over HTTP are also blocked by default or shown with a warning. Browser behaviour has tightened over the years, so older advice that "passive content still displays" is no longer reliable; MDN's mixed content page tracks the current rules.
Where it comes from
The usual origin is an HTTP-to-HTTPS move. The redirect is in place and pages load over HTTPS, but hard-coded http:// URLs survive in old posts in the database, theme settings, page-builder blocks or url() values inside CSS. The other common source is an ageing third-party widget or ad script that is only served over HTTP. That is why checking for mixed content belongs on every site migration checklist.
Finding and fixing it
- Open the browser console. Chrome and Firefox log a warning, with the URL, for every request they upgrade or block.
- Fix it at the source. Replace
http://yourdomainwithhttps://in the database and templates, switch third-party resources to their HTTPS versions, and remove or self-host any that don't offer one. - Use CSP as a bridge. The
upgrade-insecure-requestsdirective of a Content Security Policy upgrades every HTTP request on the page, blockable types included. The olderblock-all-mixed-contentdirective is deprecated.
Content-Security-Policy: upgrade-insecure-requestsThe directive is a safety net, not a cure: if the resource doesn't exist over HTTPS, the upgraded request still fails. The lasting fix is correcting the URLs themselves. HSTS solves a different problem; it stops visitors reaching your site over HTTP but does nothing about third-party HTTP resources inside the page.
For SEO, mixed content is not a ranking penalty in itself, but a blocked stylesheet or script can break how the page renders and degrade the experience. The SEO Checker reports HTTP resources on HTTPS pages as a separate finding.