Content Security Policy nonce option is not working

[MglMX]

Describe the bug
The possibility to add a cspNonce was introduced in this MR #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

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[xiaochenzhang]

Hi there, I see there is a pull request to fix this bug and already merged. But I still see the same issue now in our application, we are using v1.69.0, tried on latest Chrome and Safari, the same problem. Can someone check this again please? @MglMX

[MglMX]

I have checked and it is still working on version v1.69.0.

What CSP are you using for style-src? Can you share some code with the issue?

[xiaochenzhang]

@MglMX
Our application is currently served statically, so no server side code. Below is the CSP in our index.html, the nonce is currently static also, because we really need to pass our audit asap, dynamically add nonce is planned for later, so ignore the length etc. as well. It is just for testing.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:;frame-src 'self';img-src 'self' data:;connect-src 'self' http: https:;style-src 'self' 'nonce-dX5eH2xW7yW0dC0b' https:">
<meta property="csp-nonce" content="dX5eH2xW7yW0dC0b" />

When I run our application, I see every other mui elements have the nonce added, including materiable-table, but the react-beautiful-dnd (rbd) does not have nonce, see the the style tag and console errors:

Here is what inside the style tag:

The problem we are facing is, the table and its header, cell data are all working, only the table icons are not showing. Below is how we create the icon:

{ 
    cellStyle: { padding: 0 },
     render: (row) => (
       <div className={classes.iconsContainer} style={displayDetailButtons(row)}>
           <IconButton id="PermitListOpenDetailButton" className={classes.eyeIcon} size="small" onClick={() => openPermitDetails(row)}>
              <FontAwesomeIcon icon={faEye} />
           </IconButton>
      </div>
    ),
},

However, even if I removed everything, only basic table data is there (see below code), I still see the CSP inline-style error. So this error is not caused by my code. Maybe this is caused by the "drag and drop column" feature?

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

[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]

Hi, thanks for the reply.

It works as you suggested, the nonce is added to the style tag, and the error is gone.

But what is the different between material-table and other material ui components? because for other mui components, the nonce is automatically added by React webpack (I forgot to mention we are using React v16.8.6). If now I have to manually add this nonce in all material-tables in my application, it will be a mess. And if we want to create new tables then we have to remember to add the nonce there as well. Also we are planning to dynamically inject the nonce in our code, then this solution seems not sustainable?

[MglMX]

Material-UI uses JSS to generate the style tags. The nonce used by JSS is taken dynamically from the <meta property="csp-nonce" content="yourNonce" /> tag. Webpack does not add the nonce to the style tags. You can find an explanation here.

material-table uses react-beautiful-dnd, which does not use JSS but their own solution to create the style tags. That's why you need to add the nonce here one more time. There is a discussion here on why it is not automatically obtained from the meta tag like JSS does but it needs to be passed as a prop.

You could create a getCSP function that dynamically gets the nonce from the meta tag. Indeed, it needs to be added to every table you create.

options={{cspNonce: getCSP()}}

[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.