docs/guides/content-security-policy.md
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'
unsafe-inlineSimple 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'
nonceYou 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>