Unexpected CSP violations caused by DevTools Protocol

[crstauf]

FAQ

• [X] Yes, my issue is not about variability or throttling.
• [X] Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

https://develop.calebstauffer.com

What happened?

"Best Practices" score is lowered because of "Browser errors were logged to the console" due to stylesheets violating CSP. However, these issues do not show directly in DevTools Console. It seems something is different when Lighthouse audits the page.

What did you expect?

No browser console errors related to CSP when running Lighthouse.

What have you tried?

I've Googled and read issues on this repository and have found related issues, but they were all marked as resolved.

How were you running Lighthouse?

Chrome DevTools

Lighthouse Version

9.2.0

Chrome Version

Chromium 99.0.4844.51

Node Version

No response

OS

Mac

Relevant log output

Refused to load the stylesheet 'https://develop.calebstauffer.com/wp-content/themes/css-2015/style.css?ver=dbb1578' because it violates the following Content Security Policy directive: "style-src 'nonce-NDI3MDE2NTkwMyw0MTAxNDYxNzQ5'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

[adamraine]

On my first navigation to the page I saw the CSP violations in the DevTools console, but haven't seen them since without Lighthouse. Perhaps the nonce isn't being applied correctly on a clean navigation.

If you check the "Preserve log" box in the console it will keep the console errors after Lighthouse has run.

Interestingly, unchecking "Legacy navigation" in the Lighthouse settings prevents the CSP violations. Probably worth investigating this to see why.

[crstauf]

@adamraine The below screenshot is a clean navigation (brand new incognito window with DevTools opened before navigation):

Does the errors appearing only after Lighthouse has run prove that there's an issue?

What is the difference when using "Legacy navigation"?

[adamraine]

Does the errors appearing only after Lighthouse has run prove that there's an issue?

Yeah this looks like a real issue. It's weird because the Lighthouse artifacts show the initial HTML page using a matching nonce to the CSP in the network request. These nonces also matches the nonces reported in the CSP violations in the Lighthouse console errors audit. There really shouldn't be a CSP violation in this situation but Chrome still emits them.

What is the difference when using "Legacy navigation"?

Lighthouse will use a new navigation runner that is compatible with user flows. In theory, the results will be the same regardless of the box checked status. The biggest visible difference is that Lighthouse only needs to load the page once if the box is unchecked whereas it can load the page twice if the box is checked.

[adamraine]

https://bugs.chromium.org/p/chromium/issues/detail?id=1314424