feat: support CSP nonce on injected style elements by costajohnt · Pull Request #9655 · adobe/react-spectrum

costajohnt · 2026-02-13T16:36:33Z

Summary

Adds CSP nonce support to dynamically injected <style> elements in usePress and usePreventScroll. 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:

function getNonce(): string | undefined {
  let meta = document.querySelector('meta[property="csp-nonce"]');
  return meta?.nonce || meta?.content || globalThis['__webpack_nonce__'];
}

This automatically works with:

Vite — via html.cspNonce config (injects <meta property="csp-nonce">)
webpack — via the __webpack_nonce__ global
Any framework — that adds <meta property="csp-nonce" content="..."> to the document head

Changes

@react-aria/utils: Added getNonce() utility + export
@react-aria/interactions: Applied nonce to the <style> element in usePress
@react-aria/overlays: Applied nonce to the <style> element in usePreventScroll

Test plan

Added 5 unit tests for getNonce() covering: no config, meta nonce attribute, meta content attribute, webpack global, precedence
All existing usePress tests pass (90/90)
All existing overlay tests pass (191/191)

reidbarber

Thanks for the PR!

I think we can add globalThis: "readonly" to the languageOptions.globals in eslint.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.

snowystinger

Thanks for the PR, one small comment for typescript

snowystinger · 2026-02-16T00:04:10Z

packages/@react-aria/utils/src/getNonce.ts

+
+/**
+ * Returns the CSP nonce, if configured via a `<meta property="csp-nonce">` tag or `__webpack_nonce__`.
+ * This allows dynamically injected `<style>` elements to work with Content Security Policy.
+ */
+export function getNonce(doc?: Document): string | undefined {
+  let d = doc ?? (typeof document !== 'undefined' ? document : undefined);
+  let meta = d
+    ? d.querySelector('meta[property="csp-nonce"]') as HTMLMetaElement | null
+    : null;
+  return meta?.nonce || meta?.content || (globalThis as Record<string, any>)['__webpack_nonce__'] || undefined;
+}


No need to cast things, we can use type guards

Suggested change

/**

* Returns the CSP nonce, if configured via a `<meta property="csp-nonce">` tag or `__webpack_nonce__`.

* This allows dynamically injected `<style>` elements to work with Content Security Policy.

*/

export function getNonce(doc?: Document): string | undefined {

let d = doc ?? (typeof document !== 'undefined' ? document : undefined);

let meta = d

? d.querySelector('meta[property="csp-nonce"]') as HTMLMetaElement | null

: null;

return meta?.nonce || meta?.content || (globalThis as Record<string, any>)['__webpack_nonce__'] || undefined;

}

import {getOwnerWindow} from './domHelpers';

/**

* Returns the CSP nonce, if configured via a `<meta property="csp-nonce">` tag or `__webpack_nonce__`.

* This allows dynamically injected `<style>` elements to work with Content Security Policy.

*/

export function getNonce(doc?: Document): string | undefined {

let d = doc ?? (typeof document !== 'undefined' ? document : undefined);

let meta = d

? d.querySelector('meta[property="csp-nonce"]')

: null;

return (meta && meta instanceof getOwnerWindow(meta).HTMLMetaElement && (meta?.nonce || meta?.content)) || globalThis['__webpack_nonce__'] || undefined;

}

Might also be worth caching this return value?

costajohnt · 2026-03-04T17:02:29Z

@snowystinger This is still marked as changes requested but I believe I've addressed all concerns with recent commits. Can you take another look when you get a changes please? 🙇

nwidynski · 2026-03-04T18:36:30Z

packages/@react-aria/utils/src/getNonce.ts

+/** Reset the cached nonce value. Exported for testing only. */
+export function resetNonceCache(): void {
+  cachedNonce = undefined;
+  cachePopulated = false;
+}
+


I think the cache should be a WeakMap on the Document. Also we can just skip cache entirely for test environments rather than exporting a reset helper.

we can still do the reset and it's good to go through the same things the browser would, but we shouldn't need to export it from the index file. I've added comments to show how to do that.
It'd be fine to have it in a WeakMap, but what were you thinking for the key?

I was thinking Document for the key, nonce as the value. Right now the caching would break with multiple documents.

ah, yeah, that'd be a good idea, thanks for bringing that up

snowystinger · 2026-03-04T20:14:53Z

packages/@react-aria/utils/src/index.ts

 export {isCtrlKeyPressed, willOpenKeyboard} from './keyboard';
 export {useEnterAnimation, useExitAnimation} from './animation';
 export {isFocusable, isTabbable} from './isFocusable';
+export {getNonce, resetNonceCache} from './getNonce';


Suggested change

export {getNonce, resetNonceCache} from './getNonce';

export {getNonce} from './getNonce';

snowystinger · 2026-03-04T20:15:25Z

packages/@react-aria/utils/test/getNonce.test.js

+ * governing permissions and limitations under the License.
+ */
+
+import {getNonce, resetNonceCache} from '../';


Suggested change

import {getNonce, resetNonceCache} from '../';

import {getNonce} from '../';

import {resetNonceCache} from '../src/getNonce';

snowystinger · 2026-03-04T20:17:03Z

packages/@react-aria/utils/src/getNonce.ts

+/** Reset the cached nonce value. Exported for testing only. */
+export function resetNonceCache(): void {
+  cachedNonce = undefined;
+  cachePopulated = false;
+}
+


we can still do the reset and it's good to go through the same things the browser would, but we shouldn't need to export it from the index file. I've added comments to show how to do that.
It'd be fine to have it in a WeakMap, but what were you thinking for the key?

outdated

snowystinger

Thanks for the quick fixes!

reidbarber

Nice! Just two small requests

reidbarber · 2026-03-06T16:41:19Z

packages/@react-aria/utils/src/getNonce.ts

+  }
+
+  let meta = d.querySelector('meta[property="csp-nonce"]');
+  let nonce = (meta && meta instanceof getOwnerWindow(meta).HTMLMetaElement && (meta.nonce || meta.content)) || globalThis['__webpack_nonce__'] || undefined;


The webpack fallback uses globalThis, but in an iframe it might have it's own __webpack_nonce__. Maybe we want to have something like:

type NonceWindow = Window & typeof globalThis & { __webpack_nonce__?: string }; // ... function getWebpackNonce(doc?: Document): string | undefined { let ownerWindow = doc?.defaultView as NonceWindow | null | undefined; return ownerWindow?.__webpack_nonce__ || globalThis['__webpack_nonce__'] || undefined; }

and we can call that on line 29 and 37.

reidbarber · 2026-03-06T16:44:12Z

packages/@react-aria/utils/src/getNonce.ts

+  let meta = d.querySelector('meta[property="csp-nonce"]');
+  let nonce = (meta && meta instanceof getOwnerWindow(meta).HTMLMetaElement && (meta.nonce || meta.content)) || globalThis['__webpack_nonce__'] || undefined;
+
+  nonceCache.set(d, nonce);


This caches misses, so we probably want:

Suggested change

nonceCache.set(d, nonce);

if (nonce !== undefined) {

nonceCache.set(d, nonce);

}

then we could remove undefined from the type above:

let nonceCache = new WeakMap<Document, string>();

reidbarber · 2026-03-06T16:47:54Z

packages/@react-aria/utils/test/getNonce.test.js

+    document.head.appendChild(meta);
+
+    expect(getNonce()).toBe('content-fallback');
+  });


Here are some tests for the requested changes:

it('does not cache a missing nonce', () => { expect(getNonce()).toBeUndefined(); globalThis['__webpack_nonce__'] = 'late-webpack-nonce'; expect(getNonce()).toBe('late-webpack-nonce'); }); it('detects a meta nonce added after an initial miss', () => { expect(getNonce()).toBeUndefined(); let meta = document.createElement('meta'); meta.setAttribute('property', 'csp-nonce'); meta.nonce = 'late-meta-nonce'; document.head.appendChild(meta); expect(getNonce()).toBe('late-meta-nonce'); }); it('reads __webpack_nonce__ from the provided document window', () => { let iframe = document.createElement('iframe'); document.body.appendChild(iframe); globalThis['__webpack_nonce__'] = 'parent-webpack-nonce'; iframe.contentWindow['__webpack_nonce__'] = 'iframe-webpack-nonce'; expect(getNonce(iframe.contentWindow.document)).toBe('iframe-webpack-nonce'); });

with cleanup of the iframe in afterEach:

document.querySelectorAll('iframe').forEach(el => el.remove());

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

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.

Address review feedback: - Replace type cast with instanceof type guard via getOwnerWindow - Cache nonce result for repeated calls without explicit doc arg - Add globalThis to ESLint globals to fix lint failure

Add resetNonceCache() export and call it in afterEach to prevent cached values from leaking across test runs.

globalThis is already declared in eslint.config.mjs globals, so the /* global globalThis */ comment triggers no-redeclare.

- Replace module-level cache with WeakMap<Document, string | undefined> so each document gets its own cached nonce (supports iframes) - Remove resetNonceCache from public API (only needed for tests) - Import resetNonceCache directly from source in test file

Remove unnecessary ?. operators after null guard in getNonce, and add tests for nonce/content priority, caching behavior, cache reset, empty string handling, and content fallback.

Extract getWebpackNonce() helper that checks the document's owning window before falling back to globalThis, supporting iframe scenarios. Only cache defined nonce values so late-arriving nonces are detected. Add tests for no-cache-on-miss, late meta detection, and per-window webpack nonce resolution.

github-actions bot added the RAC label Feb 13, 2026

costajohnt force-pushed the fix/csp-nonce-usepress-8273 branch from fece367 to 72626e4 Compare February 13, 2026 16:41

costajohnt marked this pull request as ready for review February 13, 2026 16:41

reidbarber previously requested changes Feb 13, 2026

View reviewed changes

snowystinger reviewed Feb 16, 2026

View reviewed changes

costajohnt closed this Feb 18, 2026

costajohnt reopened this Feb 18, 2026

costajohnt requested a review from reidbarber February 18, 2026 02:12

devongovett force-pushed the main branch from 8df1873 to a6e720d Compare March 4, 2026 00:20

nwidynski reviewed Mar 4, 2026

View reviewed changes

snowystinger reviewed Mar 4, 2026

View reviewed changes

costajohnt mentioned this pull request Mar 4, 2026

Classification bug: latestCommitDate includes non-contributor commits, masking unaddressed feedback costajohnt/oss-autopilot#547

Closed

snowystinger previously approved these changes Mar 5, 2026

View reviewed changes

snowystinger added the ready for review label Mar 5, 2026

reidbarber requested changes Mar 6, 2026

View reviewed changes

costajohnt added 7 commits March 6, 2026 10:48

fix: add globalThis ESLint global to getNonce test file

5e8db8f

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.

fix: use type guard, cache nonce, and add globalThis ESLint global

fe8156a

Address review feedback: - Replace type cast with instanceof type guard via getOwnerWindow - Cache nonce result for repeated calls without explicit doc arg - Add globalThis to ESLint globals to fix lint failure

fix: reset nonce cache between tests

19996cb

Add resetNonceCache() export and call it in afterEach to prevent cached values from leaking across test runs.

fix: remove redundant globalThis inline global directive

86d3bf0

globalThis is already declared in eslint.config.mjs globals, so the /* global globalThis */ comment triggers no-redeclare.

fix: remove redundant optional chaining and add comprehensive tests

7956387

Remove unnecessary ?. operators after null guard in getNonce, and add tests for nonce/content priority, caching behavior, cache reset, empty string handling, and content fallback.

costajohnt force-pushed the fix/csp-nonce-usepress-8273 branch from c4bde89 to 7956387 Compare March 6, 2026 18:48

costajohnt dismissed snowystinger’s stale review via 56fa640 March 6, 2026 19:50

	export {getNonce, resetNonceCache} from './getNonce';
	export {getNonce} from './getNonce';

	import {getNonce, resetNonceCache} from '../';
	import {getNonce} from '../';
	import {resetNonceCache} from '../src/getNonce';

Conversation

costajohnt commented Feb 13, 2026

Summary

Approach

Changes

Test plan

Uh oh!

reidbarber left a comment

Choose a reason for hiding this comment

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nwidynski Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

costajohnt commented Mar 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

reidbarber left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nwidynski Feb 17, 2026 •

edited

Loading