My NextJS app is scanned by client’s pen test software and pointing that “unsafe-inline” should not be used. However I can’t get the nonce working and getting follow errors when MUI components is used on the page.
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self''nonce-MDkzMjY2YmMtYTA2My00YzczLTljNTYtNjYyY2ZiODgyNjE0'". Either the 'unsafe-inline' keyword, a hash ('sha256-7uP4UMn0lzlm+J1RYqmY7+9oGVF+O/z16924/Q7zptE='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
Things that I tried:
- I followed the instruction from NextJS documentation here to create a middleware to generate a nonce on every request and set it to the cookies on client side.
- I also follow the instruction here on MUI to wrap the components with the CacheProvider
Here on GitHub I uploaded a test project showing the problem. It is just a NextJS starter project using App Router. Added middleware for nonce generation and also the MUI CacheProvider. The only page is just the default start page all cleaned up and with just one CircularProgress UI from MUI.
What else I have to add or set so that MUI doesn’t produce those error anymore?I have been stuck on this problem for over a week now and I am pulling my hair out. Please help!