Why is TSS using inline script tags to import script?
We're implementing CSP script loading with nonce injection, and we've seen that scripts are imported like this:
<script type="module" async="">import('/assets/main-foobar.js')</script>. Is there a reason why SSR won't use standard <script src="..." type="module" async="></script> tags? This will be really helpful to implement proper strict CSP. Thanks!7 Replies
stormy-gold•2mo ago
can't use this since react 19 would hoist the async script but it cannot load until the hydration data is ready
would it help if that inline script had a nonce?
extended-salmonOP•2mo ago
Cool! Yes, it will really help us
How would you implement this? Our current approach is to initialize a nonce in the before load of root route, and access it while rendering scripts
stormy-gold•2mo ago
we would need the nonce much earlier
since you probably also want to add the nonce to the inline scripts that provide the hydration data?
extended-salmonOP•2mo ago
Yes, we want to have a strict CSP policy so we'll need to have nonce at least for all the inline scripts
stormy-gold•2mo ago
we could accept a nonce as an optional prop of
createStartHandlerextended-salmonOP•2mo ago
But the nonce should be per request, no?
We have a POC of automatic adding random nonce in the before load of the root route, and then inject it into the headers, and into each script tags (the Script/ScriptOnce component and the initial script in ssr-server.ts)
We are wondering if that's the right approach (so we'll be able to open PR for that) or of we're missing something.
Also, is there a good place to store it in the client side to allow rendering other scripts/styles later on?
stormy-gold•2mo ago
But the nonce should be per request, no?yes. you would need to generate a nonce per request we need it outside of react since the streaming is not done via react
Also, is there a good place to store it in the client side to allow rendering other scripts/styles later on?would transmit as part of router's dehydrated data