Add support for CSP nonce

[asual]

Can you please consider adding support for a nonce attribute to the style element that this library injects in the DOM. The custom cursor logic currently doesn't work when CSP is configured to expect a specific nonce.

References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src

[bvaughn]

Want to post a PR that adds a nonce prop and passes it through to the style in an effect?

[bvaughn]

Can you please consider adding support for a nonce attribute to the style element that this library injects in the DOM. The custom cursor logic currently doesn't work when CSP is configured to expect a specific nonce.

Re-visiting this issue today and wanted to ask for clarification. This library does not inject a "style element" into the DOM. (No HTMLStyleElements are used.) It uses inline styles only.

[asual]

I didn't investigate much but I thought that the issue is caused by the setGlobalCursorStyle function.

[bvaughn]

Ah, I believe you're right. It's been a while since I wrote that code and I had overlooked it because I was thinking about the panels/views themselves.

[asual]

The simplest fix for my specific case would be the addition of the following just before the linked setGlobalCursorStyle line but it will be a very bundler-specific solution:
styleElement.setAttribute("nonce", __webpack_nonce__);

I guess we either need a new PanelGroup prop or some other workaround.

[bvaughn]

I can't add anything like that to this project :) Would need to think of a way for people to configure (opt in to) this functionality.

[bvaughn]

I didn't intend to close this issue when leaving my previous comment. (Sorry!)

[bvaughn]

Check out #386. Would this suffice for your use-case?

To use it, you'd need to do something like this:

import { setNonce } from "react-resizable-panels";

setNonce("whatever");

[asual]

I can confirm that the change fixes my use-case. Thanks!

[bvaughn]

Published in version 2.1.0

---

❤️ → ☕ givebrian.coffee