[CSP] Blocks data-emotion inline styles

jnschbrt commented 1 year ago

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:

use create-react-app with mui v5

set the following csp header inside public/index.html

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

set the .env as follows:

INLINE_RUNTIME_CHUNK=false
IMAGE_INLINE_SIZE_LIMIT=0

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>

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 commented 1 year ago

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

jnschbrt commented 1 year ago

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

oliviertassinari commented 1 year ago

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 commented 1 year ago

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.

mui / material-ui