React Gatsby CSP with Material-UI 5

I’m currently working on an application which is build with gatsby and uses Material Ui for the style.

There is however the requirement from the client that we can’t use the unsafe-inline value for the style csp.

We use the gatsby-csp-plugin for defining our CSP metadata.

This plugin creates hashes for the style en script tags in the head.
Maetrial ui seems to work with a nonce to fix the csp as defined in their documentation.

Which requires us to create an emotion cache and pass the nonce to it.

I however have no clue how om going to generate a new nonce every request and pass it to the material ui emotion cache and also make sure its defined in my gatsby-csp-plugin config.

Also a side question is that the csp plugin seems to also block inline styling defined in the code.
Is there a way around this or do we just have to make sure we have no inline styling at all.

Any help would be greatly appreciated.

most searches about this just end up with use unsafe-inline which is not an option for me.

Source: React – Stack Overflow

November 12, 2021
Category : News
Tags: gatsby | hash | nonce | reactjs | unsafe-inline

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.