Search code examples
reactjsmaterial-uicreate-react-appcontent-security-policy

How can I set a nonce in Material-UI for the Content-Security-Policy?

I have a React App using Create-React-App (react-scripts) and Material-UI. I would like to apply a strong Content-Security-Policy for my app which does not allow unsafe inline styles.

I would like to set the CSP-Header server-side with a nonce present which can be done easily. However, Material-UI sets certain inline <style> tags dynamically at runtime without a nonce value as attribute.

I´ve seen the documentation on the Material-UI website under guides and csp. They seem to provide a solution. However, that solution is for server-side-rendering of the HTML, which I am not using. I am using Create-React-App and deliver the HTML, CSS and JavaScript statically.

Does anyone know how that can be achieved?

Solution

  • It works the way it is. The nonce value is set, even though it is not shown in the browser.