How to fix mixed content warnings (HTTP resources on HTTPS page)
Your HTTPS page loads images, scripts, or stylesheets over plain HTTP. Browsers block most "active" mixed content (scripts, iframes) and warn about "passive" mixed content (images). The mixed resources break your HTTPS guarantee — an attacker on the network can modify them. Fix it by updating all resource URLs to `https://` or protocol-relative `//`, and add a `Content-Security-Policy: upgrade-insecure-requests` directive as a safety net.
Why it matters
Mixed content is how old MITM attacks stayed relevant. Even if the browser blocks the execution, the presence of mixed content breaks HTTPS trust indicators (no green padlock) and can hurt SEO.
How to check
- 01Open DevTools → Console. Look for "Mixed Content" warnings.
- 02Or use the Security tab in DevTools to see the page verdict.
Or let SafeToShip check it for you in 60 seconds:
How to fix it
Find and replace
Search your codebase for `http://` in resource URLs and replace with `https://`.
Auto-upgrade
Add this CSP directive. Browsers will automatically upgrade http:// subresource URLs to https://.
Content-Security-Policy: upgrade-insecure-requestsAI prompt
Copy-paste into your AI tool
Paste this prompt into Cursor, Lovable, Bolt, v0, or Claude Code and it will walk through the fix for your specific codebase.
My site shows mixed content warnings in DevTools. Find every `http://` URL in my codebase (image srcs, script tags, stylesheets, link tags, even in CSS @import) and change to `https://`. Also add `upgrade-insecure-requests` to my Content-Security-Policy header as a safety net.FAQ
Frequently asked questions
- What if the third-party resource has no HTTPS version?
- Find a different provider. Every reputable CDN supports HTTPS. If the resource is yours, enable HTTPS on that server.
Related fix guides
Fix these too
Missing HSTS header
HSTS tells browsers to always use HTTPS for your site. Without it, users can be downgraded to HTTP and have sessions stolen. Here is how to add HSTS on Vercel, Next.js, and other hosts.
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 moreExpired SSL certificate
An expired certificate breaks your site — browsers show a big red warning. Here is how to renew and set up auto-renewal.
Read moreLearn the concepts
Glossary
SSL / TLS
The encryption protocols that power HTTPS. TLS 1.2 and 1.3 are current; older versions are deprecated.
Read moreContent Security Policy
CSP is a browser feature that tells your site which scripts, styles, and images are allowed to run. It is the main defense against cross-site scripting (XSS).
Read morePlatform guides
Building on these platforms?
Next.js security
Next.js is the most popular React framework, but even experienced developers miss security headers and accidentally expose server files in production.
Read moreVercel security
Vercel handles hosting and SSL, but your application code still needs security hardening. Missing CSP headers and exposed environment variables are the top issues.
Read moreScan your site for this and 50+ other issues
Free scan. Results in 60 seconds. No account required.