react-colorful: Added styles do not conform to any CSP rules.

Hey I am using this cool component in my react project, but I am having an issue with the Content Security Policy.

Although I am doing client side rendering with makeStyles from material-ui, I use the nonce because I am building an app with electron and want to secure it as much as possible.

Right now I am using a nonce to only allow self styles and styles with a specific nonce. The useStyles hook created by makeStyles does add the nonce to the style because it uses JSS

The problem is that styles in react-colorful are applied to the html without JSS so no nonce is added.

Possibly related topics are: #109 #110

Any idea on how to solve the problem?

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 19 (12 by maintainers)

Most upvoted comments

@tchar Just released v5.1. It reads __webpack_nonce__ automatically and provides a new setNonce function which allows adding any nonce to our style element.

After researching we figured out that using <meta property="csp-nonce" ... /> isn’t the common approach, so we didn’t add it to our package. We used https://www.npmjs.com/package/get-nonce as a reference.

If the picker won’t be displayed properly after updating the package, try to run this code before the picker render:
const cspMeta = document.querySelector('meta[property="csp-nonce"]')
if (cspMeta) setNonce(meta.content)`

Thanks it works. I used the setNonce. Just for the completion of the discussion, the meta propery is what is used by JSS. Not complaining. I mean there are other meta tags for the nonce as well so yeah I guess you cant support everything.

Thanks for the fix.

Cheers

tchar on Mar 29, 2021

@omgovich The CSP helps to protect against the attacks where the malicious code or style is injected onto a page. It works as follows:

The CSP Http header contacts a directive style-src nonce-Vlad42. The nonce is Vlad42 and it must be randomly generated and unique for each request.
Now if a page wants to inject a script, it can only do so with if a style tag includes a matching nonce attribute: <style nonce="Vlad42". (the page doesn’t have access to http response, so it makes it impossible to inject style tags without having access to the original html served).

I guess the solution would be to allow makeStyles to accept an optional hash of arguments.

molefrog on Mar 19, 2021