How to Fix Mixed Content — HTTP Resources on HTTPS Pages

Mixed content happens when an HTTPS page loads resources — scripts, stylesheets, images — over HTTP. Browsers block active mixed content (scripts, CSS) entirely and warn about passive content (images). The fix is one header or one dashboard toggle.

What mixed content looks like in the console

Mixed Content: The page at 'https://example.com' was loaded over HTTPS,
but requested an insecure resource 'http://cdn.example.com/script.js'.
This request has been blocked; the content must be served over HTTPS.

Fix 1 — upgrade-insecure-requests CSP (fastest)

One header upgrades all HTTP subresource requests to HTTPS automatically. No HTML changes required.

# Nginx
add_header Content-Security-Policy "upgrade-insecure-requests" always;

# Apache .htaccess
Header always set Content-Security-Policy "upgrade-insecure-requests"

# Alongside existing CSP
add_header Content-Security-Policy "default-src 'self'; upgrade-insecure-requests; [your other directives]" always;

Fix 2 — Cloudflare Automatic HTTPS Rewrites

Cloudflare rewrites HTTP URLs in HTML, CSS, and JavaScript responses at the edge — no server changes needed.

Dashboard → SSL/TLS → Edge Certificates
→ Automatic HTTPS Rewrites: Enable

Fix 3 — Vercel

// vercel.json
{ "headers": [ { "source": "/(.*)", "headers": [ { "key": "Content-Security-Policy", "value": "upgrade-insecure-requests" } ] } ]
}

Fix 4 — WordPress

WordPress stores URLs in the database. Most mixed content in WordPress comes from old HTTP URLs in post content.

// Option 1 — Really Simple SSL plugin (handles most cases automatically)

// Option 2 — Database search/replace
// WP Admin → Tools → run this SQL in phpMyAdmin:
UPDATE wp_posts
SET post_content = REPLACE(post_content, 'http://yoursite.com', 'https://yoursite.com');

UPDATE wp_options
SET option_value = REPLACE(option_value, 'http://yoursite.com', 'https://yoursite.com')
WHERE option_name IN ('siteurl', 'home');

Active vs passive mixed content

Fix active mixed content first — it breaks functionality. Passive mixed content is a security risk (MITM can replace images) but doesn't break the page.

Finding all mixed content

Open DevTools → Console and look for "Mixed Content" warnings. Each warning shows the exact HTTP URL causing the issue. Or use the Mixed Content Fixer — paste your page HTML and it finds all HTTP resources automatically.