Issue loading inline style because of CSP policy

[ssrivastava1207]

The react-draggable library adds a <style> tag to the with just a couple of CSS style rules in it. This is the style tag with id = react-draggable-style-el. It is only added once per page load.

We get a CSP error saying that the browser refuses to apply an inline style because it violates the CSP policy.

Reference - https://content-security-policy.com/

React-draggable version 3.1.1

Tried upgrading to latest version of both React-Draggable and react-grid-layout but there is no support for strict CSP.

Fix can be by providing nonce variable support like many other libraries. Or not use inline style.

[kaydelaney]

This is an issue for Grafana users who want to prevent inline styles as part of their CSP.
Perhaps adding a nonce prop to ReactGridLayout, Draggable, and Resizable would be enough?

[Harut101]

Hi everyone, and what if I do not have ReactGridLayout, Draggable, and Resizable

I am using import RGL, { Layouts, Responsive, WidthProvider } from "react-grid-layout";

[ajithvs]

Any solutions to this problem?
Facing same issue in my react project. I think providing an nonce prop is the only solution to this problem.

[z-yashjais]

Hey Guys,

We are facing the same CSP issue. Are there any updates around this issue?

[STRML]

See a fix in this comment. #791 (comment)