Hi All,

I am wondering if anyone has successfully set up and / or worked around a CSP with Nextjs 14+, MUI + SSR?

I've followed the MUI guide + the nextjs guide for adding csp's and have been able to get this to 'work' but its very hit and miss. I am setting the code via middleware and using a nonce and applying that to styles and scripts. This is my code:

This is my middleware - I am using a fixed nonce (just for testing).

In the MUI Theme registry I am passing this nonce to the cache.

Inside the cache (this is not as per MUI docs but I am getting a lot of errors trying to do their method - outside of this question) I am pulling the prop which holds the nonce and then applying this to the styles, scripts etc:

When I run this I can see the nonce being applied - as per screenshot:

However when I run this on anything that is 'dynamic' (I am using the wrong word here) such as a chart using chartjs / react-chart-js or an MUI table this will not display or a button etc. Its like they flat out don't even render. Attached is the html using dev tools showing the chartjs / react-chart-js not displaying.

For a bit easier reference the csp is below:

const cspHeader = default-src 'self'; script-src 'self' 'nonce-${nonce}' 'strict-dynamic'; style-src 'self' nonce-${nonce} 'unsafe-inline'; img-src 'self' blob: data:; font-src 'self'; object-src 'none'; base-uri 'none; form-action 'self'; frame-ancestors 'none'; block-all-mixed-content; upgrade-insecure-requests;;

I've tried removing the script-src and style-src entirely but this just breaks the app and it ends up displaying without anything which I guess with MUI might mean its all or nothing?

Appreciate any help

Thanks!