When Chrome flags problems in its Issues panel, something's wrong with your site's security, privacy, or standards compliance. Lighthouse surfaces these issues because they indicate real problems that affect users.

What's Happening

Chrome's browser engine detects problems during page load: insecure resource loading, cookie configuration errors, cross-origin policy violations, and more. These aren't just warnings - they often mean features are broken or security is compromised.

Lighthouse collects these issues and fails the audit if any exist. The specific issues vary:

• Mixed content - HTTPS page loading HTTP resources
• Cookie issues - Missing SameSite, Secure flags, or other problems
• Blocked by cross-origin policy - Resources blocked due to CORS/CORP
• Heavy ads - Ad frames consuming excessive resources
• CSP violations - Content blocked by Content Security Policy

Diagnose

Chrome DevTools Issues Panel

1. Open DevTools (F12)
2. Click the Issues tab (might be in the overflow menu)
3. Reload the page
4. Review each issue - Chrome explains what's wrong and links to affected resources

Each issue includes:

• What triggered it
• Which resource/request is affected
• Link to documentation
• Sometimes specific remediation steps

Quick Console Check

// Issues don't appear in console by default
// Open the Issues panel or check Network tab for blocked requests

Look in the Network tab for:

• Requests with status (blocked:mixed-content)
• Requests with (blocked:csp)
• Failed CORS requests

Fix

1. Mixed Content

HTTPS pages loading HTTP resources. Browsers block these or warn users.

Symptoms: Images not loading, scripts failing, "Not Secure" warnings.

<!-- Bad: HTTP on HTTPS page -->
<img src="http://example.com/image.jpg">
<script src="http://cdn.example.com/lib.js"></script>

<!-- Good: HTTPS everywhere -->
<img src="https://example.com/image.jpg">
<script src="https://cdn.example.com/lib.js"></script>

<!-- Better: Protocol-relative (inherits page protocol) -->
<img src="//example.com/image.jpg">

Fix checklist:

1. Audit all external resources - images, scripts, stylesheets, fonts, iframes
2. Update URLs to HTTPS
3. For third-party resources, verify they support HTTPS
4. Add upgrade-insecure-requests header as backstop:

Content-Security-Policy: upgrade-insecure-requests

This tells browsers to automatically upgrade HTTP to HTTPS.

2. Cookie Issues

Modern browsers require explicit cookie configuration.

Common problems:

Set-Cookie: session=abc123

Fixed:

Set-Cookie: session=abc123; Secure; HttpOnly; SameSite=Lax; Path=/

Required attributes:

• Secure - Only send over HTTPS (required for SameSite=None)
• SameSite=Lax - Prevents CSRF, allows top-level navigation
• SameSite=Strict - Tighter, blocks all cross-site
• SameSite=None; Secure - Cross-site allowed (requires Secure)
• HttpOnly - JavaScript can't read (for session cookies)

Third-party cookies: If you embed widgets that set cookies, they need SameSite=None; Secure. Without it, cookies are blocked in cross-site contexts.

3. Cross-Origin Policy Blocks

Resources blocked due to CORS or CORP headers.

CORS issues:

Access to fetch at 'https://api.example.com/data' from origin 'https://mysite.com'
has been blocked by CORS policy

Fix on the server returning the resource:

Access-Control-Allow-Origin: https://mysite.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

Or for public APIs:

Access-Control-Allow-Origin: *

CORP issues:

Cross-Origin-Resource-Policy blocks embedding.

Cross-Origin-Resource-Policy: same-origin

Cross-Origin-Resource-Policy: same-site

Cross-Origin-Resource-Policy: cross-origin

For images/resources you want embeddable, use cross-origin.

4. Heavy Ads

Chrome intervenes when ad iframes use excessive CPU or network.

Thresholds:

• 4MB network usage
• 15 seconds CPU in 30-second window
• 60 seconds total CPU

Fix:

1. Contact your ad provider - they need to optimize
2. Use lighter ad formats
3. Lazy-load ads below the fold
4. Consider ad networks that enforce resource limits

You can't directly fix third-party ad code, but you can choose better providers.

5. Content Security Policy Violations

Resources blocked by your own CSP.

Refused to load the script 'https://analytics.example.com/track.js'
because it violates the Content-Security-Policy directive: "script-src 'self'"

Fix options:

A. Add source to CSP:

Content-Security-Policy: script-src 'self' https://analytics.example.com

B. Use nonce for inline scripts:

Content-Security-Policy: script-src 'nonce-abc123'

<script nonce="abc123">
  // Allowed
</script>

C. Review if the blocked resource is necessary:

Sometimes CSP correctly blocks unwanted scripts (injected by browser extensions, etc.).

Framework Examples

export default defineNuxtConfig({
  routeRules: {
    '/**': {
      headers: {
        'Content-Security-Policy': 'default-src \'self\'; script-src \'self\' \'unsafe-inline\'',
        'X-Content-Type-Options': 'nosniff'
      }
    }
  }
})

const session = useCookie('session', {
  secure: true,
  sameSite: 'lax',
  httpOnly: true
})

module.exports = {
  async headers() {
    return [{
      source: '/:path*',
      headers: [
        {
          key: 'Content-Security-Policy',
          value: 'default-src \'self\'; script-src \'self\' \'unsafe-inline\''
        }
      ]
    }]
  }
}

res.setHeader('Set-Cookie', 'session=value; Secure; HttpOnly; SameSite=Lax; Path=/')

Verify the Fix

1. Reload and check Issues panel - Should show no issues
2. Re-run Lighthouse - "No issues in the Issues panel" should pass
3. Check Network tab - No blocked requests

Test mixed content specifically:

// In console on your HTTPS page
performance.getEntriesByType('resource').forEach((r) => {
  if (r.name.startsWith('http://')) {
    console.warn('Mixed content:', r.name)
  }
})

Common Mistakes

• Protocol-relative URLs with local resources - //localhost:3000/api doesn't work, use full URLs.
• Overly strict CSP - Starting with default-src 'self' and wondering why everything breaks. Build CSP incrementally.
• Forgetting Secure on SameSite=None - Cookies with SameSite=None absolutely require Secure flag.
• Ignoring third-party issues - If an embedded widget causes issues, either fix its integration or remove it.

Test Your Entire Site

Issues often appear only on specific pages - a blog post with an old HTTP image, a landing page with a misconfigured embed. Unlighthouse audits every page and surfaces browser issues across your entire site.

Related

• All Best Practices Issues
• Best Practices Overview