Cannot pass nonce to InitColorSchemeScript #4912
Description
Steps to reproduce
Steps:
- Using Next.js, create a csp that contiains
'script-src': ["'self'",'nonce-${nonce}'], - Run the app and inspect the console for CSP errors
Current behavior
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-ZmI2YjIwMjMtNDhkNi00MzQ0LWFiOGYtOTNkNmMyM2RmNTVl'". Either the 'unsafe-inline' keyword, a hash ('sha256-Ljf0rLxXp9exUSlRNU4seoE/O4WmqphKaTj50kOsd/M='), or a nonce ('nonce-...') is required to enable inline execution. Expected behavior
Inline scirpts created by this package and MUI should be allowed with a nonce
Context
The <InitColorSchemeScript /> component takes an optional nonce property. We need the ability to pass this down from the app providers so that the inline scripts are allowed when using a CSP
Example
<NextAppProvider theme={theme} navigation={navigation} branding={{ title: 'My App with a CSP', }} session={session} authentication={authentication} nonce={nonce} > Your environment
npx @mui/envinfo
System: OS: macOS 15.4.1 Binaries: Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node npm: 10.9.2 - ~/.nvm/versions/node/v22.13.1/bin/npm pnpm: Not Found Browsers: Chrome: 135.0.7049.116 Edge: Not Found Safari: 18.4 npmPackages: @emotion/react: 11.14.0 => 11.14.0 @emotion/styled: 11.14.0 => 11.14.0 @mui/core-downloads-tracker: 7.0.2 @mui/icons-material: 7.0.2 => 7.0.2 @mui/material: 7.0.2 => 7.0.2 @mui/material-nextjs: 7.0.2 => 7.0.2 @mui/private-theming: 7.0.2 @mui/styled-engine: 7.0.2 @mui/system: 7.0.2 @mui/types: 7.4.1 @mui/utils: 7.0.2 @mui/x-data-grid: 8.1.0 => 8.1.0 @mui/x-data-grid-generator: 8.1.0 => 8.1.0 @mui/x-data-grid-premium: 8.1.0 @mui/x-data-grid-pro: 8.1.0 @mui/x-internals: 8.0.0 @mui/x-license: 8.0.0 @mui/x-telemetry: 8.0.0 @toolpad/core: 0.14.0 => 0.14.0 @toolpad/utils: 0.14.0 @types/react: 19.1.2 => 19.1.2 react: 19.1.0 => 19.1.0 react-dom: 19.1.0 => 19.1.0 typescript: 5.8.3 => 5.8.3 Search keywords: cps nonce