Add nonce attribute to immediate hydration inline scripts for CSP compatibility

[ihabadham]

Summary

The immediate hydration scripts generated by generate_component_script and generate_store_script in lib/react_on_rails/pro_helper.rb (lines 27-29 and 52-55) create inline <script> tags without nonce attributes. This makes them incompatible with strict Content Security Policy (CSP) configurations.

Context

React on Rails already handles nonces correctly for console replay scripts via wrap_console_script_with_nonce in helper.rb (lines 440-464), which uses Rails' content_security_policy_nonce(:script) helper. The immediate hydration scripts should follow the same pattern.

Affected Code

lib/react_on_rails/pro_helper.rb:

# generate_component_script (line 27-29)
immediate_script = content_tag(:script, %(
  typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsComponentLoaded('#{escaped_dom_id}');
).html_safe)

# generate_store_script (line 52-55)
immediate_script = content_tag(:script, <<~JS.strip_heredoc.html_safe
  typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsStoreLoaded('#{escaped_store_name}');
JS
)

Expected Behavior

When CSP is enabled with nonce-based script-src, these inline scripts should include the request nonce:

<script nonce="abc123...">
  typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsComponentLoaded('...');
</script>

Suggested Fix

Follow the same pattern as wrap_console_script_with_nonce — call content_security_policy_nonce(:script) and pass it as the nonce: option to content_tag(:script, ...).

Impact

Without this fix, apps that enable strict CSP (without 'unsafe-inline' in script-src) cannot use immediate hydration. The browser blocks the inline scripts, and components fail to hydrate immediately.

Apps with SSR disabled or immediate hydration disabled are not affected.

[ihabadham]

Reproduction Evidence

Reproduced in the Pro spec dummy app (react_on_rails_pro/spec/dummy/) with a strict CSP configuration.

Setup

1. Added config/initializers/content_security_policy.rb to the Pro dummy with strict nonce-based script-src:

Rails.application.configure do
  config.content_security_policy do |policy|
    policy.default_src :self
    policy.script_src  :self
    policy.style_src   :self, :unsafe_inline
  end
  config.content_security_policy_nonce_generator = ->(request) { SecureRandom.base64(16) }
  config.content_security_policy_nonce_directives = %w[script-src]
end

2. Started Rails + Node renderer + webpack-compiled assets
3. Visited /server_side_hello_world (uses react_component("HelloWorld", prerender: true))

Result

CSP header sent by Rails:

content-security-policy: default-src 'self'; script-src 'self' 'nonce-xi0vRqXPQVkuODnkPKALFQ=='; ...

Immediate hydration script — NO nonce (line 220):

<script>
  typeof ReactOnRails === 'object' && ReactOnRails.reactOnRailsComponentLoaded('HelloWorld-react-component-0');
</script>

Console replay script — HAS nonce (line 223):

<script id="consoleReplayLog" nonce="xi0vRqXPQVkuODnkPKALFQ==">console.log.apply(...);</script>

Browser Error

Executing inline script violates the following Content Security Policy directive 
'script-src 'self' https://cdnjs.cloudflare.com 'nonce-xi0vRqXPQVkuODnkPKALFQ==''. 
Either the 'unsafe-inline' keyword, a hash 
('sha256-LFXXysj4Eb4oZENuPrACOsdkNrBTElLiWzSlmQ46LHQ='), 
or a nonce ('nonce-...') is required to enable inline execution. 
The action has been blocked.

The immediate hydration inline script is blocked because it lacks the CSP nonce. The console replay script on the same page works correctly because wrap_console_script_with_nonce in helper.rb already injects nonces.

The fix should follow the same pattern used by wrap_console_script_with_nonce: call content_security_policy_nonce(:script) and pass it as nonce: to content_tag(:script, ...) in pro_helper.rb's generate_component_script and generate_store_script methods.