Troubleshooting2026-08-15•4 min read

Mixed Content Errors: HTTPS Pages Loading HTTP Resources

· CSR.plus Team

•Browsers block HTTP resources on HTTPS pages to protect the page from downgrade attacks.
•Use the browser console to list every blocked URL, then fix the source: relative URLs, protocol-relative URLs, or a CSP upgrade header.
•Content Security Policy’s upgrade-insecure-requests can fix many pages without editing code.

All active

Blocked types

scripts, iframes, fetch

DevTools

Console tool

lists every blocked request

CSP

One-line fix

upgrade-insecure-requests

Relative URLs

Best fix

// or //host paths

How mixed content works

A page served over HTTPS inherits a secure context. Any subresource loaded over plain HTTP — images, CSS, scripts, fonts, iframes, fetch/XHR — breaks that context. Browsers block "active" mixed content (scripts, iframes, fetch) entirely, and increasingly also block images and audio. The browser console logs each blocked URL with a clear message.

Finding every occurrence

Open DevTools > Console, filter for "Mixed Content", and copy each blocked URL. Then search your codebase for http:// references to those hosts. The most robust fix is to use protocol-relative URLs (//cdn.example.com/x.js) or plain relative paths, so the browser chooses the correct scheme automatically.

The CSP one-liner

Add the header Content-Security-Policy: upgrade-insecure-requests to tell the browser to rewrite http:// subresources to https:// instead of blocking them. This works for most static pages. For hardcoded http:// API endpoints that do not offer HTTPS, you must change the code — there is no client-side workaround.