How to Fix the Mixed Content Error
Mixed Content happens when an HTTPS page loads HTTP resources (images, scripts, iframes). Chrome blocks active (scripts/iframes) fully, passive (images) triggers a warning. Fix: replace every http:// with https:// or // (protocol-relative), or set Content-Security-Policy: upgrade-insecure-requests.
Below: step-by-step, working examples, common pitfalls, FAQ.
Step-by-Step Setup
- Open DevTools → Console → find "Mixed Content: The page was loaded over HTTPS" errors
- Scan the site with Enterno Mixed Content Scanner for the full list
- Replace HTTP URLs in HTML:
http://cdn.old.com → https://cdn.old.com - WordPress: SQL
UPDATE wp_posts SET post_content = REPLACE(post_content, "http://example.com", "https://example.com") - Bitrix: admin → Settings → Sites → change server_name and run "Convert links"
- Add header:
Content-Security-Policy: upgrade-insecure-requests;— upgrades HTTP → HTTPS automatically - Re-scan — should be 0 violations
Working Examples
| Scenario | Config / Record |
|---|---|
| nginx: CSP upgrade-insecure-requests | add_header Content-Security-Policy "upgrade-insecure-requests;" always; |
| Apache: .htaccess | Header set Content-Security-Policy "upgrade-insecure-requests;" |
| HTML meta fallback | <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests;"> |
| Protocol-relative URL | <img src="//cdn.example.com/logo.png"> (works on both HTTP and HTTPS) |
| WordPress plugin | Really Simple SSL — auto-replace + HSTS |
Common Pitfalls
- CSP upgrade-insecure-requests fails if the CDN itself does not serve HTTPS — resource 404s
<a href="http://...">is not mixed content, but UX suffers — replace everything- JavaScript
XMLHttpRequestto HTTP endpoints is blocked silently — verify manually - iframe with an HTTP source is active mixed content, blocked entirely by Chrome
- WebSocket ws:// on an HTTPS page is also blocked — use wss://
Why teams trust us
How it works
Enter page URL
Scan all resources
Find HTTP resources on HTTPS
What is Mixed Content?
Mixed Content is loading HTTP resources (images, scripts, CSS) on an HTTPS page. Browsers block active mixed content (JS, CSS) and warn about passive (images).
Resource Scanning
Find all HTTP resources on the page: scripts, styles, images, frames.
Threat Classification
Divide into active (critical) and passive (non-critical) mixed content.
Problem URL List
Each HTTP resource listed with type and fix recommendation.
Fast Check
Results in seconds — we check the page without full browser rendering.
Who uses this
Security
post-HTTPS migration audit
Developers
insecure resource detection
SEO
browser warning fixes
Sysadmins
third-party resource audit
Common Mistakes
// scheme everywhere to adapt to protocol.Content-Security-Policy: upgrade-insecure-requests automatically upgrades HTTP to HTTPS.Best Practices
src="/images/logo.png" instead of src="http://example.com/images/logo.png".Get more with a free account
Mixed content check history and HTTPS security monitoring.
Sign up freeLearn more
Frequently Asked Questions
Difference between active and passive mixed content?
Active — scripts, iframes, stylesheets, XHR — can execute code with the HTTPS page's privileges. Chrome blocks entirely. Passive — images, audio, video — only displayed. Warning but not blocked.
Can I disable the block?
Per-site in Chrome: Settings → Privacy → Site settings → Insecure content → Allowed for specific site. Dangerous in production — use only for dev.
Does upgrade-insecure-requests work everywhere?
Chrome 43+, Firefox 42+, Safari 10.1+. IE does not support it, but modern browsers cover 98% of traffic.
How do I prevent mixed content in new articles?
CMS plugin for auto-replace on save (WordPress: Really Simple SSL), Git pre-commit hook for content, CSP-report monitoring in production.