feat: add nonce prop for CSP-compliant user-select style injection#808
Merged
Conversation
The user-select hack injects a <style> element into the document head on drag start. Under a strict Content Security Policy (style-src without 'unsafe-inline') the browser blocks it and logs a violation. This was raised in #791 and the follow-up discussion (comment 4743333644), where the only workaround offered required pre-injecting the element server-side — awkward for client-only apps. Add an optional nonce prop on DraggableCore (inherited by Draggable and flowed through to addUserSelectStyles). When set, it's applied to the injected element via setAttribute('nonce', ...). When omitted, fall back to webpack's __webpack_nonce__ global if defined, read defensively behind a typeof guard so non-webpack bundlers don't throw. The nonce is applied only when the element is first created, preserving the existing skip-if-present behavior. Also documents enableUserSelectHack={false} as the no-prop opt-out. Closes #791
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The user-select hack injects a
<style>element into the document<head>on drag start (enableUserSelectHack, on by default). Under a strict Content Security Policy that omits'unsafe-inline'fromstyle-src, the browser blocks that element and logs a violation.This was raised in #791 and the follow-up comment 4743333644. The workaround offered there (pre-inject the element server-side) is awkward for client-only apps, which is the gap this closes.
This PR adds first-class CSP support:
nonce?: stringprop onDraggableCore. It's inherited byDraggable(which spreads undestructured props through) and flows toaddUserSelectStyles, which applies it viasetAttribute('nonce', ...).nonceis passed, fall back to webpack's__webpack_nonce__global when defined — read behind atypeofguard so non-webpack bundlers don't throw. This is the same convention styled-components / emotion use, and means most webpack users need zero config.__webpack_nonce__fallback, andenableUserSelectHack={false}as a no-prop opt-out.Because
react-resizablealready spreadsdraggableOptsontoDraggableCore, its users get this for free viadraggableOpts={{ nonce }}once this ships — no change needed there.Test plan
yarn typecheck— cleanyarn lint— cleanyarn test— 204 passing, including 7 new tests:addUserSelectStyles: no nonce by default, explicit nonce applied, not retroactively applied to an existing element,__webpack_nonce__fallback, explicit-over-global precedenceDraggableCore: nonce reaches the injected element on a real drag startyarn build— generated cjs/umd preserve thetypeof __webpack_nonce__reference (not mangled by esbuild) and public.d.tsexposesnonce?: stringCloses #791