Home / Knowledge hub / Mixed content
Knowledge hub
Mixed content
An HTTPS page loading some resources over plain HTTP, which can be tampered with.
What it means
Mixed content happens when a page delivered over HTTPS loads other resources, such as scripts, images or frames, over plain HTTP. The page itself is protected in transit, but the extra pieces are not, so anyone on the network path can read or change them.
Browsers divide it into two kinds. Active content, like scripts and frames, can change the whole page. Passive content, like images and video, can mislead but has less power.
Why it matters
A single insecure script lets an attacker on the network rewrite the page: capture what a visitor types, redirect a payment, or inject their own code. The padlock stays on while this happens, which is why it surprises people.
Modern browsers block active mixed content and try to upgrade passive content to HTTPS, so the usual result is a broken page rather than a silent leak. A broken checkout or missing script still costs sales and support time.
How it shows up
It often appears after a move to HTTPS. Old content, hard-coded http:// links, third-party widgets and editor-pasted images are left over. Admin-entered content in a CMS is a frequent source, because each editor adds a new link by hand.
The mistakes repeat. Hard-coded http:// addresses stay in templates. Third-party scripts are called over HTTP. Forms post to an insecure address. Fix the links, use protocol-safe addresses, add HSTS, and consider the upgrade-insecure-requests policy while you clean up. Check the browser console for warnings.
Questions people ask
Mixed content, answered
What is the difference between active and passive mixed content?
Active content, such as scripts, stylesheets and frames, can alter the page, so browsers block it. Passive content, such as images, audio and video, cannot run code, so browsers have treated it more gently.
Passive content can still be swapped for misleading material.
Do browsers still allow mixed content?
They block active mixed content and automatically upgrade or block most passive content, depending on the browser. The behaviour has tightened over time.
Do not depend on it; fix the sources.
How do we find mixed content?
Open the browser console on each page and look for mixed content warnings, or crawl the site and search for http:// references in the HTML, scripts and stylesheets. Check CMS content as well as templates.
Re-test after each content change.
Does HSTS fix it?
HSTS makes browsers use HTTPS for your own domain, which helps with links to your hosts. It does not change links to other sites that only serve HTTP.
Fix the addresses at the source.
What does the upgrade-insecure-requests directive do?
It tells the browser to treat insecure resource addresses on the page as HTTPS. It is a useful safety net when links cannot all be fixed at once.
If a resource is not available over HTTPS, it will fail to load.
Sources
Where this comes from
Related
Terms that sit next to this one
HTTPS
The encrypted web protocol, and the minimum for anything with a login.
HSTS
A header telling browsers to use HTTPS only for your site, every time.
Encryption in transit
Protecting data while it travels between a browser and your servers.
Security headers
Response headers that switch on browser protections against common web attacks.
Subresource integrity
A hash check that stops a tampered third-party script or stylesheet from loading.
What is your page loading over HTTP?
A padlock does not cover what is behind it. We find vulnerabilities in your web app and its APIs and prove them by exploiting them. Book a pilot on one app.
Or start with a $199 pilot on one application: thirty days, success criteria agreed before day one, credited against the annual if you convert.