Mixed Content Blocked

What mixed content is

A page loaded over HTTPS trying to load any resource — images, scripts, stylesheets, fonts — over HTTP. Browsers block active mixed content (scripts, stylesheets) and increasingly block passive content (images) too.

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

This header automatically rewrites all HTTP subresource URLs to HTTPS. No code changes needed — the browser handles the upgrade:

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

This works if the resources actually exist over HTTPS. If a CDN only serves over HTTP, the upgraded request will fail.

Fix 2 — Cloudflare Automatic HTTPS Rewrites

Dashboard → SSL/TLS → Edge Certificates → Automatic HTTPS Rewrites: Enable. Cloudflare rewrites HTTP URLs to HTTPS at the edge before delivering to the browser.

Fix 3 — Fix the source URLs

The proper fix is updating the URLs in your HTML, CSS, or database to use https://:

# WordPress — search and replace in database
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');

Finding all mixed content

Open DevTools → Console — mixed content warnings appear there with the exact URL. Or check the Network tab and filter by HTTP scheme.

# Check for HTTP resources in your HTML
grep -r 'src="http://' ./public/
grep -r "href='http://" ./public/