fix(ui): CSP (#913)

---------

Co-authored-by: Justin Law <justin.law@defenseunicorns.com>

src/leapfrogai_api/pyproject.toml

@@ -15,7 +15,7 @@ dependencies = [
     "python-multipart >= 0.0.7", #indirect dep of FastAPI to receive form data for file uploads
     "watchfiles >= 0.21.0",
     "leapfrogai_sdk",
-    "supabase >= 2.5.1",
+    "supabase == 2.6.0",
     "langchain >= 0.2.1",
     "langchain-community >= 0.2.1",
     "unstructured[md,xlsx,pptx] >= 0.15.3", # Only specify necessary filetypes to prevent package bloat (e.g. 130MB vs 6GB)

src/leapfrogai_ui/.env.example

@@ -13,7 +13,7 @@ LEAPFROGAI_API_BASE_URL=https://leapfrogai-api.uds.dev #for OpenAI it would be:
 SUPABASE_AUTH_EXTERNAL_KEYCLOAK_URL=https://sso.uds.dev/realms/uds
 SUPABASE_AUTH_KEYCLOAK_CLIENT_ID=uds-supabase
 SUPABASE_AUTH_KEYCLOAK_SECRET=<secret>
-ORIGIN=http://localhost:5137
+#ORIGIN=http://localhost:3000 # set if running in Docker locally (variable is also used in deployment)
 
 #If specified, app will use OpenAI instead of Leapfrog
 OPENAI_API_KEY=

src/leapfrogai_ui/src/hooks.server.ts

@@ -85,4 +85,35 @@ const authGuard: Handle = async ({ event, resolve }) => {
   return resolve(event);
 };
 
-export const handle: Handle = sequence(supabase, authGuard);
+const csp: Handle = async ({ event, resolve }) => {
+  const response = await resolve(event);
+  const directives = {
+    'default-src': ["'none'"],
+    'base-uri': ["'self'"],
+    'object-src': ["'none'"], // typically used for legacy content, such as Flash files or Java applets
+    'style-src': ["'self'", "'unsafe-inline'"],
+    'font-src': ["'self'"],
+    'manifest-src': ["'self'"],
+    'img-src': ["'self'", `data: 'self'  ${process.env.PUBLIC_SUPABASE_URL}`, `blob: 'self'`],
+    'media-src': ["'self'"],
+    'form-action': ["'self'"],
+    'connect-src': [
+      "'self'",
+      process.env.LEAPFROGAI_API_BASE_URL,
+      process.env.PUBLIC_SUPABASE_URL,
+      process.env.SUPABASE_AUTH_EXTERNAL_KEYCLOAK_URL
+    ],
+    'child-src': ["'none'"], // note - this will break the annotations story and will need to updated to allow the correct resource
+    'frame-ancestors': ["'none'"]
+  };
+
+  const CSP = Object.entries(directives)
+    .map(([key, arr]) => key + ' ' + arr.join(' '))
+    .join('; ');
+  // We use Sveltekits generated CSP for script-src to get the nonce
+  const svelteKitGeneratedCSPWithNonce = response.headers.get('Content-Security-Policy');
+  response.headers.set('Content-Security-Policy', `${CSP}; ${svelteKitGeneratedCSPWithNonce}`);
+  return response;
+};
+
+export const handle: Handle = sequence(csp, supabase, authGuard);

src/leapfrogai_ui/svelte.config.js

@@ -24,29 +24,10 @@ const config = {
       $testUtils: 'testUtils'
     },
     csp: {
+      // Remainder of the CSP is set in hooks.server.ts, we partially define here for the nonce generation provided
+      // by Sveltekit
       directives: {
-        'default-src': ['none'],
-        'base-uri': ['self'],
-        'script-src': ['self', 'strict-dynamic'],
-        'object-src': ['none'], // typically used for legacy content, such as Flash files or Java applets
-        'style-src': ['self', 'unsafe-inline'],
-        'font-src': ['self'],
-        'manifest-src': ['self'],
-        'img-src': [
-          'self',
-          `data: ${process.env.ORIGIN} ${process.env.PUBLIC_SUPABASE_URL}`,
-          `blob: ${process.env.ORIGIN}`
-        ],
-        'media-src': ['self'],
-        'form-action': ['self'],
-        'connect-src': [
-          'self',
-          process.env.LEAPFROGAI_API_BASE_URL || '',
-          process.env.PUBLIC_SUPABASE_URL || '',
-          process.env.SUPABASE_AUTH_EXTERNAL_KEYCLOAK_URL || ''
-        ],
-        'child-src': [`blob: ${process.env.ORIGIN}`],
-        'frame-ancestors': ['none']
+        'script-src': ['self', 'strict-dynamic']
       }
     }
   }

src/leapfrogai_ui/tests/global.setup.ts

@@ -5,6 +5,10 @@ import { delay } from 'msw';
 const authFile = 'playwright/.auth/user.json';
 
 setup('authenticate', async ({ page }) => {
+  page.on('pageerror', (err) => {
+    console.log(err.message);
+  });
+
   await page.goto('/'); // go to the home page
   await delay(2000); // allow page to fully hydrate
   if (process.env.PUBLIC_DISABLE_KEYCLOAK === 'true') {