[CSP] "style-src" MUITabs and some other component have inline styles not nonced by the CreateEmotionCache

[Mateo-P]

Steps to reproduce

Link to live example: https://github.com/Mateo-P/nonce-problem.git

Steps:
1 cp .env.example to .env
2. yarn install
3. yarn run dev
4. open the browser console (firefox is more descriptive in this case)

Current behavior

Expected behavior

not showing the error on console browser.

• remove inline style as most of the MUI components
• make it compatible with nonce assignment when creating the EmotionCache

Context

we are using remixjs+MUI and want to add CSP-Headers following these guides:
CSP-guide
remix-Styling

we added the nonce-value to the cache on CreateEmotionCache.tsx:

it works with most of the components and all sx's but we have found that some components including MUITabs have a default style="" which is not handled by the CSP nonce config followed in the documentation

on MUITabs docs by inspecting the component on the browser the default style="overflow:hidden;margin-bottom:0" is shown.

Your environment

npx @mui/envinfo

System:
    OS: macOS 14.0
  Binaries:
    Node: 18.16.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.6 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 120.0.6099.129
    Firefox: 
    Safari: 17.0
  npmPackages:
    @emotion/react: 11.11.3 => 11.11.1 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base: 5.0.0-beta.29 => 5.0.0-beta.27 
    @mui/core-downloads-tracker:  5.15.0 
    @mui/material: 5.15.2 => 5.15.0 
    @mui/private-theming:  5.15.0 
    @mui/styled-engine:  5.15.0 
    @mui/system:  5.15.0 
    @mui/types:  7.2.11 
    @mui/utils:  5.15.0 
    @mui/x-data-grid:  6.18.4 
    @mui/x-data-grid-pro: 6.18.6 => 6.18.4 
    @mui/x-license-pro: 6.10.2 => 6.10.2 
    @types/react: 18.2.46 => 18.2.45 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.3.3 => 5.3.3

Search keywords: nonce csp inline styles MUITabs style="overflow:hidden;margin-bottom:0"

[Mateo-P]

i was wondering if there are any updates on this. 🤠 @mnajdova

[mnajdova]

we added the nonce-value to the cache on CreateEmotionCache.tsx:

it works with most of the components and all sx's but we have found that some components including MUITabs have a default style="" which is not handled by the CSP nonce config followed in the documentation

Does this mean that #38965 is resolved?

Some components just need to have an inline style, for e.g. Slider, Tabs etc. Have you tried using CSPunsafe-hashes keyword to our style-src directive, or unsafe-inline - resource: https://content-security-policy.com/examples/allow-inline-style/

[mjulstein]

I'm wondering how come instead of any place where there is a style attribute being set it is not simply replaced by a first-child style element so a nonce can be applied from the emotion cache and we don't have a strict CSP breaking it.
There is a tutorial here, but it doesn't work for all components https://mui.com/material-ui/guides/content-security-policy/#how-does-one-implement-csp

[majoer]

I use Nextjs and pass a nonce to MUI serverside like so:
<AppRouterCacheProvider options={{ nonce: nonce, prepend: true, }}>...</AppRouterCacheProvider>

I am seeing inline-styles blocked by CSP in multiple components:

• Accordion (min-height:0px, --Paper-shadow: ...)
• Tabs (overflow:hidden;margin-bottom:0)
• Paper (--Paper-shadow:none, --Paper-shadow: ...)

As it stands, I can either

1. Allow unsafe inline styles, or
2. Generate a bunch of hashes for all these inline styles, which is very cumbersome if they were to change suddenly.

[Tim62556]

@majoer I haven't been able to fix the Tabs one yet. But for the Paper and Accordion I've found a very hacky workaround: I've created a theme in which I override the default style prop of the Paper component:

{
  ...,
  components: {
    ...,
    MuiPaper: {
      defaultProps: {
        style: {
          "--Paper-shadow": "",
        }
      }
    }
  }
}