Using the "extraHeaders" option can break CSS/JS/Resource loading, as the headers are included on all requests

[dcoffey-zengenti]

FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).
• Yes, my issue is not answered by other FAQs.

URL

https://www.epa.ie/who-we-are/gaeilge/an-sceim-teanga/

What happened?

Some resources on the page are blocked due to a CORS error from allowed headers.

 {
        "method": "Network.loadingFailed",
        "params": {
          "requestId": "7416.49",
          "timestamp": 721073.514311,
          "type": "Font",
          "errorText": "net::ERR_FAILED",
          "canceled": false,
          "corsErrorStatus": {
            "corsError": "HeaderDisallowedByPreflightResponse",
            "failedParameter": "x-hide-preview-toolbar"
          }
        },
        "targetType": "page",
        "sessionId": "B88FA97ACC7C3B86A5265831AEA4C3FE"
      },

has been blocked by CORS policy: Request header field x-hide-preview-toolbar is not allowed by Access-Control-Allow-Headers in preflight response.

What did you expect?

Expected the header to only be added to my current page request rather than all subsequent requests.

What have you tried?

Patching:

if (headers) await session.sendCommand('Network.setExtraHTTPHeaders', { headers });

to:

if (headers) {
  // Use the Fetch protocol to only add headers to the main document requests.
  await session.sendCommand('Fetch.enable', {
    patterns: [{urlPattern: '*', resourceType: 'Document', requestStage: 'Request'}],
  });
  session.on('Fetch.requestPaused', async event => {
    await session.sendCommand('Fetch.continueRequest', {
      requestId: event.requestId,
      // Merge the extra headers with the existing headers and ensure value is a string.
      headers: Object.entries({...event.request.headers, ...headers}).map(([name, value]) => ({
          name,
          value: String(value),
        })),
    });
  });
}

How were you running Lighthouse?

node

Lighthouse Version

12.8.1

Chrome Version

139.0.7258.157

Node Version

22.18.0

OS

Windows

Relevant log output

[leventefeher]

I had the same problem when my CSS from a CDN wouldn't load, and this fixes it, thanks. Would be great to get it merged in @connorjclark

[benschwarz]

In this scenario, Chrome devtools debugging API Network.setExtraHTTPHeaders sets headers on all outgoing requests, which can be problematic for CORS requests as you’ve noted.

While it's a clever workaround, I wouldn't recommend capturing Fetch.requestPaused for each request as it will likely create a situation where request duration and order is different to a normal page load.

Assuming you have control over the x-hide-preview-toolbar functionality, you might find success in using cookies or URL search params (query strings) to hide the toolbar.

Is that a feasible workaround @dcoffey-zengenti?

[leventefeher]

@benschwarz We use Lighthouse on many different sites, many of which need different headers passed for various reasons (e.g., passing a custom user agent, authentication, avoiding analytics tracking, getting back more detailed response headers). Is there any other way you would recommend getting around this issue?

[benschwarz]

@leventefeher, assuming that all your sites are suffering from the same CORS error you've posted above, you could utilise the Access-Control-Allow-Headers header to set allowed headers for the headers that are being manipulated.

That way your CORS requests should meet the permission model and complete successfully.

[dcoffey-zengenti]

Thanks @benschwarz, unfortunately my use case is mostly scanning other peoples sites, and I don't have any control over their request/response headers - Plus most of the issues I've come across are with CDN providers, where I have even less control over what they do/don't accept.

I'll do a workaround on my end for now - But it would be nice if there was a way to set extra headers only on the page you're actually scanning (perhaps it needs a new chrome feature to support it if the Fetch API isn't a reliable way to do it).

I'll leave the issue open for now in case anyone else is having the same problems, or has anything to add to the discussion.