Content Security Poilicy blocks data-emotion inline styles

[jnschbrt]

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

[NickBaileyMA]

Chiming in to say we ran into this as well using chakra-ui. The hash that the console is giving you, sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU= is the hash for an empty string. You can verify this with the following:

$ echo -n '' | openssl sha256 -binary | openssl base64
47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=

As you note, you can specify the hash in the CSP and things work. It looks like you have another inline style at the top which is not empty and has a different hash.

This issue #1248 discusses what the empty tags are and why they exist.

For the time being, we've added this empty string hash to our style-src directive in the CSP. It seems nonsensical to me, but it is better than unsafe-inline.

[rufer7]

I faced the same error message in browser console after update of

• yarn from 3.2.1 to 3.4.1
• @emotion/cache from 11.7.1 to 11.10.5
• @emotion/react from 11.8.1 to 11.10.6

Error message:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-1ffqgqw45634t3gad=='". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

After a couple days and some refreshes, Empty Cache and Hard Reload + deleting yarn.lock and reinstalling all packages, the error is not thrown anymore.