Nonce app-level inline scripts in Pro dummy demo pages

Codex review flagged that with the strict CSP enforced globally, demo
pages emitting their own inline scripts outside the React on Rails
helpers would be blocked: the Apollo examples' apolloStateTag and React
Router's StaticRouterProvider hydration-data script. Thread
railsContext.cspNonce into those script tags (StaticRouterProvider has a
first-class nonce prop). Verified on /react_router in a real browser:
zero securitypolicyviolation events and the hydration-data script
carries the per-request nonce.

These edits also document the recommended pattern for app-level inline
scripts under the strict policy (see docs/pro/strict-csp.md).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: justin808

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/ApolloGraphQLApp.server.jsx

@@ -22,7 +22,7 @@ import { getMarkupFromTree } from '@apollo/client/react/ssr';
 import fetch from 'cross-fetch';
 import ApolloGraphQL from '../components/ApolloGraphQL';
 
-export default async (props, _railsContext) => {
+export default async (props, railsContext) => {
   const { csrf, sessionCookie } = props.ssrOnlyProps;
   const client = new ApolloClient({
     ssrMode: true,
@@ -52,6 +52,9 @@ export default async (props, _railsContext) => {
   // you need to return additional property `apolloStateTag`, to fulfill the state for hydration
   const apolloStateTag = renderToString(
     <script
+      // Carry the per-request CSP nonce so the strict policy
+      // (config/initializers/content_security_policy.rb) allows this inline script.
+      nonce={railsContext.cspNonce}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{
         __html: `window.__APOLLO_STATE__=${JSON.stringify(initialState).replace(/</g, '\\u003c')};`,

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/LazyApolloGraphQLApp.server.tsx

@@ -32,7 +32,7 @@ type Props = {
   };
 };
 
-export default async (props: Props, _railsContext: RailsContext) => {
+export default async (props: Props, railsContext: RailsContext) => {
   const { csrf, sessionCookie } = props.ssrOnlyProps;
   const client = new ApolloClient({
     ssrMode: true,
@@ -60,6 +60,9 @@ export default async (props: Props, _railsContext: RailsContext) => {
   // you need to return additional property `apolloStateTag`, to fulfill the state for hydration
   const apolloStateTag = renderToString(
     <script
+      // Carry the per-request CSP nonce so the strict policy
+      // (config/initializers/content_security_policy.rb) allows this inline script.
+      nonce={railsContext.cspNonce}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{
         __html: `

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/RouterApp.server.jsx

@@ -28,7 +28,11 @@ const dataServerRouter = async (_props, railsContext) => {
   const routerContext = await handler.query(request);
   const router = createStaticRouter(handler.dataRoutes, routerContext);
 
-  return renderToString(<StaticRouterProvider router={router} context={routerContext} />);
+  // nonce: the strict CSP (config/initializers/content_security_policy.rb) would
+  // otherwise block the inline hydration-data script StaticRouterProvider emits.
+  return renderToString(
+    <StaticRouterProvider router={router} context={routerContext} nonce={railsContext.cspNonce} />,
+  );
 };
 
 export default dataServerRouter;