This page is to help you get around the CSP error: "Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'"." A huge thankyou to @Zweder for driving this effort
Content Security Policy (CSP) is a way of controlling where a browser can download assets from, as well as what those assets are allowed to do.
Background reading on CSP
react-beautiful-dnd creates a <style> element in the <head> and dynamically updates it's value (see [/docs/guides/preset-styles.md] and Dragging React performance forward). This is considered an unsafe inline and will violate the strict CSP policy: Content-Security-Policy: style-src 'self'
Simple solution number one, use a looser style-src 'unsafe-inline'.
- Content-Security-Policy: style-src 'self'
+ Content-Security-Policy: style-src 'unsafe-inline'You can use the stricter directive Content-Security-Policy: style-src 'self' as long as you provide a nonce (number used once).
The JSS project has a great CSP guide which goes through how you can setup a a nonce. Once you have a nonce value in the browser you can pass it into a <DragDropContext /> to tell react-beautiful-dnd to use the nonce.
<DragDropContext nonce={getNonce()}>{/*...*/}</DragDropContext>