Add Content-Security-Policy (#1229)

The mode-watcher bug causing a flash of light mode has been fixed so we can now add a CSP. Still need to add an additional directive due to a Svelte bug
SapiensAnatis · Jan 18, 2025 · dd64dff · dd64dff
1 parent 8073fbc
commit dd64dff
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 9 deletions.
diff --git a/Website/playwright.config.ts b/Website/playwright.config.ts
@@ -9,7 +9,8 @@ const config: PlaywrightTestConfig = {
     timeout: 120000
   },
   use: {
-    baseURL: 'http://localhost:3001'
+    baseURL: 'http://localhost:3001',
+    bypassCSP: true
   },
   updateSnapshots: process.env.UPDATE_SNAPSHOTS ? 'all' : 'missing',
   ignoreSnapshots: !process.env.CI,

diff --git a/Website/src/app.html b/Website/src/app.html
@@ -11,6 +11,9 @@
     <meta property="og:image" content="%sveltekit.assets%/favicon.ico" />
     <title>Dawnshard</title>
     %sveltekit.head%
+    <script nonce="%sveltekit.nonce%">
+      %modewatcher.snippet%
+    </script>
   </head>
   <body data-sveltekit-preload-data="hover">
     <div style="display: contents">%sveltekit.body%</div>

diff --git a/Website/src/hooks.server.ts b/Website/src/hooks.server.ts
@@ -1,6 +1,8 @@
 import { randomUUID } from 'node:crypto';
 
 import type { Handle, HandleFetch, HandleServerError } from '@sveltejs/kit';
+import { sequence } from '@sveltejs/kit/hooks';
+import { generateSetInitialModeExpression } from 'mode-watcher';
 
 import { env } from '$env/dynamic/private';
 import { PUBLIC_ENABLE_MSW } from '$env/static/public';
@@ -50,12 +52,24 @@ export const handleFetch: HandleFetch = ({ request, event, fetch }) => {
   return fetch(request);
 };
 
-export const handle: Handle = ({ event, resolve }) => {
+const handleHeadScript: Handle = ({ event, resolve }) => {
+  return resolve(event, {
+    transformPageChunk: ({ html }) => {
+      return html.replace('%modewatcher.snippet%', generateSetInitialModeExpression({}));
+    }
+  });
+};
+
+const handleLogger: Handle = ({ event, resolve }) => {
   event.locals.logger = createLogger({
     requestPath: new URL(event.request.url).pathname,
     requestId: randomUUID()
   });
 
+  return resolve(event);
+};
+
+const handleAuth: Handle = ({ event, resolve }) => {
   const idToken = event.cookies.get(Cookies.IdToken);
 
   if (!idToken) {
@@ -77,6 +91,8 @@ export const handle: Handle = ({ event, resolve }) => {
   return resolve(event);
 };
 
+export const handle = sequence(handleHeadScript, handleLogger, handleAuth);
+
 export const handleError: HandleServerError = ({ error, event, status, message }) => {
   event.locals.logger.error({ error, status, message }, 'Unhandled error occurred: {message}');
 };
diff --git a/Website/src/routes/(main)/+layout.svelte b/Website/src/routes/(main)/+layout.svelte
@@ -14,7 +14,7 @@
   <meta property="og:url" content={data.urlOrigin} />
 </svelte:head>
 
-<ModeWatcher />
+<ModeWatcher disableHeadScriptInjection />
 <Header hasValidJwt={data.hasValidJwt} />
 <SideNav hasValidJwt={data.hasValidJwt} />
 <Toaster richColors />

diff --git a/Website/src/routes/csp/+server.ts b/Website/src/routes/csp/+server.ts
@@ -0,0 +1,9 @@
+import type { RequestHandler } from './$types';
+
+export const POST: RequestHandler = async ({ locals, request }) => {
+  const violation = await request.json();
+
+  locals.logger.error({ violation }, 'CSP violation reported: {violation}');
+
+  return new Response(null, { status: 200 });
+};
diff --git a/Website/svelte.config.js b/Website/svelte.config.js
@@ -1,6 +1,13 @@
 import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
+const scriptCsp = [
+  'self',
+  // https://github.com/sveltejs/svelte/issues/14014
+  'unsafe-hashes',
+  'sha256-7dQwUgLau1NFCCGjfn9FsYptB6ZtWxJin6VohGIu20I='
+];
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
@@ -13,13 +20,16 @@ const config = {
       $shadcn: './src/lib/shadcn',
       $static: './static',
       $main: './src/routes/(main)'
+    },
+    csp: {
+      directives: {
+        'script-src': scriptCsp
+      },
+      reportOnly: {
+        'script-src': scriptCsp,
+        'report-uri': ['/csp']
+      }
     }
-    // Blocked by https://github.com/svecosystem/mode-watcher/issues/92
-    // csp: {
-    //   directives: {
-    //     'script-src': ['self']
-    //   }
-    // }
   }
 };