Fix Mixed Content and HTTPS Errors on Netlify

$ Mixed Content: The page was loaded over HTTPS, but requested an insecure resource

Also appears as:

  • Blocked loading mixed active content
  • This request has been blocked; the content must be served over HTTPS
  • NET::ERR_CERT_COMMON_NAME_INVALID
  • SSL certificate problem on Netlify

Symptoms

  • Browser console shows mixed content warnings
  • Images, scripts, or API calls fail after adding a custom domain
  • Site shows 'Not Secure' in the browser bar despite HTTPS being enabled
  • Some resources load but others are blocked

What Causes This Error

Hardcoded HTTP URLs in your code

Common

Your source code, CMS content, or database contains URLs that start with 'http://' instead of 'https://'. When your site is served over HTTPS, browsers block these insecure requests.

SSL certificate not yet provisioned

Common

After adding a custom domain, Netlify automatically provisions a Let's Encrypt SSL certificate. This can take a few minutes. During this time, HTTPS may not work correctly.

DNS not properly configured

Occasional

If your DNS records don't point correctly to Netlify, the SSL certificate can't be provisioned. This often happens with CNAME or A record misconfigurations.

External resources served over HTTP

Occasional

Third-party resources (fonts, scripts, images, APIs) that don't support HTTPS will cause mixed content warnings when your site is on HTTPS.

How to Fix It

Fix 1: Replace HTTP URLs with HTTPS

  1. Search your codebase for 'http://' URLs
  2. Replace them with 'https://' or use protocol-relative '//' URLs
  3. Check your CMS content and database for HTTP URLs
  4. Update any hardcoded API endpoints
Find HTTP URLs in your codebase
grep -r 'http://' src/ --include='*.{js,ts,jsx,tsx,html,css}'

Verify: Open the browser console (F12) and check that no mixed content warnings appear.

Fix 2: Wait for SSL certificate provisioning

  1. Go to Site settings > Domain management in Netlify
  2. Check if the SSL certificate status shows 'Provisioning'
  3. Wait up to 24 hours for automatic provisioning
  4. If it's stuck, click 'Renew certificate' or 'Provision certificate'

Verify: Visit your site with https:// and verify the lock icon appears in the browser bar.

Fix 3: Fix DNS configuration

  1. In Netlify, go to Site settings > Domain management
  2. Check the DNS configuration instructions
  3. Update your DNS records at your registrar to match Netlify's requirements
  4. Wait for DNS propagation (can take up to 48 hours)
Required DNS records
# For apex domain (example.com):
A record → 75.2.60.5

# For subdomain (www.example.com):
CNAME → your-site.netlify.app

Verify: Use 'dig example.com' to verify DNS records resolve to Netlify's servers.

Fix 4: Add Content Security Policy headers

  1. Add a Content-Security-Policy header to enforce HTTPS
  2. Use the 'upgrade-insecure-requests' directive to automatically upgrade HTTP to HTTPS
  3. Add this to your netlify.toml or _headers file
netlify.toml
[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "upgrade-insecure-requests"

Verify: Reload the page and verify HTTP resources are automatically upgraded to HTTPS.

How to Prevent This

1.

Always use HTTPS URLs or protocol-relative URLs in your code from the start.

2.

Set up your custom domain and SSL before going live to avoid mixed content issues.

3.

Add Content-Security-Policy headers to enforce HTTPS across your entire site.

4.

Use the Netli.fyi app to monitor your site's SSL certificate status and domain configuration.

5.

Test your site in the browser's developer console after every deploy to catch mixed content warnings early.

Perttu Lähteenlahti

Perttu Lähteenlahti

Developer Advocate at RevenueCat and creator of Netli.fyi. Building on Netlify since 2019. Writes from hands-on experience deploying dozens of production sites.

Manage Netlify on the go

Download Netli.fyi and monitor your sites, check deploys, and manage your projects from anywhere.

Google Play