Skip to content

Latest commit

 

History

History
35 lines (22 loc) · 1.85 KB

content-security-policy.md

File metadata and controls

35 lines (22 loc) · 1.85 KB
Raw

Content Security Policy

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'

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>

← Back to documentation