Add Content Security Policy and missing security headers

serve.json

@@ -0,0 +1,17 @@
+{
+  "headers": [
+    {
+      "source": "**",
+      "headers": [
+        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" },
+        {
+          "key": "Content-Security-Policy",
+          "value": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; worker-src blob: 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:; media-src 'self' blob:; connect-src 'self' blob:; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none';"
+        },
+        { "key": "X-Content-Type-Options", "value": "nosniff" },
+        { "key": "X-Frame-Options", "value": "DENY" }
+      ]
+    }
+  ]
+}

vite.config.js

@@ -65,16 +65,48 @@ function serveVideos() {
   };
 }
 
+/**
+ * Security headers required for:
+ *  - COOP/COEP: SharedArrayBuffer (FFmpeg WASM)
+ *  - CSP: restrict resource loading to same-origin + known blob/data exceptions
+ *  - X-Content-Type-Options: prevent MIME sniffing
+ *  - X-Frame-Options: prevent clickjacking (belt-and-suspenders alongside frame-ancestors)
+ */
+const securityHeaders = {
+  "Cross-Origin-Opener-Policy": "same-origin",
+  "Cross-Origin-Embedder-Policy": "require-corp",
+  "Content-Security-Policy": [
+    "default-src 'self'",
+    // 'wasm-unsafe-eval' is required for FFmpeg/OpenCV WASM modules
+    "script-src 'self' 'wasm-unsafe-eval'",
+    // FFmpeg and OpenCV spin up blob: workers
+    "worker-src blob: 'self'",
+    // Inline styles are set via element.style / cssText throughout the UI layer
+    "style-src 'self' 'unsafe-inline'",
+    // blob: for video playback and CSV download; data: for icons
+    "img-src 'self' blob: data:",
+    // blob: for webcam recordings and loaded video files
+    "media-src 'self' blob:",
+    // blob: for fetch inside workers; 'self' for local video middleware
+    "connect-src 'self' blob:",
+    "font-src 'self'",
+    "object-src 'none'",
+    "base-uri 'self'",
+    "frame-ancestors 'none'",
+  ].join("; "),
+  "X-Content-Type-Options": "nosniff",
+  "X-Frame-Options": "DENY",
+};
+
 // https://vitejs.dev/config/
 export default defineConfig({
   // So the build can be served from an arbitrary path
   base: "./",
   server: {
-    headers: {
-      // Required for SharedArrayBuffer used by @ffmpeg/ffmpeg
-      "Cross-Origin-Opener-Policy": "same-origin",
-      "Cross-Origin-Embedder-Policy": "require-corp",
-    },
+    headers: securityHeaders,
+  },
+  preview: {
+    headers: securityHeaders,
   },
   plugins: [
     serveVideos(),