[CSP] Blocks data-emotion inline styles

[jnschbrt]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. use create-react-app with mui v5
2. set the following csp header inside public/index.html

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

3. set the .env as follows:

INLINE_RUNTIME_CHUNK=false
IMAGE_INLINE_SIZE_LIMIT=0

4. my app root looks like this:

<ThemeProvider theme={theme}>
  <IntlProvider locale={currentLanguage} messages={messages[currentLanguage]}>
    <CssBaseline />
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
            {...}
        </Route>
      </Routes>
    </BrowserRouter>
  </IntlProvider>
</ThemeProvider>

5. build or start the app

Current behavior 😯

I dont know why, but I keep getting these empty inline "data-emotion" style tags ..

setting the style-src directive as "style-src 'self' 'sha256-2NO5...' 'sha256-47DE...';" with the full hashes from the emotion library works. but i dont wanna bind the csp header to this settings. i reckon the hashes change with future mui versions.

Expected behavior 🤔

no data-emotion inline style tags

Context 🔦

I dont use server-side-rendering. I upload the build output files directly to my aws cloudfront instance.

Your environment 🌎

npx @mui/envinfo

System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.18.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.1105.0), Chromium (108.0.1462.76)
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.109 
    @mui/core-downloads-tracker:  5.10.17 
    @mui/icons-material: ^5.11.0 => 5.11.0 
    @mui/material: ^5.10.17 => 5.10.17 
    @mui/private-theming:  5.10.16 
    @mui/styled-engine:  5.10.16 
    @mui/system:  5.10.17 
    @mui/types:  7.2.2 
    @mui/utils:  5.10.16 
    @types/react: ^18.0.24 => 18.0.26 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.6.4 => 4.9.4 

using chrome and edge

[siriwatknp]

@jnschbrt It might be faster to resolve your problem if you open the issue at emotion repo directly.

[jnschbrt]

https://github.com/emotion-js/emotion/issues/2996

[oliviertassinari]

I don't see any issue, CSP needs to be configured: https://mui.com/material-ui/guides/content-security-policy/#server-side-rendering-ssr, it doesn't look like it was configured in the bug reports.

---

@brijeshb42 This looks like we should move the CSP guide to be under https://mui.com/system/getting-started/.

[Bonfims]

I don't see any issue, CSP needs to be configured: https://mui.com/material-ui/guides/content-security-policy/#server-side-rendering-ssr, it doesn't look like it was configured in the bug reports.

@brijeshb42 This looks like we should move the CSP guide to be under https://mui.com/system/getting-started/.

and you need to point that we can only config the nonce with a server side rendering project and do not have any information about how to properly achieve this on a build that render on client.