0

I have the content security policy blues when trying to use React-beautiful-dnd.

I keep on getting:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self', etc...

I have a MERN stack application using helmet for the CSP which relies heavily on react-beautiful-dnd or hello-pangea/dnd (basically same thing but works with react v18).

I have read in a separate stack overflow post that React apps cannot support nonces unless they serve static pages, and I am pretty confident if I attempt to convert this application to serve static pages it will not work as intended. It is a big app.

I have tried adding hashes to the CSP for every unsafe inline script used by the library, but it ends up being longer than the maximum permitted header size from the server and the server starts throwing 502 errors...

So I figure I have a few options left:

  1. Magically find some way to use a nonce in a dynamic React app
  2. Spend months recreating my own version of the React-beautiful-dnd library which doesn't rely on inline styles (and I guess put it up as a public package)
  3. Find and use some other library for managing drag and drop lists

Can anyone more knowledgeable than me out there give a recommendation?

Thanks

John Shanks
  • 165
  • 9

1 Answers1

0

You have pretty much listed the viable alternatives. The only missing one is allowing 'unsafe-inline', which isn't that bad if lock down the rest of your CSP properly, see https://scotthelme.co.uk/can-you-get-pwned-with-css/

Halvor Sakshaug
  • 2,583
  • 1
  • 6
  • 9
  • That is a great article. Thanks! There is no magic out there to put nonce's in a React app that you know of is there? That would be my favourite option if achievable. I am sure the cybersecurity auditors are not going to pass me if I keep the 'unsafe-inline' style-src in there... – John Shanks Dec 07 '22 at 23:08