[CSP] Blocks data-emotion inline styles

Duplicates

• I have searched the existing issues

Latest version

• 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 🌎

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