-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSP error thrown by color-mode.util #8043
Comments
This is a similar issue, though not the same cause or fix, as #3383. |
I just ran into this as well. I might try to patch this locally with your solution in the meantime, thnx btw! |
Just came across this issue while trying to get rid of this error with chakra-ui/nextjs. If I understand correctly, the style tag being injected is hard coded into the source, so adding the suggested hash to the CSP ..not super elegant but seems to work so long as the source remains unchanged. |
Hi, I recently encountered the same issue and decided to open a PR with the suggested fix. The pull request introduces the above-mentioned changes to set the nonce value on the injected style tag based on the nonce value already set inside the emotion cache provider. |
Description
When I use Chakra in a project with a content security policy, I see the following error:
This is not resolved by setting a nonce in my emotion cache, or by adding a
ColorModeScript
with a nonce.Link to Reproduction
main...apexskier:chakra-ui:csp-style-issue
Steps to reproduce
Run the vite-js example project from my fork, run behind https and add a content security policy matching the one in the vite config example. (I used something similar to
ngrok
and this chrome plugin https://chrome.google.com/webstore/detail/modheader-modify-http-hea/idgpnmonknjnojddfkpgkljpfnnfcklj.Chakra UI Version
default branch
Browser
Google Chrome 116.0.5845.187
Operating System
Additional Information
The error comes from the
<style>
node creation here:chakra-ui/packages/components/color-mode/src/color-mode.utils.ts
Lines 49 to 55 in 6d12ea8
To fix this the same way CSP is supported for the main script injection, a nonce also needs to be passed into this style injection. It would make sense to me to reuse the same nonce, which would be most seamless by using the same from emotion cache provider. (or it could be passed through in some other way)
An example/verification of this fix can be found here apexskier/chakra-ui@csp-style-issue...apexskier:chakra-ui:csp-style-issue-fix (the first commit, or combo of first and second commits both work).
The text was updated successfully, but these errors were encountered: