How to Fix Mixed Content Warnings on HTTPS

Mixed content happens when an HTTPS page loads resources (images, scripts, styles) over insecure HTTP. Browsers block or warn about these, breaking the padlock and often the page itself.

Why It Matters

• Browsers block active mixed content (scripts, iframes) outright — your page can break.
• The secure padlock disappears, hurting user trust and conversions.
• It is a negative trust/security signal for SEO.

Two Types

How to Find It

Open Chrome DevTools → Console. Mixed content shows as:

Mixed Content: The page at 'https://…' was loaded over HTTPS,
but requested an insecure resource 'http://…'. This request has been blocked.

How to Fix It

1. Update hardcoded HTTP URLs to HTTPS in your templates and content:

<!-- Before -->
<img src="http://example.com/logo.png">
<!-- After -->
<img src="https://example.com/logo.png">

2. Use protocol-relative or relative URLs where possible:

<img src="/images/logo.png">

3. Add a catch-all upgrade header to auto-upgrade insecure requests:

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

Or as an HTTP header:

Content-Security-Policy: upgrade-insecure-requests

4. Fix the database (WordPress). Old posts often store http:// URLs. Use a search-and-replace plugin or WP-CLI:

wp search-replace 'http://yoursite.com' 'https://yoursite.com'

Prevent It From Coming Back

• Add upgrade-insecure-requests to your CSP permanently.
• Ensure third-party embeds (maps, videos, ads) use HTTPS URLs.
• Redirect all HTTP to HTTPS at the server level with a 301.

Verify the Fix

Run your URL through SEO Snapshot — it checks your HTTPS setup and security headers, including whether a Content-Security-Policy is present to prevent mixed content.