Skip to content
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.

Sign up for GitHub

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

Jump to bottom

CSP error thrown by color-mode.util #8043

Open
1 of 3 tasks
apexskier opened this issue Oct 2, 2023 · 3 comments · May be fixed by #8338
Open
1 of 3 tasks

CSP error thrown by color-mode.util #8043

apexskier opened this issue Oct 2, 2023 · 3 comments · May be fixed by #8338
Labels
Topic: Color Mode 🌓 Issue or PR related to color mode

Comments

@apexskier
Copy link

Description

When I use Chakra in a project with a content security policy, I see the following error:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src http://my-domain.test/ 'nonce-LBVC3WAK89jF6Nh0lWF7IQ=='". Either the 'unsafe-inline' keyword, a hash ('sha256-GNF74DLkXb0fH3ILHgILFjk1ozCF3SNXQ5mQb7WLu/Y='), or a nonce ('nonce-...') is required to enable inline execution.

preventTransition @ color-mode.utils.ts:55
setDataset @ color-mode.utils.ts:17
(anonymous) @ color-mode-provider.tsx:68
(anonymous) @ color-mode-provider.tsx:86
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
performSyncWorkOnRoot @ react-dom.development.js:26076
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

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

  • macOS
  • Windows
  • Linux

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

const css = document.createElement("style")
css.appendChild(
document.createTextNode(
`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,
),
)
document.head.appendChild(css)

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).
@apexskier
Copy link
Author

This is a similar issue, though not the same cause or fix, as #3383.

@ernieMrtnz
Copy link
Contributor

I just ran into this as well. I might try to patch this locally with your solution in the meantime, thnx btw!

@ArthurWD ArthurWD linked a pull request Mar 4, 2024 that will close this issue
Open
@josh-atkins
Copy link

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 style-src should remove the error (sha256-GNF74DLkXb0fH3ILHgILFjk1ozCF3SNXQ5mQb7WLu/Y=)

..not super elegant but seems to work so long as the source remains unchanged.

@segunadebayo segunadebayo added the Topic: Color Mode 🌓 Issue or PR related to color mode label Mar 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Topic: Color Mode 🌓 Issue or PR related to color mode
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow to set a style-src CSP without unsafe-inline ArthurWD/chakra-ui
4 participants
@apexskier @ernieMrtnz @segunadebayo @josh-atkins