Reach-ui: [Dialog] Violates safe CSPs because of dependency applying style tags

[igboyes]

🐛 Bug report

Current Behavior

@reach-iu/dialog has a dependency react-remove-scroll that in turn has a dependency called react-style-singleton.

The library react-style-singleton is used to create and modify inline style tags after application mount. This is unsafe and if you are using a Content Security Policy (CSP), I don't think there is any way for this library to work as expected without allowing style-src 'unsafe-inline'.

I am using a strict CSP and cannot make an exception for reach-ui, though I would love to use it.

CSP Header

Content-Security-Policy: connect-src 'self' sentry.io; default-src 'self'; font-src 'self' fonts.google.com use.fontawesome.com data:; img-src 'self' data:; script-src 'self' 'nonce-9ac081fc070c4f2ef5a370267ce48ea8623da152' use.fontawesome.com; style-src 'self' 'nonce-9ac081fc070c4f2ef5a370267ce48ea8623da152' use.fontawesome.com;

CSP Error

It is also entirely possible I am missing a secure solution to this problem. I think it would be good to document if that is the case.

Expected behavior

Style tags are not unsafely added and modified after application mount.

Reproducible example

Use a server that sets a CSP without unsafe-inline set in its style-src. Sorry, I don't know how to provide an example of this as it depends on the server.

Suggested solution(s)

• Is react-remove-scroll necessary? Can the functionality be built into @reach-ui/dialog without a dependency?
• Is there an equivalent dependency that does not have this issue?
• Contact dependency author

I am willing to contribute to or test a solution.

Additional context

None

Your environment

| Software | Name(s) | Version |
| ---------------- | ------- | ------- |
| Reach Package | dialog | 0.8.0 |
| React | | 16.12.0 |
| Browser | Chrome | 80 |
| Assistive tech | | |
| Node | | 12.15.0 |
| npm/yarn | | 6.13.4 |
| Operating System | Ubuntu | 18.04 |

[chaance]

I can take a look at this, but have you considered opening an issue in https://github.com/theKashey/react-remove-scroll/issues or https://github.com/theKashey/react-style-singleton/issues?

[chaance]

FWIW, there is a lot of nuance in the provided behavior, and this lib does a good job handling it. As such I'd prefer to keep it if possible, but if you want to try your hand at a better solution I'm certainly open to it.

[igboyes]

Thanks.

I will opened an issue for react-remove-scroll (https://github.com/theKashey/react-remove-scroll/issues/21). We'll see where it goes!

[theKashey]

react-style-singleton should add nonce attribute, if it could be read from wepbpack_nonce. Not sure how to solve it for non-webpack cases.

[theKashey]

react-remove-scroll has been updated.

[chaance]

Updated the dependency in 0.10.1