Bug: React 18 renderToPipeableStream missing support for nonce for bootstrapScripts and bootstrapModules

[therealgilles]

React version: 18.1.0-next-af730436c-20220405

Steps To Reproduce

1. Use server with CSP script-src set to strict-dynamic and with nonce.
2. Use renderToPipeableStream and add nonce to its options. Pass js client assets through bootstrapScripts.
3. Launch development server and try to load app.

The current behavior

The renderToPipeableStream nonce is only applied to inline scripts (bootstrapScriptContent) in createResponseState().

The expected behavior

A strict-dynamic script-src CSP applies to both inline scripts and scripts with src. I would expect the nonce to also be applied to scripts with src. The change seems simple enough .The createResponseState() would look like this:

  var startScriptSrcWithNonce = nonce === undefined ? startScriptSrc : stringToPrecomputedChunk('<script nonce="' + escapeTextForBrowser(nonce) + '" src="');
  var startModuleSrcWithNonce = nonce === undefined ? startModuleSrc : stringToPrecomputedChunk('<script nonce="' + escapeTextForBrowser(nonce) + '" type="module" src="');

  ...
  if (bootstrapScripts !== undefined) {
    for (var i = 0; i < bootstrapScripts.length; i++) {
      bootstrapChunks.push(startScriptSrcWithNonce, stringToChunk(escapeTextForBrowser(bootstrapScripts[i])), endAsyncScript);
    }
  }

  if (bootstrapModules !== undefined) {
    for (var _i = 0; _i < bootstrapModules.length; _i++) {
      bootstrapChunks.push(startModuleSrcWithNonce, stringToChunk(escapeTextForBrowser(bootstrapModules[_i])), endAsyncScript);
    }
  }

Please let me know if I am missing the reason why this was not implemented.

[danieltott]

This is also missing in renderToReadableStream

[danieltott]

To add some context on why this is needed, when you add the strict-dynamic source list keyword, all other non-nonce keywords and sources are ignored, specifically 'self'. This means that scripts that are inserted via <script src=... /> violate the content security policy.

Right now renderToReadableStream and renderToPipeableStream add the nonce attribute to inline scripts set in bootstrapScriptContent, but not src=... scripts via bootstrapScripts and bootstrapModules.

Adding nonce support to those scripts will allow them to pass a content-security-policy that uses strict-dynamic.

[danieltott]

PR with fix: #26738