Content Security Policy nonce option is not working

Describe the bug The possibility to add a cspNonce was introduced in this MR https://github.com/mbrn/material-table/pull/1438.

The problem is that material-table depends on the package react-beautiful-dnd version 11.0.31 which does not have the option to pass a cspNonce as a property.

To Reproduce Steps to reproduce the behaviour:

• Set up a CSP where the style src is not set to unsafe-inline
• Use material-table

Expected behaviour There should be no CSP errors but there is. This is because the react-beautiful-dnd library sets inline styles.

Screenshots

Desktop :

• OS: Ubuntu
• Browser Firefox
• Version 77.0.1

[MglMX]

You need to specify the nonce to the MaterialTablecomponent. It will then be passed down to the style tag of react-beautiful-dnd.

<MaterialTable 
  columns={[
    {
      title: t('permitListPage.id'), field: 'id', defaultSort: 'desc', type: 'string',
    },
  ]}
  title={emptyTitle}  // const emptyTitle = '';
  icons={tableIcons}  // import tableIcons from '../TableIcons';
  data={permits}
  options={{cspNonce: "dX5eH2xW7yW0dC0b"}}
/>

The problem with the icons is not related with the CSP. You need to install @material-ui/icons and import them as it is described in the readme.

[xiaochenzhang]

ah, ok, thanks a lot @MglMX ! I thought the nonce is added by setting webpack_nonce so webpack is generating these tags… For now I will modify all the tables to include the nonce, hope it can be set dynamically in the table in the future. Thanks again for the help! Really appreciated.