Content Security Policy (CSP) Restrictions with Electron and Emotion in React-Admin

[Malnati]

What you were expecting:

I was expecting React-Admin to work seamlessly with Electron, adhering to the Content Security Policy (CSP) directives, especially when using Emotion for styling. It is based on https://www.electronjs.org/docs/latest/tutorial/security#6-define-a-content-security-policy

What happened instead:

The inline styles generated by Emotion are conflicting with the CSP directives which disallow inline styles for security reasons. This results in styles not being applied, thereby affecting the user interface appearance.

Steps to reproduce:

1. Create a new Electron application.

   I recommend https://github.com/reZach/secure-electron-template, then you don't need to install a lot of things...

2. Incorporate React-Admin for the UI.

   npm install react-admin

3. Apply Emotion for styling components.

   Just add import { Admin } from 'react-admin'; and declare in the page with some "Hello World" inside.

4. Run the application and observe the console for CSP violation warnings and the UI for missing styles.

   Just access the page where you added the "Holle World".

Related code:

• Preferably, a sandbox forked from
  • https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple (v4)
  • https://codesandbox.io/s/github/marmelab/react-admin/tree/3.x/examples/simple (v3)
• A link to a GitHub repo with the minimal codebase to reproduce the issue: https://github.com/Malnati/secure-electron-adminjs/tree/feat/v0.0.1/install-dependencies

// app/src/pages/users/users.jsx
import React from "react";
import { Admin, Resource } from 'react-admin';
import { List, Datagrid, TextField, EmailField } from "react-admin";
import { UsersProvider } from './usersDataProvider'; 

const dataProvider = UsersProvider.find;

export const UserList = () => (
    <List>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="name" />
            <TextField source="username" />
            <EmailField source="email" />
            <TextField source="address.street" />
            <TextField source="phone" />
            <TextField source="website" />
            <TextField source="company.name" />
        </Datagrid>
    </List>
);  

class Users extends React.Component {
  render() {
    return (
      <section className="section">
        <div className="container">
          <Admin dataProvider={dataProvider}>
              <Resource name="users" list={UserList} />
          </Admin>
          Test
        </div>
      </section>
    );
  }
}

export default Users;

Other information:

Other information: I found Emotion mentioned in the package.json file of React-Admin in node_modules but did not find any references in the react-admin files.

A security issue exists whenever you receive code from an untrusted source (e.g. a remote server) and execute it locally. As an example, consider a remote website being displayed inside a default BrowserWindow. If an attacker somehow manages to change said content (either by attacking the source directly, or by sitting between your app and the actual destination), they will be able to execute native code on the user's machine.

Environment

• React-admin version: "react-admin": "^4.15.2"
• Last version that did not exhibit the issue (if applicable): "react-admin": "^4.15.2"
• React version: "react": "^18.2.0"
• Browser:
• Stack trace (in case of a JS error): emotion-sheet.browser.esm.js:132 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-EsMIvREceQQUWqxLDlCXAA=='". Either the 'unsafe-inline' keyword, a hash ('sha256-wvs0Bxu6FqhzYbW2Jlatq2fHLP+5ZY+74Y2z/8gdHus='), or a nonce ('nonce-...') is required to enable inline execution.

  "dependencies": {
    "@loadable/component": "^5.15.2",
    "@reduxjs/toolkit": "^1.8.3",
    "adminjs": "^7.3.0",
    "axios": "^1.6.0",
    "bulma": "^0.9.4",
    "easy-redux-undo": "^1.0.5",
    "electron-devtools-installer": "^3.2.0",
    "i18next": "^21.8.14",
    "i18next-electron-fs-backend": "^3.0.0",
    "i18next-fs-backend": "^1.1.4",
    "js-cookie": "^3.0.5",
    "lodash": "4.17.21",
    "lodash.merge": "^4.6.2",
    "process": "^0.11.10",
    "react": "^18.2.0",
    "react-admin": "^4.15.2",
    "react-dom": "^18.2.0",
    "react-i18next": "^11.18.3",
    "react-redux": "^8.0.2",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "redux": "^4.2.0",
    "redux-first-history": "^5.0.12",
    "secure-electron-context-menu": "^1.3.3",
    "secure-electron-license-keys": "^1.1.3",
    "secure-electron-store": "^4.0.2"
  }

[Malnati]

[fzaninotto]

The fix for this CSP problem is documented on the material-UI website: https://mui.com/material-ui/guides/content-security-policy/

Does it solve your issue?

[fzaninotto]

No news for some time, closing.