CSP enabled DevTool show errors (insert inline style)

[NewFuture]

Describe the bug

When CSP enabled, (Style-SRC='xxx')

the console error

 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-0mihlgp7' 'report-sample'

Your minimal, reproducible example

https://codesandbox.io/s/heuristic-cannon-it3v0r?file=/public/index.html

Steps to reproduce

1. start the app
2. open the app in single window
3. open the console and refresh

Expected behavior

No errors or passing the nonce as params

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Browsers

react-query version

3.34.19

TypeScript version

No response

Additional context

No response

[TkDodo]

not sure what to do here except to re-write the devtools to not use inline styles. any css-in-js lib would need some help for CSPs to be able to inject style tags in the head, so would need to switch to something else.
Since the devtools are meant for development mode and not production, my suggestion would be to relax the CSP on localhost. Do you have any other suggestions?

[NewFuture]

I found that style tag was injected here. We can ** pass the nonce as a parameter** or use the popular global var.

https://github.com/tannerlinsley/react-query/blob/ec4ef9b7533c3bf0f7560fc5c811da337a0972c4/src/devtools/devtools.tsx#L469-L492

1. as parameter

<ReactQueryDevtools styleNonce={'string'} />

2. global var, such as __webpack_nonce__

<style nonce={__webpack_nonce__}

[TkDodo]

oh, I misunderstood the issue then. I wasn't aware that we are injecting a style tag 🤔 . I would like to get rid of this actually, but not sure how. We can't use inline styles if we want to target all containers inside ReactQueryDevtoolsPanel, and if we extract it to a separate css file, users must import / bundle it.

or, we create a separate css file and import it. but will that work for all consumers?

[NewFuture]

scoped style is the most compatible solution for chromium browsers.
CSS files are dependent on Webpack/Babel loaders.

I preferred scoped style with the nonce attribute,

[TkDodo]

okay, would you like to contribute an optional nonce prop for the devtools?

[NewFuture]

PR created #3506

[tannerlinsley]

🎉 This issue has been resolved in version 3.36.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tannerlinsley]

🎉 This issue has been resolved in version 4.0.0-beta.4 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀