Mixed Content Errors: How to Find and Fix Them

What Is Mixed Content?

Mixed content occurs when an HTTPS page loads sub-resources (images, scripts, stylesheets, fonts, iframes) over plain HTTP. This undermines the security that HTTPS provides because those HTTP resources can be intercepted and modified by an attacker on the network.

Browsers split mixed content into two categories:

• Active mixed content (scripts, stylesheets, iframes, XHR/fetch) — Blocked by all modern browsers. This breaks functionality.
• Passive mixed content (images, audio, video) — Shows a warning but may still load. Still a security risk.

Why It Happens

Mixed content typically appears after migrating from HTTP to HTTPS. Common causes:

• Hardcoded HTTP URLs in HTML, CSS, or JavaScript
• Third-party embeds that only serve HTTP (rare now, but happens)
• CMS content with absolute HTTP image URLs stored in the database
• CDN or asset URLs still pointing to HTTP endpoints
• Inline styles with background-image: url(http://...)

How to Find Mixed Content

1. Browser DevTools

Open Chrome DevTools (F12) → Console. Mixed content warnings appear as yellow or red messages. The Network tab also flags mixed requests with a warning icon.

2. Run a WebSentry Scan

WebSentry's audit automatically detects mixed content across your pages. It checks every loaded resource and reports exactly which URLs are being loaded over HTTP.

3. CSP Report-Only Mode

Deploy a Content-Security-Policy-Report-Only header to catch mixed content across your entire site without blocking anything:

Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-report

This sends violation reports to your endpoint whenever an HTTP resource is loaded, giving you a complete picture across all pages.

How to Fix Mixed Content

Quick Wins

1. Protocol-relative URLs — Replace http:// with //. The browser will match the page's protocol. However, explicit https:// is preferred.
2. Search and replace — Find all instances of http:// in your codebase and replace with https://.
3. Upgrade-Insecure-Requests — Add this CSP directive to automatically upgrade HTTP requests to HTTPS:

Content-Security-Policy: upgrade-insecure-requests

This is a powerful catch-all — the browser will attempt HTTPS for every sub-resource that would otherwise load over HTTP. It's the fastest way to fix mixed content site-wide.

CMS and Database Fixes

For WordPress or other CMS platforms with HTTP URLs stored in the database:

• Use a search-replace tool like WP-CLI: wp search-replace 'http://yourdomain.com' 'https://yourdomain.com'
• Update your site URL settings in the CMS admin
• Check uploaded media URLs — they often retain the protocol from when they were uploaded

Third-Party Resources

If a third-party resource doesn't support HTTPS:

• Host the resource yourself over HTTPS
• Find an alternative provider that supports HTTPS
• Use a proxy to serve it through your HTTPS domain

Preventing Mixed Content

After fixing existing issues, prevent them from returning:

• Set Content-Security-Policy: upgrade-insecure-requests as a permanent header
• Enable HSTS to ensure your domain always uses HTTPS
• Use relative URLs or https:// in all new content
• Set up regular WebSentry scans to catch regressions