feat: support CSP nonce on injected style elements#9655
Open
costajohnt wants to merge 2 commits intoadobe:mainfrom
Open
feat: support CSP nonce on injected style elements#9655costajohnt wants to merge 2 commits intoadobe:mainfrom
costajohnt wants to merge 2 commits intoadobe:mainfrom
Conversation
Add getNonce() utility that reads CSP nonce from <meta property="csp-nonce"> or __webpack_nonce__, and apply it to <style> elements injected by usePress and usePreventScroll. This fixes CSP violations when a strict style-src directive is in effect. Fixes adobe#8273
fece367 to
72626e4
Compare
reidbarber
requested changes
Feb 13, 2026
Member
reidbarber
left a comment
There was a problem hiding this comment.
Thanks for the PR!
- I think we can add
globalThis: "readonly"to thelanguageOptions.globalsineslint.config.mjs(at line 460) to fix the lint step failing. - You also need to sign the CLA, then close and re-open the PR and the build should pass.
The .js test file was missing globalThis in ESLint globals since the TypeScript config block (which declares it) only applies to .ts/.tsx files. This resolves the no-undef lint failure.
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
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
Fixes #8273
Adds CSP nonce support to dynamically injected
<style>elements inusePressandusePreventScroll. Without a nonce, these inline styles are blocked by strict Content Security Policy headers.Approach
Following the approach suggested by @devongovett, this PR adds a
getNonce()utility that reads the nonce from existing pseudo-standards:This automatically works with:
html.cspNonceconfig (injects<meta property="csp-nonce">)__webpack_nonce__global<meta property="csp-nonce" content="...">to the document headChanges
@react-aria/utils: AddedgetNonce()utility + export@react-aria/interactions: Applied nonce to the<style>element inusePress@react-aria/overlays: Applied nonce to the<style>element inusePreventScrollTest plan
getNonce()covering: no config, meta nonce attribute, meta content attribute, webpack global, precedenceusePresstests pass (90/90)