Your site loads resources over insecure HTTP, exposing users to man-in-the-middle attacks and blocking access to modern browser APIs.

What's Happening

Lighthouse detects network requests using http:// instead of https://. This happens when your HTML references assets with explicit HTTP URLs, protocol-relative URLs that resolve to HTTP, or when third-party resources lack HTTPS support. Mixed content—loading HTTP resources on an HTTPS page—triggers browser warnings and can be blocked entirely.

HTTPS prevents attackers from intercepting or modifying data between your server and users. Beyond security, it's a prerequisite for HTTP/2, Service Workers, geolocation, camera access, and most modern web platform APIs.

Diagnose

Chrome DevTools

1. Open DevTools (F12) and go to the Security tab
2. Check the "Security Overview" for warnings about mixed content
3. Switch to Network tab and filter by mixed-content:displayed or mixed-content:blockable
4. Look for the padlock icon in the address bar—a warning triangle indicates mixed content

Console Warnings

Mixed content appears in the Console as:

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

Fix

1. Update All Resource URLs to HTTPS

Find and replace HTTP references in your codebase.

<!-- Before -->
<script src="http://cdn.example.com/lib.js"></script>
<img src="http://images.example.com/photo.jpg">
<link href="http://fonts.googleapis.com/css?family=Roboto">

<!-- After -->
<script src="https://cdn.example.com/lib.js"></script>
<img src="https://images.example.com/photo.jpg">
<link href="https://fonts.googleapis.com/css?family=Roboto">

For URLs in JavaScript:

// Before
const API_URL = 'http://api.example.com'

// After
const API_URL = 'https://api.example.com'

Use protocol-relative URLs only if you still need HTTP support (rare):

<!-- Works on both HTTP and HTTPS, but prefer explicit HTTPS -->
<script src="//cdn.example.com/lib.js"></script>

2. Add Content Security Policy

Enforce HTTPS at the browser level with CSP headers:

Content-Security-Policy: upgrade-insecure-requests

This tells browsers to automatically upgrade HTTP requests to HTTPS. Configure it on your server:

add_header Content-Security-Policy "upgrade-insecure-requests" always;

// Vercel/Next.js - next.config.js
module.exports = {
  headers: async () => [{
    source: '/(.*)',
    headers: [{
      key: 'Content-Security-Policy',
      value: 'upgrade-insecure-requests'
    }]
  }]
}

// Nuxt - nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/**': {
      headers: {
        'Content-Security-Policy': 'upgrade-insecure-requests'
      }
    }
  }
})

3. Handle Third-Party Resources

If a third-party service doesn't support HTTPS:

1. Find an alternative — Most reputable services support HTTPS
2. Self-host — Download the resource and serve it from your own HTTPS domain
3. Proxy — Route requests through your server (adds latency)

// Proxying an insecure API through your backend
// /api/proxy-legacy.js
export default async function handler(req, res) {
  const data = await fetch('http://legacy-api.example.com/data')
  res.json(await data.json())
}

Verify the Fix

1. Open Chrome DevTools Security tab—should show "This page is secure"
2. Check the Network tab with filter mixed-content:all—should return no results
3. Run Lighthouse—"Uses HTTPS" audit should pass
4. Test in incognito mode to ensure no cached resources skew results

Common Mistakes

• Forgetting database content — URLs stored in CMS databases or user-generated content may contain HTTP links. Run a database migration or use CSP upgrade-insecure-requests as a safety net.
• Hardcoded URLs in CSS — Background images and font URLs in stylesheets are easy to miss:

  /* Check your CSS files for http:// URLs */
  background: url(http://example.com/bg.png);
  

• Ignoring iframes — Embedded content like widgets, videos, or ads may load over HTTP. Contact the provider or find HTTPS alternatives.
• Development vs production confusion — Using HTTP localhost URLs that get deployed. Use environment variables for API endpoints.

Related Issues

HTTPS issues often appear alongside:

• HTTP Redirects — HTTP requests should redirect to HTTPS
• Console Errors — Mixed content warnings appear as errors
• DevTools Issues — Security warnings appear in Issues tab

Test Your Entire Site

Mixed content issues often hide on less-visited pages—embedded videos on blog posts, legacy image galleries, or user-generated content. Scan your entire site to catch every insecure request before users encounter browser warnings.

Related

• All Best Practices Issues
• Best Practices Overview