feat: support CSP nonce on injected style elements

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. */
@@ -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,45 @@
+/*
+ * 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';
+
+let cachedNonce: string | undefined;
+let cachePopulated = false;
+
+/** Reset the cached nonce value. Exported for testing only. */
+export function resetNonceCache(): void {
+  cachedNonce = undefined;
+  cachePopulated = false;
+}
+
+/**
+ * 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 {
+  if (!doc && cachePopulated) {
+    return cachedNonce;
+  }
+
+  let d = doc ?? (typeof document !== 'undefined' ? document : undefined);
+  let meta = d
+    ? d.querySelector('meta[property="csp-nonce"]')
+    : null;
+  let nonce = (meta && meta instanceof getOwnerWindow(meta).HTMLMetaElement && (meta?.nonce || meta?.content)) || globalThis['__webpack_nonce__'] || undefined;
+
+  if (!doc) {
+    cachedNonce = nonce;
+    cachePopulated = true;
+  }
+
+  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, resetNonceCache} from './getNonce';
 
 export type {LoadMoreSentinelProps} from './useLoadMoreSentinel';

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

@@ -0,0 +1,59 @@
+/*
+ * 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, resetNonceCache} from '../';
+
+describe('getNonce', () => {
+  afterEach(() => {
+    document.querySelectorAll('meta[property="csp-nonce"]').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');
+  });
+});