Add CSP nonce support for consoleReplay script

Fixes #1930

- Add optional nonce parameter to wrapInScriptTags() and buildConsoleReplay()
- Add getConsoleReplayScript() method to return JS without script tags
- Update Ruby helper to wrap console script with CSP nonce using content_security_policy_nonce(:script)
- Fix bug: change consoleLogScript to consoleReplayScript in server_render_js
- Pro helper now also wraps console scripts with nonce

This allows the consoleReplay script to work with Content Security Policy
without violations when using script-src :self or similar policies.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: justin808

lib/react_on_rails/helper.rb

@@ -226,7 +226,7 @@ def server_render_js(js_expression, options = {})
           }
         }
 
-        consoleReplayScript = ReactOnRails.buildConsoleReplay();
+        consoleReplayScript = ReactOnRails.getConsoleReplayScript();
 
         return JSON.stringify({
             html: htmlResult,
@@ -242,8 +242,9 @@ def server_render_js(js_expression, options = {})
                .server_render_js_with_console_logging(js_code, render_options)
 
       html = result["html"]
-      console_log_script = result["consoleLogScript"]
-      raw("#{html}#{console_log_script if render_options.replay_console}")
+      console_script = result["consoleReplayScript"]
+      console_script_tag = wrap_console_script_with_nonce(console_script) if render_options.replay_console
+      raw("#{html}#{console_script_tag}")
     rescue ExecJS::ProgramError => err
       raise ReactOnRails::PrerenderError.new(component_name: "N/A (server_render_js called)",
                                              err: err,
@@ -394,7 +395,7 @@ def build_react_component_result_for_server_rendered_string(
                                     server_rendered_html.html_safe,
                                     content_tag_options)
 
-      result_console_script = render_options.replay_console ? console_script : ""
+      result_console_script = render_options.replay_console ? wrap_console_script_with_nonce(console_script) : ""
       result = compose_react_component_html_with_spec_and_console(
         component_specification_tag, rendered_output, result_console_script
       )
@@ -419,7 +420,7 @@ def build_react_component_result_for_server_rendered_hash(
                                     server_rendered_html[COMPONENT_HTML_KEY].html_safe,
                                     content_tag_options)
 
-      result_console_script = render_options.replay_console ? console_script : ""
+      result_console_script = render_options.replay_console ? wrap_console_script_with_nonce(console_script) : ""
       result = compose_react_component_html_with_spec_and_console(
         component_specification_tag, rendered_output, result_console_script
       )
@@ -436,6 +437,19 @@ def build_react_component_result_for_server_rendered_hash(
       )
     end
 
+    def wrap_console_script_with_nonce(console_script_code)
+      return "" if console_script_code.blank?
+
+      # Get the CSP nonce if available
+      nonce = content_security_policy_nonce(:script) if respond_to?(:content_security_policy_nonce)
+
+      # Build the script tag with nonce if available
+      script_options = { id: "consoleReplayLog" }
+      script_options[:nonce] = nonce if nonce.present?
+
+      content_tag(:script, console_script_code.html_safe, script_options)
+    end
+
     def compose_react_component_html_with_spec_and_console(component_specification_tag, rendered_output,
                                                            console_script)
       # IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.

packages/react-on-rails/src/RenderUtils.ts

@@ -1,11 +1,13 @@
 // eslint-disable-next-line import/prefer-default-export -- only one export for now, but others may be added later
-export function wrapInScriptTags(scriptId: string, scriptBody: string): string {
+export function wrapInScriptTags(scriptId: string, scriptBody: string, nonce?: string): string {
   if (!scriptBody) {
     return '';
   }
 
+  const nonceAttr = nonce ? ` nonce="${nonce}"` : '';
+
   return `
-<script id="${scriptId}">
+<script id="${scriptId}"${nonceAttr}>
 ${scriptBody}
 </script>`;
 }

packages/react-on-rails/src/base/client.ts

@@ -10,7 +10,7 @@ import type {
   ReactOnRailsInternal,
 } from '../types/index.ts';
 import * as Authenticity from '../Authenticity.ts';
-import buildConsoleReplay from '../buildConsoleReplay.ts';
+import buildConsoleReplay, { consoleReplay } from '../buildConsoleReplay.ts';
 import reactHydrateOrRender from '../reactHydrateOrRender.ts';
 import createReactOutput from '../createReactOutput.ts';
 
@@ -175,6 +175,10 @@ Fix: Use only react-on-rails OR react-on-rails-pro, not both.`);
       return buildConsoleReplay();
     },
 
+    getConsoleReplayScript(): string {
+      return consoleReplay();
+    },
+
     resetOptions(): void {
       this.options = { ...DEFAULT_OPTIONS };
     },

packages/react-on-rails/src/buildConsoleReplay.ts

@@ -10,7 +10,11 @@ declare global {
   }
 }
 
-/** @internal Exported only for tests */
+/**
+ * Returns the console replay JavaScript code without wrapping it in script tags.
+ * This is useful when you want to wrap the code in script tags yourself (e.g., with a CSP nonce).
+ * @internal Exported for tests and for Ruby helper to wrap with nonce
+ */
 export function consoleReplay(
   customConsoleHistory: (typeof console)['history'] | undefined = undefined,
   numberOfMessagesToSkip: number = 0,
@@ -53,10 +57,11 @@ export function consoleReplay(
 export default function buildConsoleReplay(
   customConsoleHistory: (typeof console)['history'] | undefined = undefined,
   numberOfMessagesToSkip: number = 0,
+  nonce?: string,
 ): string {
   const consoleReplayJS = consoleReplay(customConsoleHistory, numberOfMessagesToSkip);
   if (consoleReplayJS.length === 0) {
     return '';
   }
-  return wrapInScriptTags('consoleReplayLog', consoleReplayJS);
+  return wrapInScriptTags('consoleReplayLog', consoleReplayJS, nonce);
 }

packages/react-on-rails/src/types/index.ts

@@ -437,8 +437,14 @@ export interface ReactOnRailsInternal extends ReactOnRails {
   handleError(options: ErrorOptions): string | undefined;
   /**
    * Used by Rails server rendering to replay console messages.
+   * Returns the console replay script wrapped in script tags.
    */
   buildConsoleReplay(): string;
+  /**
+   * Returns the console replay JavaScript code without wrapping it in script tags.
+   * Useful when you need to add CSP nonce or other attributes to the script tag.
+   */
+  getConsoleReplayScript(): string;
   /**
    * Get a Map containing all registered components. Useful for debugging.
    */

react_on_rails_pro/app/helpers/react_on_rails_pro_helper.rb

@@ -347,7 +347,8 @@ def build_react_component_result_for_server_streamed_content(
           render_options: render_options
         )
       else
-        result_console_script = render_options.replay_console ? chunk_json_result["consoleReplayScript"] : ""
+        console_script = chunk_json_result["consoleReplayScript"]
+        result_console_script = render_options.replay_console ? wrap_console_script_with_nonce(console_script) : ""
         # No need to prepend component_specification_tag or add rails context again
         # as they're already included in the first chunk
         compose_react_component_html_with_spec_and_console(