---
title: "Fix Chrome DevTools Issues for Better Best Practices Score"
description: "Resolve browser-detected problems including mixed content, cookie issues, CSP violations, and cross-origin blocks that appear in Chrome's Issues panel."
canonical_url: "https://unlighthouse.dev/learn-lighthouse/best-practices/inspector-issues"
last_updated: "2025-01-18"
---

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

### 2025 Watchlist: Deprecations & Compliance

The Issues panel is your early warning system for upcoming platform changes.

- **Schema Deprecations:** Watch for warnings about **Course Info**, **Vehicle Listing**, and **Practice Problems** schema, which Google is sunsetting in September 2025.
- **Accessibility Compliance:** With the **European Accessibility Act 2025** taking effect, accessibility issues flagged here are now potential legal compliance risks for any site doing business in the EU.

## 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
- Specific remediation steps

### Quick Console Check

```js
// 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.

```html
<!-- 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:

```http
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:**

```http
Set-Cookie: session=abc123
```

**Fixed:**

```http
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:**

```text
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:**

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

Or for public APIs:

```http
Access-Control-Allow-Origin: *
```

**CORP issues:**

Cross-Origin-Resource-Policy blocks embedding.

```http
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.

```text
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:**

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

**B. Use nonce for inline scripts:**

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

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

**C. Review if the blocked resource is necessary:**

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

## Framework Examples

<callout icon="i-logos-nuxt-icon">

**Nuxt** - Configure security headers in `nuxt.config.ts`:

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

For cookies, use `useCookie` with options:

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

</callout>

<callout icon="i-logos-nextjs-icon">

**Next.js** - Set headers in `next.config.js`:

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

For cookies in API routes:

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

</callout>

## 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:**

```js
// 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` 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.