[theme] CSP implementation with new style system using @emotion

There is no way to provide CSP nonce to StylesProvider

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-h3zjTDbRfKct'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Material UI used(using) jss as styling solution which read meta[property=“csp-nonce”]. Now it can be configured in @emotion/cache but cache is created in StylesProvider.

Expected Behavior 🤔

StylesProvider should accept nonce as a parameter or read from meta[property=“csp-nonce”]

Steps to Reproduce 🕹

Code sample with no CSP nonce provided (check developer console not codesandbox) Code sample with nonce and works

Context 🔦

Implement a new Material UI styling system with the existing system.

Any browser.

[povilass]

@oliviertassinari I think you do not need to implement nonce search, emotion gave us half solution how to pass it. We just need StyledEngineProvider to accept it with the existing cache. If someone implements a custom cache so they have to provide it themself. Reading nonce from meta tag or webpack_nonce is the client problem, not yours.

Yes I know that I created issue with expected behavior StylesProvider should accept nonce as a parameter or read from meta[property=“csp-nonce”] maybe I was wrong and you do not need to do it. -_-

And StyledEngineProvider injectFirst probably should be enabled always without disabling it because none of the current components like Typography will not work if u set StyledEngineProvider injectFirst=false

[oliviertassinari]

I don’t want to create my emotion cache

@povilass Why not? Did you apply the steps of https://material-ui.com/styles/advanced/#how-does-one-implement-csp for v4?

Maybe we should make this more visible and add it somewhere else?

@mnajdova Considering https://next.material-ui.com/guides/content-security-policy/ is broken in v5, we might want to start there.