feat: support CSP nonce on injected style elements

Add a getNonce() utility that reads the CSP nonce from a
<meta property="csp-nonce"> tag (used by Vite) or the
__webpack_nonce__ global (used by webpack). Apply the nonce to
dynamically injected <style> elements in usePress and
usePreventScroll so they work with strict Content Security Policy.

Fixes #8273

Author: costajohnt

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();
+    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. */
@@ -130,6 +130,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,10 @@
+/**
+ * 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(): string | undefined {
+  let meta = typeof document !== 'undefined'
+    ? document.querySelector('meta[property="csp-nonce"]') as HTMLMetaElement | null
+    : null;
+  return meta?.nonce || meta?.content || (globalThis as Record<string, any>)['__webpack_nonce__'] || undefined;
+}

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,58 @@
+/*
+ * 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 '../';
+
+describe('getNonce', () => {
+  afterEach(() => {
+    document.querySelectorAll('meta[property="csp-nonce"]').forEach(el => el.remove());
+    delete globalThis['__webpack_nonce__'];
+  });
+
+  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');
+  });
+});