-
|
Sorry if I'm missing a obvious solution here. I'm trying to create a per-request nonce for CSP as suggested here: https://content-security-policy.com/nonce/ I figured out that entry-server.tsx export default createHandler(
renderAsync((event) => <StartServer event={event} />, { nonce: crypto.randomUUID() })
)But how can I access this value later when generating eg. the CSP header or other things like fixed header scripts? root.tsx export default function Root() {
const nonce = "???"
return (
<>
<HttpHeader name="Content-Security-Policy" value={csp(nonce)} />
<Html lang="en">
<Head>
<Meta charset="utf-8" />
<CustomHeaderScript nonce={nonce} />
...I tried using a custom middleware to store the nonce in export default createHandler(
({ forward }) => {
return async (event) => {
event.locals.nonce = crypto.randomUUID()
return forward(event)
}
},
renderAsync((event) => <StartServer event={event} />, { nonce: ??? })
)Any advice would be appreciated. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
Right. We didn't work through this as of yet. I guess you could recreate the renderAsync middleware and directly patch the render call. But we need a solution for this. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Ryan. Thanks for your response. I played around with patching export default createHandler(
renderAsync((event) => <StartServer event={event} />, { nonce: crypto.randomUUID() })
)service core:user:myapp: Uncaught Error: Some functionality, such as asynchronous I/O, timeouts, and generating random values, can only be performed while handling a request.
at server.js:10569:19
X [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.So on Cloudflare the nonce can only be generated in a request context. I ended up with this patch to solid-start diff --git a/entry-server/render.ts b/entry-server/render.ts
index 0b70260b118b6de4995dcfdd155fae6ba721f0e8..8480c9047d832dd5a341b9ef239a01a00907ef31 100644
--- a/entry-server/render.ts
+++ b/entry-server/render.ts
@@ -47,12 +47,7 @@ export function renderSync(
}
export function renderAsync(
- fn: (context: PageEvent) => JSX.Element,
- options?: {
- timeoutMs?: number;
- nonce?: string;
- renderId?: string;
- }
+ fn: (context: PageEvent) => JSX.Element
) {
return () => apiRoutes({
forward: inlineServerFunctions({
@@ -70,7 +65,7 @@ export function renderAsync(
let pageEvent = createPageEvent(event);
- let markup = await renderToStringAsync(() => fn(pageEvent), options);
+ let markup = await renderToStringAsync(() => fn(pageEvent), event.locals.options);
if (pageEvent.routerContext && pageEvent.routerContext.url) {
return redirect(pageEvent.routerContext.url, {Now setting the options in a middleware export default createHandler(
({ forward }) => {
return async (event) => {
event.locals.options = { nonce: crypto.randomUUID() }
return forward(event)
}
},
renderAsync((event) => <StartServer event={event} />)
)and get the nonce in function useNonce() {
if (isServer) return useRequest().locals?.options?.nonce as string
return ""
}
export default function Root() {
const nonce = useNonce()
...Looking forward to your next stream ❤ |
Beta Was this translation helpful? Give feedback.
-
|
I'm currently trying to make CSP work with SolidStart 1.0 After adding this extremely simple middleware import { createMiddleware } from "@solidjs/start/middleware";
export default createMiddleware({
onRequest: [
(event) => {
// @ts-ignore
event.nonce = crypto.randomUUID();
}
]
});the random nonce is automatically added to almost every script tag, except:
I'll investigate this further and update this post if I can make it work on my own. Any help would be appreciated 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
export default createHandler(
() => ...,
event => {
const nonce = crypto.randomUUID();
event.response.headers.set(
"Content-Security-Policy",
[
`script-src 'nonce-${nonce}' 'strict-dynamic'`,
`object-src 'none'`,
`base-uri 'none'`,
].join(";")
);
return { nonce };
}
)can't seem to reproduce modulepreload script though, please provide if possible. but it might be related to this. |
Beta Was this translation helpful? Give feedback.
createHandlernow accepts{ nonce?: string }in 2nd paramoptions | event => options. This also passesnoncetoHydrationScriptthrough hydration context whereasevent.nonceis used for other scripts.can't seem to reproduce modulepreload script though, please provide if possible. but it might be related to this.
solid-start/packages/start/src/server/StartS…