Add CSP nonce support

Author: david-cho-lerat-sonarsource

src/components/echoes-provider/EchoesProvider.tsx

@@ -18,15 +18,29 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
 import { HeadlessMantineProvider } from '@mantine/core';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { Toaster as ToastContainer } from 'sonner';
 import { ToastGlobalStyles } from '~common/components/Toast';
 import { TooltipProvider, TooltipProviderProps, TypographyGlobalStyles } from '..';
 import { SelectGlobalStyles } from '../select/SelectCommons';
+import { NonceContext } from './NonceContext';
 
 export interface EchoesProviderProps {
+  /**
+   * A nonce value for inline styles (Content Security Policy - CSP) (optional).
+   * When provided, this nonce will be:
+   * - Applied to Emotion's CSS-in-JS style tags
+   * - Made available to components like Spotlight that need it for inline styles
+   * - Used to comply with strict Content Security Policy requirements
+   *
+   * This should be set once at the application root and will automatically
+   * propagate to all Echoes components that require it.
+   */
+  nonce?: string;
   /**
    * Custom class name for all the toasts (optional).
    */
@@ -85,30 +99,57 @@ export interface EchoesProviderProps {
  *   );
  * }
  * ```
+ *
+ * **Content Security Policy (CSP) Support**
+ *
+ * If your application uses a strict Content Security Policy, you can provide a nonce
+ * to enable inline styles required by Echoes components:
+ *
+ * ```tsx
+ * function App() {
+ *   // Get nonce from meta tag or server context
+ *   const nonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content');
+ *
+ *   return (
+ *     <EchoesProvider nonce={nonce}>
+ *       {children}
+ *     </EchoesProvider>
+ *   );
+ * }
+ * ```
  */
 export function EchoesProvider(props: PropsWithChildren<EchoesProviderProps>) {
-  const { children, tooltipsDelayDuration, toastsClassName, toastsVisibleNb = 5 } = props;
+  const { children, nonce, tooltipsDelayDuration, toastsClassName, toastsVisibleNb = 5 } = props;
   const intl = useIntl();
 
+  // Create Emotion cache with nonce support for CSP compliance
+  const emotionCache = useMemo(() => {
+    const cache = createCache({ key: 'echoes', nonce });
+    cache.compat = true;
+    return cache;
+  }, [nonce]);
+
   return (
-    <>
-      <TypographyGlobalStyles />
-      <SelectGlobalStyles />
-      <ToastGlobalStyles />
-      <TooltipProvider delayDuration={tooltipsDelayDuration}>
-        <HeadlessMantineProvider>{children}</HeadlessMantineProvider>
-        <ToastContainer
-          containerAriaLabel={intl.formatMessage({
-            id: 'toasts.keyboard_shortcut_aria_label',
-            defaultMessage: 'Focus toasts messages with',
-            description: 'ARIA-label for the toasts container keyboard shortcut',
-          })}
-          position="bottom-right"
-          toastOptions={{ className: toastsClassName }}
-          visibleToasts={toastsVisibleNb}
-        />
-      </TooltipProvider>
-    </>
+    <CacheProvider value={emotionCache}>
+      <NonceContext.Provider value={nonce}>
+        <TypographyGlobalStyles />
+        <SelectGlobalStyles />
+        <ToastGlobalStyles />
+        <TooltipProvider delayDuration={tooltipsDelayDuration}>
+          <HeadlessMantineProvider>{children}</HeadlessMantineProvider>
+          <ToastContainer
+            containerAriaLabel={intl.formatMessage({
+              id: 'toasts.keyboard_shortcut_aria_label',
+              defaultMessage: 'Focus toasts messages with',
+              description: 'ARIA-label for the toasts container keyboard shortcut',
+            })}
+            position="bottom-right"
+            toastOptions={{ className: toastsClassName }}
+            visibleToasts={toastsVisibleNb}
+          />
+        </TooltipProvider>
+      </NonceContext.Provider>
+    </CacheProvider>
   );
 }
 

src/components/echoes-provider/NonceContext.ts

@@ -0,0 +1,39 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import { createContext, useContext } from 'react';
+
+/**
+ * Context for providing CSP nonce value to components that need it.
+ * This is used internally by Echoes components to access the nonce
+ * configured in the EchoesProvider.
+ */
+export const NonceContext = createContext<string | undefined>(undefined);
+
+/**
+ * Hook to access the CSP nonce from the EchoesProvider.
+ * Components that need to apply nonces to inline styles for CSP compliance
+ * can use this hook to retrieve the globally configured nonce value.
+ *
+ * @returns The nonce string if configured, undefined otherwise
+ */
+export function useNonce(): string | undefined {
+  return useContext(NonceContext);
+}

src/components/echoes-provider/index.ts

@@ -19,3 +19,4 @@
  */
 
 export { EchoesProvider, type EchoesProviderProps } from './EchoesProvider';
+export { useNonce } from './NonceContext';

src/components/spotlight/Spotlight.tsx

@@ -21,6 +21,7 @@
 import { PropsWithChildren } from 'react';
 import { useIntl } from 'react-intl';
 import ReactJoyride, { TooltipRenderProps } from 'react-joyride';
+import { useNonce } from '../echoes-provider/NonceContext';
 import { SpotlightModalForStep } from './SpotlightModalForStep';
 import { SpotlightModalPlacement, SpotlightProps, SpotlightStep } from './SpotlightTypes';
 
@@ -97,6 +98,7 @@ export function Spotlight(props: Readonly<SpotlightProps>) {
     image,
     isRunning = true,
     nextLabel,
+    nonce: nonceProp,
     shouldDisableOverlayClose,
     skipLabel,
     stepIndex,
@@ -105,6 +107,10 @@ export function Spotlight(props: Readonly<SpotlightProps>) {
   } = props;
 
   const intl = useIntl();
+  const nonceFromContext = useNonce();
+
+  // Use prop nonce if provided, otherwise fall back to context nonce
+  const nonce = nonceProp ?? nonceFromContext;
 
   const labels = {
     back: intl.formatMessage({
@@ -152,6 +158,7 @@ export function Spotlight(props: Readonly<SpotlightProps>) {
         nextLabelWithProgress: nextLabel ?? labels.next,
         skip: skipLabel ?? labels.skip,
       }}
+      nonce={nonce}
       run={isRunning}
       stepIndex={stepIndex}
       /*--------------------------------------------------------------------------------------------

src/components/spotlight/SpotlightTypes.tsx

@@ -122,6 +122,14 @@ export interface SpotlightProps {
    */
   nextLabel?: string;
 
+  /**
+   * A nonce value for inline styles (Content Security Policy - CSP) (optional).
+   * In most cases, you should configure the nonce once in the EchoesProvider
+   * instead of passing it to individual components. This prop is only needed
+   * if you need to override the global nonce for this specific Spotlight instance.
+   */
+  nonce?: string;
+
   /**
    * Shoud we disable closing the spotlight when clicking the overlay?
    * Defaults to false when there's only one step, true otherwise (optional)