nonce not coming in <script>window

[priteshloke]

const { pipe, abort } = renderToPipeableStream(
serverElement,
{
nonce, // ✅ this makes React attach nonce to its internal <script> tags
readyOption {
shellRendered = true;
const body = new PassThrough();
const stream = createReadableStreamFromReadable(body);

  responseHeaders.set("Content-Type", "text/html");
  responseHeaders.set(
    "Content-Security-Policy",
    `default-src 'self'; script-src 'self' 'nonce-${nonce}'; style-src 'self' 'nonce-${nonce}' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; object-src 'none'; upgrade-insecure-requests`
  );

  resolve(
    new Response(stream, {
      headers: responseHeaders,
      status: responseStatusCode,
    })
  );

  pipe(body);
},
onShellError(error: unknown) {
  reject(error);
},
onError(error: unknown) {
  responseStatusCode = 500;
  // Log streaming rendering errors from inside the shell.  Don't log
  // errors encountered during initial shell rendering since they'll
  // reject and get logged in handleDocumentRequest.
  if (shellRendered) {
    console.error(error);
  }
},

}
);

added in renderToPipeableStream but still nonce not coming in <script>window.__reactRouterContext.streamController

[topaxi]

Facing the same issue, did you find a solution?

[topaxi]

I found the solution, the <ServerRouter /> component needs an additional nonce property:

<ServerRouter nonce={nonce} context={reactRouterContext} url={request.url} />