Modal usage of react-remove-scroll-bar triggers CSP error

[dburrows]

🐛 Bug report

Pre-1.0 I've been successfully using Chakra on a site that uses CSP by passing a dynamically generated nonce via the nonce option in emotion's cache (https://emotion.sh/docs/@emotion/cache#nonce) but had some issues when upgrading to 1.x.

ChakraUI's modal (and mobile nav) use a lib called react-remove-scroll-bar which in turn uses a lib called react-style-singleton which adds a dynamic style sheet. As this style addition is not using emotion it doesn't find the nonce set up when it uses another dependency get-nonce to try to find it, so triggers a CSP error.

https://www.npmjs.com/package/react-remove-scroll-bar
https://www.npmjs.com/package/react-style-singleton
https://www.npmjs.com/package/get-nonce

💥 Steps to reproduce

Clear and concise reproduction steps are important for us to be able to triage
your issue in a timely manner

1. Set up a site with style locked down via a CSP nonce, inject the nonce via the nonce option in the `emotion
2. Open a modal
3. See a CSP violation error in the console

🧐 Expected behavior

It would be nice if this was fixable in Chakra by having a nonce option that does the emotion and react-style-singleton setup outlined below, but not sure if that's desirable as people may want to set up the emotion cache themselves. If that's not an option maybe just some docs around setting this up. Happy to work on either of these once I get some feedback about the issue.

🧭 Possible Solution

The workaround is to import the get-nonce dependencies setNonce method and set the nonce for react-style-singleton at the same time as you set up the nonce for emotion.

import { setNonce } from 'get-nonce';
import createCache from '@emotion/cache';

const myCache = createCache({
  key: 'my-csp-site',
  nonce
}); // nonce setup for emotion
setNonce(nonce); // nonce setup for modal/mobile nav

[stale]

Hi!
This issue hasn't seen any activity recently. We close inactive issues after 35 days to manage the volume of issues we receive.
If we missed this issue or you want to keep it open, please reply here. That will reset the timer and allow more time for this issue to be addressed before it is closed.

[apexskier]

I just hit this as well, and the setNonce tip fixed it for me, thanks!