chore(ui): content security policy (#903)

defenseunicorns · Aug 13, 2024 · c2d2262 · c2d2262
1 parent 17336ff
commit c2d2262
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 3 deletions.
diff --git a/.github/workflows/ui-test.yaml b/.github/workflows/ui-test.yaml
@@ -12,6 +12,7 @@ on:
 # Declare default permissions as read only.
 permissions: read-all
 
+
 concurrency:
   group: ui-test-${{ github.ref }}
   cancel-in-progress: true

diff --git a/src/leapfrogai_ui/.env.example b/src/leapfrogai_ui/.env.example
@@ -13,6 +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
 
 #If specified, app will use OpenAI instead of Leapfrog
 OPENAI_API_KEY=

diff --git a/src/leapfrogai_ui/playwright.config.ts b/src/leapfrogai_ui/playwright.config.ts
@@ -1,9 +1,12 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
-import dotenv from 'dotenv';
+import * as dotenv from 'dotenv';
 
 dotenv.config();
 
+const PORT = 4173;
+process.env.ORIGIN = `http://localhost:${PORT}`;
+
 const chromeConfig = {
   name: 'chromium',
   use: {
@@ -59,7 +62,7 @@ const defaultConfig: PlaywrightTestConfig = {
 const devConfig: PlaywrightTestConfig = {
   webServer: {
     command: 'npm run build && npm run preview',
-    port: 4173,
+    port: PORT,
     stderr: 'pipe'
   },
   testDir: 'tests',

diff --git a/src/leapfrogai_ui/src/lib/components/CopyToClipboardBtn.svelte b/src/leapfrogai_ui/src/lib/components/CopyToClipboardBtn.svelte
@@ -8,7 +8,7 @@
   export let toastTitle = 'Copied';
   export let btnText = '';
   export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined = 'sm';
-  export let testId: string;
+  export let testId: string = 'copy-to-clipboard-btn';
 
   const handleClick = async (e) => {
     e.stopPropagation();

diff --git a/src/leapfrogai_ui/svelte.config.js b/src/leapfrogai_ui/svelte.config.js
@@ -1,6 +1,8 @@
 import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import * as dotenv from 'dotenv';
 
+dotenv.config();
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
@@ -20,6 +22,32 @@ const config = {
       $schemas: 'src/lib/schemas',
       $constants: 'src/lib/constants',
       $testUtils: 'testUtils'
+    },
+    csp: {
+      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': ['none'], // note - this will break the annotations story and will need to updated to allow the correct resource
+        'frame-ancestors': ['none']
+      }
     }
   }
 };