feat: support CSP nonce on injected style elements (adobe#9655)

* feat: support CSP nonce on dynamically injected style elements

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

* fix: add globalThis ESLint global to getNonce test file

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

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

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

* fix: remove redundant globalThis inline global directive

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

* fix: use WeakMap for nonce caching to support multiple documents

- 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

* fix: remove redundant optional chaining and add comprehensive tests

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.

* fix: check document window for __webpack_nonce__ and don't cache misses

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.

Author: costajohnt

eslint.config.mjs

@@ -457,6 +457,7 @@ export default [{
             FileSystemDirectoryEntry: "readonly",
             FileSystemEntry: "readonly",
             IS_REACT_ACT_ENVIRONMENT: "readonly",
+            globalThis: "readonly",
         },
 
         parser: tseslint.parser,

packages/@react-aria/interactions/src/usePress.ts

@@ -19,6 +19,7 @@ import {
   chain,
   focusWithoutScrolling,
   getEventTarget,
+  getNonce,
   getOwnerDocument,
   getOwnerWindow,
   isMac,
@@ -887,6 +888,10 @@ export function usePress(props: PressHookProps): PressResult {
 
     const style = ownerDocument.createElement('style');
     style.id = STYLE_ID;
+    let nonce = getNonce(ownerDocument);
+    if (nonce) {
+      style.nonce = nonce;
+    }
     // touchAction: 'manipulation' is supposed to be equivalent, but in
     // Safari it causes onPointerCancel not to fire on scroll.
     // https://bugs.webkit.org/show_bug.cgi?id=240917

packages/@react-aria/overlays/src/usePreventScroll.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {chain, getActiveElement, getEventTarget, getScrollParent, isIOS, isScrollable, useLayoutEffect, willOpenKeyboard} from '@react-aria/utils';
+import {chain, getActiveElement, getEventTarget, getNonce, getScrollParent, isIOS, isScrollable, useLayoutEffect, willOpenKeyboard} from '@react-aria/utils';
 
 interface PreventScrollOptions {
   /** Whether the scroll lock is disabled. */
@@ -134,6 +134,10 @@ function preventScrollMobileSafari() {
   // the window instead.
   // This must be applied before the touchstart event as of iOS 26, so inject it as a <style> element.
   let style = document.createElement('style');
+  let nonce = getNonce();
+  if (nonce) {
+    style.nonce = nonce;
+  }
   style.textContent = `
 @layer {
   * {

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

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {getOwnerWindow} from './domHelpers';
+
+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;
+}
+
+let nonceCache = new WeakMap<Document, string>();
+
+/** Reset the cached nonce value. Exported for testing only. */
+export function resetNonceCache(): void {
+  nonceCache = new WeakMap();
+}
+
+/**
+ * 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);
+  if (!d) {
+    return getWebpackNonce(d);
+  }
+
+  if (nonceCache.has(d)) {
+    return nonceCache.get(d);
+  }
+
+  let meta = d.querySelector('meta[property="csp-nonce"]');
+  let nonce = (meta && meta instanceof getOwnerWindow(meta).HTMLMetaElement && (meta.nonce || meta.content)) || getWebpackNonce(d) || undefined;
+
+  if (nonce !== undefined) {
+    nonceCache.set(d, nonce);
+  }
+  return nonce;
+}

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

@@ -51,5 +51,6 @@ export {CLEAR_FOCUS_EVENT, FOCUS_EVENT} from './constants';
 export {isCtrlKeyPressed, willOpenKeyboard} from './keyboard';
 export {useEnterAnimation, useExitAnimation} from './animation';
 export {isFocusable, isTabbable} from './isFocusable';
+export {getNonce} from './getNonce';
 
 export type {LoadMoreSentinelProps} from './useLoadMoreSentinel';

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

@@ -0,0 +1,153 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {getNonce} from '../';
+import {resetNonceCache} from '../src/getNonce';
+
+describe('getNonce', () => {
+  afterEach(() => {
+    document.querySelectorAll('meta[property="csp-nonce"]').forEach(el => el.remove());
+    document.querySelectorAll('iframe').forEach(el => el.remove());
+    delete globalThis['__webpack_nonce__'];
+    resetNonceCache();
+  });
+
+  it('returns undefined when no nonce is configured', () => {
+    expect(getNonce()).toBeUndefined();
+  });
+
+  it('reads nonce from meta tag nonce attribute', () => {
+    let meta = document.createElement('meta');
+    meta.setAttribute('property', 'csp-nonce');
+    meta.nonce = 'test-nonce-123';
+    document.head.appendChild(meta);
+
+    expect(getNonce()).toBe('test-nonce-123');
+  });
+
+  it('reads nonce from meta tag content attribute', () => {
+    let meta = document.createElement('meta');
+    meta.setAttribute('property', 'csp-nonce');
+    meta.setAttribute('content', 'content-nonce-456');
+    document.head.appendChild(meta);
+
+    expect(getNonce()).toBe('content-nonce-456');
+  });
+
+  it('reads nonce from __webpack_nonce__ global', () => {
+    globalThis['__webpack_nonce__'] = 'webpack-nonce-789';
+
+    expect(getNonce()).toBe('webpack-nonce-789');
+  });
+
+  it('prefers meta tag nonce over __webpack_nonce__', () => {
+    let meta = document.createElement('meta');
+    meta.setAttribute('property', 'csp-nonce');
+    meta.nonce = 'meta-nonce';
+    document.head.appendChild(meta);
+    globalThis['__webpack_nonce__'] = 'webpack-nonce';
+
+    expect(getNonce()).toBe('meta-nonce');
+  });
+
+  it('prefers nonce attribute over content attribute on the same meta tag', () => {
+    let meta = document.createElement('meta');
+    meta.setAttribute('property', 'csp-nonce');
+    meta.nonce = 'nonce-attr';
+    meta.setAttribute('content', 'content-attr');
+    document.head.appendChild(meta);
+
+    expect(getNonce()).toBe('nonce-attr');
+  });
+
+  it('caches the nonce per document', () => {
+    let meta = document.createElement('meta');
+    meta.setAttribute('property', 'csp-nonce');
+    meta.nonce = 'cached-nonce';
+    document.head.appendChild(meta);
+
+    expect(getNonce()).toBe('cached-nonce');
+
+    // Remove the meta tag — cached value should still be returned
+    meta.remove();
+    expect(getNonce()).toBe('cached-nonce');
+  });
+
+  it('resetNonceCache clears the cached value', () => {
+    let meta = document.createElement('meta');
+    meta.setAttribute('property', 'csp-nonce');
+    meta.nonce = 'first-nonce';
+    document.head.appendChild(meta);
+
+    expect(getNonce()).toBe('first-nonce');
+
+    // Change the nonce and clear the cache
+    meta.nonce = 'second-nonce';
+    resetNonceCache();
+
+    expect(getNonce()).toBe('second-nonce');
+  });
+
+  it('treats empty string nonce as no nonce', () => {
+    let meta = document.createElement('meta');
+    meta.setAttribute('property', 'csp-nonce');
+    meta.nonce = '';
+    meta.setAttribute('content', '');
+    document.head.appendChild(meta);
+
+    expect(getNonce()).toBeUndefined();
+  });
+
+  it('falls back to content when nonce attribute is empty', () => {
+    let meta = document.createElement('meta');
+    meta.setAttribute('property', 'csp-nonce');
+    meta.nonce = '';
+    meta.setAttribute('content', 'content-fallback');
+    document.head.appendChild(meta);
+
+    expect(getNonce()).toBe('content-fallback');
+  });
+
+  it('does not cache a missing nonce', () => {
+    // First call: no nonce configured — should return undefined
+    expect(getNonce()).toBeUndefined();
+
+    // Now set a nonce — it should be picked up because undefined wasn't cached
+    globalThis['__webpack_nonce__'] = 'late-nonce';
+    expect(getNonce()).toBe('late-nonce');
+  });
+
+  it('detects a meta nonce added after an initial miss', () => {
+    // First call: no meta tag — should return undefined
+    expect(getNonce()).toBeUndefined();
+
+    // Add a meta tag after the initial miss
+    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);
+
+    // Set different nonces on parent and iframe windows
+    globalThis['__webpack_nonce__'] = 'parent-nonce';
+    iframe.contentWindow['__webpack_nonce__'] = 'iframe-nonce';
+
+    // When given the iframe's document, should prefer the iframe's nonce
+    expect(getNonce(iframe.contentDocument)).toBe('iframe-nonce');
+  });
+});