Content Security Policy
February 20, 2021 · View on GitHub
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 a unsafe inline and will violate the strict CSP policy: Content-Security-Policy: style-src 'self'
Option 1: use unsafe-inline
Simple solution number one, use a looser style-src 'unsafe-inline'. ⚠️ This is not ideal as it will loosen your CSP.
- Content-Security-Policy: style-src 'self'
+ Content-Security-Policy: style-src 'unsafe-inline'
Option 2: Use a nonce
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>