Mixed Content: How to Find and Fix HTTP Resources on HTTPS Sites

Mixed Content: How to Find and Fix HTTP Resources on HTTPS Sites

Mixed content happens when an SSL/TLS проверку page loads resources (images, scripts, styles, iframes) over plain HTTP. Modern browsers either block such resources (active mixed content — scripts, styles) or warn about them (passive — images, media). In this guide we'll show how to find all issues automatically, fix them in code, and catch new ones via Content-Security-Policy.

Active vs Passive mixed content: what gets blocked

• Active (blockable): <script>, <link rel="stylesheet">, <iframe>, XHR/fetch, WebSocket. Blocked completely — console shows “Mixed Content: The page was loaded over HTTPS, but requested an insecure resource”.
• Passive (upgradable): <img>, <audio>, <video>. Since 2020 Chrome auto-upgrades them to HTTPS; if the server doesn't answer, the image just fails to load.

Either way it's bad UX: broken layout, missing analytics, the padlock turns into “Not secure”. Users leave.

Find mixed content in 5 minutes

Fastest way — Chrome DevTools:

1. Open the page, F12 → Console.
2. Filter “Issues” or search for “Mixed Content”.
3. The Security tab shows TLS status and a list of insecure resources.

For a site-wide scan:

# grep across sources
grep -rn "http://" public/ --include="*.html" --include="*.js" --include="*.css"

# crawl with URL check
wget --spider -r -l 3 --no-verbose https://example.com 2>&1 | grep "http://"

Online tools: Enterno.io Security Scanner finds mixed content, outdated cipher suites, and header issues in one scan. Also check TLS config via SSL Checker.

The fix: use proper URLs

Golden rule — always use HTTPS absolute URLs:

<!-- Bad -->
<img src="http://cdn.example.com/logo.png">
<script src="http://analytics.com/tracker.js"></script>

<!-- Good -->
<img src="https://cdn.example.com/logo.png">
<script src="https://analytics.com/tracker.js"></script>

<!-- Acceptable (inherits page protocol) -->
<img src="//cdn.example.com/logo.png">

Protocol-relative syntax (//cdn...) is considered legacy today — prefer explicit https://. Better readability and won't break when you open files from local disk.

Automatic upgrade: upgrade-insecure-requests

If there are hundreds of HTTP links and you can't rewrite them all at once — add a CSP directive that auto-upgrades every request:

# HTTP header (preferred)
Content-Security-Policy: upgrade-insecure-requests

# Or in meta
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Caveat: upgrade-insecure-requests only works if the target server answers over HTTPS. Otherwise the resource still fails — just with ERR_SSL_PROTOCOL_ERROR instead of mixed content. Use as a temporary bandaid while you clean up.

Blocking and CSP reporting

Stricter option — block-all-mixed-content (superseded by upgrade-insecure-requests in modern browsers but works as fallback):

Content-Security-Policy: block-all-mixed-content; report-uri /csp-report

With report-uri or report-to you get JSON reports for every violation. Best way to catch mixed content hidden in rarely-visited sections or user content. More on CSP — HSTS and preload and the headers section of Security Scanner.

Common sources of mixed content

• Hardcoded URLs in DB: old WordPress/CMS records with http:// img src. Fix with SQL migration: UPDATE posts SET content = REPLACE(content, 'http://example.com', 'https://example.com').
• Third-party widgets: old YouTube, Vimeo, analytics embeds. Update the embed code.
• CDN without HTTPS: rare but happens. Switch CDN or get a cert.
• Internal API документацию: frontend calls http://api.example.com. Enable HTTPS on all internal endpoints.
• User-uploaded images: uploaded long ago to HTTP hosts. Proxy via your domain or re-upload.

Post-fix verification

1. DevTools Console — zero “Mixed Content” warnings.
2. Enterno.io Security Scanner — grade A.
3. curl -sI https://example.com | grep -i content-security-policy — header present.
4. CSP report endpoint — no new violations for a week.

Frequently asked questions

Does an HTTP image really hurt security?

Directly no — passive mixed content can't run code. Indirectly yes — attackers can swap images (e.g. your bank logo) or use them for tracking. That's why browsers still auto-upgrade everything.

A third-party widget serves its iframe over HTTP — what do I do?

It will be fully blocked. Contact the vendor and demand HTTPS. If it's a legacy service without HTTPS — find an alternative; CSP can't help.

Can I disable mixed content checks in the browser?

In Chrome click the padlock → Site settings → Insecure content → Allow, but only in your browser and only for debugging. Useless in prod.

Does upgrade-insecure-requests work for XHR/fetch?

Yes, for all page-initiated requests including fetch, XHR, WebSocket. But not for user navigation via links — that needs HSTS.

Conclusion

Mixed content is fixable in an hour: find HTTP URLs via DevTools or a crawler, replace with HTTPS, turn on upgrade-insecure-requests and CSP reporting to prevent regressions. The enterno.io Security Scanner shows all page security issues in one click, and Monitors detects header regressions after the next deploy.

CSP spec — W3C CSP3. Mixed Content — W3C Mixed Content. Audit — Mozilla Observatory.