![](\"https://cdn.example.com/logo.png\"){kind=logo}
\n\n\n\n"}]}Mixed Content: HTTP resource blocked on an HTTPS page
The error
Mixed Content: The page at 'https://yoursite.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.
What it means
A script, image, fetch, or iframe on your HTTPS page tried to load over plain HTTP. The browser blocks it to protect users.
When a page loads over HTTPS, every subresource it loads must also be HTTPS. An HTTP image, iframe, or fetch downgrades the security guarantees of the whole page, so browsers refuse.
The fix
<!-- BAD -->
<img src="http://cdn.example.com/logo.png" />
<script src="http://analytics.example.com/tag.js"></script>
<!-- FIX: upgrade to https -->
<img src="https://cdn.example.com/logo.png" />
<script src="https://analytics.example.com/tag.js"></script>
<!-- Or upgrade automatically with CSP -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">Also check
Common adjacent root causes when the obvious fix doesn’t work.
- 01Fetch calls in JS using string URLs — search for "http:" across your codebase.
- 02Third-party widgets that hardcode HTTP URLs internally — open an issue with the vendor or replace.
- 03Old database rows storing user-uploaded image URLs as http:// — backfill to https://.
Scan for related issues
This error is in our ssl scanner. Run a free scan to find what else is misconfigured in the same area.
FAQ
Frequently asked questions
- Can I just allow mixed content for now?
- No browser exposes a stable user toggle. Even Chrome flags are removed. The right fix is upgrading every resource to HTTPS, which has been the default for ~5 years.
- What about the upgrade-insecure-requests CSP directive?
- It tells the browser to silently upgrade http:// subresources to https://. It works only if the destination supports HTTPS — otherwise the request fails. A useful safety net but not a substitute for fixing source URLs.
Related fixes
Tighten this area further
Mixed content warnings
Loading HTTP resources from an HTTPS page breaks the security guarantee. Browsers block most of it automatically now — here is how to fix the rest.
Read moreMissing CSP header
A missing Content-Security-Policy header lets attackers inject scripts into your site. Here is what CSP does, why you need it, and how to add it in Next.js, Vercel, and Supabase apps.
Read more