Step-by-Step Guide
6 steps

How to Fix Mixed Content Warnings

Mixed content occurs when an HTTPS page loads resources over HTTP. Browsers block or warn about these requests because they compromise the security of the HTTPS connection. This guide shows you how to find and fix every mixed content issue.

Scan Your App Now

Find security issues automatically before attackers do.

Follow These Steps

1

Identify mixed content issues

Open browser DevTools Console and look for mixed content warnings.

Code Example
// Open DevTools (F12) > Console tab
// Look for warnings like:
// "Mixed Content: The page was loaded over HTTPS but requested an insecure resource http://..."

// Or use CSP to report mixed content
// Content-Security-Policy-Report-Only: upgrade-insecure-requests; report-uri /api/csp-report
2

Update all hardcoded HTTP URLs to HTTPS

Search your codebase for http:// URLs and update them.

Code Example
# Find HTTP URLs in your code
grep -rn "http://" src/ --include="*.ts" --include="*.tsx" --include="*.css" --include="*.html"

# Common places to check:
# - Image src attributes
# - CSS url() values
# - API endpoint URLs
# - External script/link tags
# - Database-stored URLs
3

Use protocol-relative or HTTPS URLs

For external resources, always use HTTPS or protocol-relative URLs.

Code Example
// BAD - hardcoded HTTP
<img src="http://example.com/image.jpg" />
<link href="http://fonts.googleapis.com/css" />

// GOOD - HTTPS
<img src="https://example.com/image.jpg" />
<link href="https://fonts.googleapis.com/css" />

// ACCEPTABLE - protocol-relative (uses same protocol as page)
<img src="//example.com/image.jpg" />
4

Add upgrade-insecure-requests CSP directive

This header tells browsers to automatically upgrade HTTP requests to HTTPS.

Code Example
// Add to your security headers
Content-Security-Policy: upgrade-insecure-requests

// In next.config.js
{ key: 'Content-Security-Policy', value: 'upgrade-insecure-requests' }

This is a safety net, not a replacement for fixing URLs. Fix the URLs and use this as backup.

5

Fix mixed content in database-stored URLs

If URLs are stored in your database with http://, update them.

Code Example
-- Update stored URLs
UPDATE posts SET image_url = REPLACE(image_url, 'http://', 'https://')
WHERE image_url LIKE 'http://%';
6

Verify all mixed content is resolved

Reload the page and check DevTools Console for any remaining warnings.

Run a VAS scan which automatically checks for mixed content issues.

What You'll Achieve

All resources are loaded over HTTPS. Mixed content warnings are eliminated. The upgrade-insecure-requests directive provides a safety net for any missed URLs.

Common Mistakes to Avoid

Mistake

Only fixing visible mixed content

Fix

Check CSS files, JavaScript imports, fonts, and API calls too. Mixed content can come from any resource type.

Mistake

Using upgrade-insecure-requests as the only fix

Fix

This directive is a safety net. Fix the actual URLs because not all browsers support it, and the upgrade may fail if the resource is not available over HTTPS.

Frequently Asked Questions

What is mixed content?

Mixed content occurs when an HTTPS page loads subresources (images, scripts, stylesheets) over HTTP. This compromises the security guarantees of HTTPS because the HTTP resources can be intercepted or modified.

Will mixed content break my site?

Browsers block mixed content scripts and may block or warn about mixed content images. This can cause missing images, broken functionality, and security warnings that erode user trust.

Related Guides

Implement HTTPS CorrectlyAdd Security Headers in Next.jsAdd CSP HeaderSecurity Audit Checklist

Ready to Secure Your App?

VAS automatically scans your deployed app for the security issues covered in this guide. Get actionable results in minutes.

Start Security Scan