Suspense SSR + CSP question

[liuyenwei]

We currently set a nonce for our script-src CSP policy which means that inline scripts can only be executed if they have the same nonce value set. Based on my testing, this causes issues when streaming with pipeToNodeWritable due to the inline script tags that are sent down.

I was curious if there is any way to address this (outside of changing our CSP policy). One option that comes to mind is being able to specify a nonce that would then get added to the inline script tags.

[sebmarkbage]

Yea this seems like we could add that as an option. Pretty straightforward.

(I have some questions about how much these actually add protection in a React apps but it seems at least valid as an option.)

Longer term I hope we’ll be able to do this technique with a built in HTML primitive instead of script tags.

[Andarist]

Longer term I hope we’ll be able to do this technique with a built in HTML primitive instead of script tags.

could you expand on this? what kind of a primitive would help here?

[sebmarkbage]

At one point the proposals for declarative shadow DOM had a way to attach a shadow DOM to existing IDs late. That could be one approach. Or maybe something like <template replaces="existingID">content</template>.

[devknoll]

My two cents: flushing script tags isn't ideal, because it means that content may be invisible to crawlers that don't run scripts, or agents with scripts intentionally disabled. But that means you can't incrementally stream a page unless JavaScript is supported... I could imagine instead a native <placeholder id="foo">Loading...</placeholder> element and a matching <content for="foo">...</content> element that can replace it, without scripts.

[sebmarkbage]

facebook/react#22593

[sebmarkbage]

Another possible strategy would be to include a high pri src script (on a trusted domain) that uses a mutation observer to track new segment nodes and moves them. Effectively a polyfill of the ideal solution.

The downside of this is that you need another request to get this script - however - you likely need one for CSS anyway so it's not much worse.

This is probably better for SSG where nonce wouldn't be safe.