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

Your page is served over HTTPS, but it’s trying to load something over HTTP. Browsers block this for security.

What Mixed Content Is

When your HTTPS page loads resources (scripts, images, API calls, fonts) over plain HTTP, that’s “mixed content.” Browsers block it because an attacker could intercept the HTTP request and inject malicious content into your secure page.

Two types:

• Active mixed content (blocked): scripts, iframes, fetch/XHR requests, CSS
• Passive mixed content (warning): images, audio, video — may still load but show a warning

Fix 1: Change HTTP URLs to HTTPS

The simplest fix — update the URLs:

<!-- ❌ Before -->
<script src="http://cdn.example.com/lib.js"></script>
<img src="http://images.example.com/photo.jpg" />

<!-- ✅ After -->
<script src="https://cdn.example.com/lib.js"></script>
<img src="https://images.example.com/photo.jpg" />

For API calls:

// ❌
fetch('http://api.example.com/data')

// ✅
fetch('https://api.example.com/data')

Fix 2: Use Protocol-Relative URLs

<!-- Automatically uses the same protocol as the page -->
<script src="//cdn.example.com/lib.js"></script>

This uses HTTPS if your page is HTTPS, HTTP if HTTP. Works but explicit HTTPS is preferred.

Fix 3: Add a Content Security Policy

Force the browser to upgrade all HTTP requests to HTTPS:

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

Or as a server header:

Content-Security-Policy: upgrade-insecure-requests

This automatically rewrites http:// to https:// for all resources. Quick fix if you have many URLs to update.

Fix 4: The External Resource Doesn’t Support HTTPS

If the resource you’re loading doesn’t have HTTPS:

1. Host it yourself — download the file and serve it from your own HTTPS domain
2. Use a proxy — route the request through your backend
3. Find an alternative — most legitimate services support HTTPS in 2026

Finding All Mixed Content

Browser DevTools:

1. Open DevTools (F12)
2. Go to Console tab
3. Look for mixed content warnings/errors
4. The Network tab also shows blocked requests in red

Search your codebase:

grep -r "http://" src/ --include="*.html" --include="*.js" --include="*.css"

Common Causes

• Hardcoded HTTP URLs in old code or CMS content
• Third-party scripts loaded over HTTP
• API endpoints using HTTP
• Images from external sources with HTTP URLs
• Fonts loaded from HTTP CDNs