Mixed Content: How to Find and Fix Insecure Resources on HTTPS Sites

You've enabled HTTPS on your website — great. But if your pages still load images, scripts, stylesheets, or other resources over plain HTTP, you have a mixed content problem. Mixed content undermines the security guarantees of HTTPS and can expose your users to man-in-the-middle attacks, even on an otherwise encrypted site.

What Is Mixed Content?

Mixed content occurs when an HTTPS page loads sub-resources over an insecure HTTP connection. Browsers classify mixed content into two categories:

Passive (Display) Mixed Content

Resources that cannot directly alter the DOM or intercept user actions:

• Images loaded via <img> tags
• Audio and video via <audio> and <video> tags
• Object and embed elements

Browsers typically display a warning but still load these resources. An attacker on the network can swap the image for a malicious one (e.g., replacing a "payment confirmed" image with a fake).

Active Mixed Content

Resources that can interact with the page and modify behavior:

• Scripts (<script src="http://...">)
• Stylesheets (<link rel="stylesheet" href="http://...">)
• Iframes (<iframe src="http://...">)
• Fetch and XMLHttpRequest calls to HTTP endpoints
• Web fonts loaded over HTTP

Modern browsers block active mixed content entirely because a man-in-the-middle could inject arbitrary JavaScript into your page.

Why Mixed Content Is Dangerous

Even passive mixed content is a security risk:

• Session hijacking: HTTP requests include cookies that can be intercepted on public Wi-Fi
• Content spoofing: Attackers can replace images or media to mislead users
• Privacy leakage: HTTP requests reveal which pages the user visits
• Broken padlock: Browser warnings erode user trust in your site
• SEO impact: Search engines penalize sites with mixed content warnings

How to Find Mixed Content

Browser DevTools

Open DevTools (F12), go to the Console tab, and look for mixed content warnings. Chrome shows messages like:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure resource 'http://cdn.example.com/image.jpg'.

Content-Security-Policy Reporting

Use CSP to automatically report mixed content without blocking:

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

This sends a JSON report to your endpoint whenever a resource would violate the HTTPS-only policy.

Automated Scanning

Run a SecScanner scan on your site — the Mixed Content check automatically detects HTTP resources loaded on HTTPS pages, including dynamically loaded content that manual browsing might miss.

How to Fix Mixed Content

Step 1: Update Resource URLs to HTTPS

The simplest fix is changing http:// URLs to https://:

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

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

Step 2: Use Protocol-Relative URLs

For resources that must work on both HTTP and HTTPS (rare in 2026), use protocol-relative URLs:

<img src="//cdn.example.com/logo.png">

However, prefer explicit https:// since all modern CDNs support HTTPS.

Step 3: Use upgrade-insecure-requests CSP Directive

This CSP directive tells browsers to automatically upgrade HTTP requests to HTTPS:

Content-Security-Policy: upgrade-insecure-requests

This is a safety net, not a permanent fix. Update your source code to use HTTPS URLs directly.

Step 4: Audit Third-Party Dependencies

Check that all third-party resources support HTTPS:

• CDN-hosted libraries (jQuery, Bootstrap, fonts)
• Analytics and tracking pixels
• Advertising scripts
• Embedded widgets and iframes

Preventing Future Mixed Content

• Add upgrade-insecure-requests to your Content-Security-Policy header
• Enable HSTS to force HTTPS on all connections
• Use automated CI/CD checks to scan for HTTP URLs in your codebase
• Configure your CMS to generate HTTPS URLs by default
• Schedule regular SecScanner scans to catch mixed content from new deployments

Mixed Content Checklist

• Search your codebase for all http:// resource URLs
• Update image, script, and stylesheet references to HTTPS
• Verify all third-party CDNs and APIs support HTTPS
• Add the upgrade-insecure-requests CSP directive as a safety net
• Enable HSTS to prevent protocol downgrade attacks
• Test with browser DevTools — zero mixed content warnings
• Run a SecScanner scan to verify no mixed content remains

Mixed content is one of the most common HTTPS misconfigurations, but also one of the easiest to fix. A systematic approach to finding and updating insecure URLs ensures your encryption is truly end-to-end.