diff --git a/app.config.ts b/app.config.ts index f13cb63..5dfa833 100644 --- a/app.config.ts +++ b/app.config.ts @@ -3,6 +3,9 @@ import { VitePWA } from 'vite-plugin-pwa' export default defineConfig({ vite: { + html: { + cspNonce: 'KAAS_IS_AWESOME', + }, plugins: [ VitePWA({ mode: 'development', diff --git a/src/entry-server.tsx b/src/entry-server.tsx index 6919774..220923e 100644 --- a/src/entry-server.tsx +++ b/src/entry-server.tsx @@ -4,20 +4,39 @@ import { installIntoGlobal } from "iterator-helpers-polyfill"; installIntoGlobal(); -export default createHandler(() => ( - ( - - - - - {assets} - - - {children} - {scripts} - - - )} - /> -)); +export default createHandler(({ nonce }) => { + return ( + { + return ( + + + + + + {assets} + + + {children} + {scripts} + + + ); + }} /> + ); +}, event => { + const nonce = crypto.randomUUID(); + const base = `'self' 'nonce-${nonce}'`; + + const policies = { + default: base, + connect: `${base} ws://localhost:*`, + style: `'self' data: https://fonts.googleapis.com 'unsafe-inline'`, + // style: `${base} data: https://fonts.googleapis.com`, + font: `${base} https://*.gstatic.com`, + } as const; + + event.response.headers.append('Content-Security-Policy', Object.entries(policies).map(([p, v]) => `${p}-src ${v}`).join('; ')) + + return { nonce }; +});