KittyCAD · maxammann · Aug 6, 2025 · Aug 6, 2025 · Aug 7, 2025 · Aug 7, 2025
@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <!-- PERPETUAL TODO reconsider this option.
-      <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <!--
+        This all-blocking CSP is replaced by the vite html-transform plugin.
+
+        We have to use the <meta> tag because the Electron app is hosted over file:// and does not support HTTP headers.
+        Reporting functionality is not supported with <meta> tags so we have to get this right.
     -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none';">
 
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

@@ -293,6 +293,7 @@ app.on('window-all-closed', () => {
 app.on('ready', (event, data) => {
   // Avoid potentially 2 ready fires
   if (mainWindow) return
+
   // Create the mainWindow
   mainWindow = createWindow()
   // Set menu application to null to avoid default electron menu

@@ -2,7 +2,20 @@
   "version": 2,
   "headers": [
     {
-      "source": "/",
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "Reporting-Endpoints",
+          "value": "csp-reporting-endpoint=\"https://csp-logger.vercel.app/csp-report\""
+        },
+        {
+          "key": "Content-Security-Policy-Report-Only",
+          "value": "default-src 'self';style-src 'self' 'unsafe-inline';img-src * blob: 'unsafe-inline';connect-src 'self' https://plausible.corp.zoo.dev https://api.zoo.dev wss://api.zoo.dev https://api.dev.zoo.dev wss://api.dev.zoo.dev;object-src 'none';frame-ancestors 'none';script-src 'self' 'wasm-unsafe-eval' https://plausible.corp.zoo.dev/js/script.tagged-events.js;report-uri https://csp-logger.vercel.app/csp-report;report-to csp-reporting-endpoint;"       }
+        }
+      ]
+    },
+    {
+      "source": "/(.*)",
       "missing": [
         {
           "type": "host",
@@ -13,6 +26,10 @@
         {
           "key": "X-Robots-Tag",
           "value": "noindex"
+        },
+        {
+          "key": "Content-Security-Policy-Report-Only",
+          "value": "default-src 'self';style-src 'self' 'unsafe-inline';img-src * blob: 'unsafe-inline';connect-src 'self' https://plausible.corp.zoo.dev https://api.zoo.dev wss://api.zoo.dev https://api.dev.zoo.dev wss://api.dev.zoo.dev;object-src 'none';frame-ancestors 'none';frame-src 'self' https://vercel.live;script-src 'self' 'wasm-unsafe-eval' https://plausible.corp.zoo.dev/js/script.tagged-events.js https://vercel.live 'unsafe-eval';"
         }
       ]
     }

@@ -115,3 +115,72 @@
     },
   }
 }
+
+export function indexHtmlCsp(enabled: boolean): Plugin {
+  const csp = [
+    //  By default, only allow same origin.
+    "default-src 'self'",
+    // Allow inline styles and styles from the same origin. This is how we use CSS rightnow.
+    "style-src 'self' 'unsafe-inline'",
+    // Allow images from any source and inline images. We fetch user profile images from any origin.
+    "img-src * blob: 'unsafe-inline'",
+    // Allow WebSocket connections and fetches to our API.
+    "connect-src 'self' https://plausible.corp.zoo.dev https://api.zoo.dev wss://api.zoo.dev https://api.dev.zoo.dev wss://api.dev.zoo.dev https://api.zoogov.dev wss://api.zoogov.dev",
+    // Disallow legacy stuff
+    "object-src 'none'",
+  ]
+
+  // Allow scripts from the same origin and from Plausible Analytics. Allow WASM execution.
+  const cspScriptBase = `script-src 'self' 'wasm-unsafe-eval' https://plausible.corp.zoo.dev/js/script.tagged-events.js`
+  const vercelCspBase = ["frame-ancestors 'none'"]
+
+  const vercelCsp =
+    csp
+      .concat(vercelCspBase)
+      .concat(
+        // frame ancestors can only be blocked using HTTP headers (see vercel.json)
+        [
+          cspScriptBase,
+          'report-uri https://csp-logger.vercel.app/csp-report',
+          'report-to csp-reporting-endpoint',
+        ]
+      )
+      .join(';') + ';'
+
+  console.log(
+    'Content-Security-Policy for Vercel (prod) (vercel.json): ',
+    vercelCsp
+  )
+
+  console.log(
+    'Content-Security-Policy for Vercel (preview) (vercel.json): ',
+    // vercel.live is used for feedback scripts in preview deployments.
+    csp
+      .concat(vercelCspBase)
+      .concat([
+        "frame-src 'self' https://vercel.live",
+        `${cspScriptBase} https://vercel.live 'unsafe-eval'`,
+      ])
+      .join(';') + ';'
+  )
+
+  return {
+    name: 'html-transform',
+    transformIndexHtml(html: string) {
+      let indexHtmlRegex =
+        /<meta\shttp-equiv="Content-Security-Policy"\scontent="(.*?)">/
+      if (!enabled) {
+        // Web deployments that are deployed to vercel don't need a CSP in the indexHTML.
+        // They get it through vercel.json.
+        return html.replace(indexHtmlRegex, '')
+      } else {
+        return html.replace(
+          indexHtmlRegex,
+          `<meta http-equiv="Content-Security-Policy" content="${
+            csp.concat([cspScriptBase]).join(';') + ';'
+          }">`
+        )
+      }
+    },
+  }
+}
@@ -7,6 +7,7 @@ import version from 'vite-plugin-package-version'
 import topLevelAwait from 'vite-plugin-top-level-await'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
 import { configDefaults, defineConfig } from 'vitest/config'
+import { indexHtmlCsp } from './vite.base.config'
 
 export default defineConfig(({ command, mode }) => {
   const runMillion = process.env.RUN_MILLION
@@ -77,6 +78,7 @@ export default defineConfig(({ command, mode }) => {
     },
     plugins: [
       react(),
+      indexHtmlCsp(mode != process.env.VERCEL && mode === 'production'),
       viteTsconfigPaths(),
       eslint(),
       version(),

@@ -5,7 +5,7 @@ import { defineConfig } from 'vite'
 import topLevelAwait from 'vite-plugin-top-level-await'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
 
-import { pluginExposeRenderer } from './vite.base.config'
+import { pluginExposeRenderer, indexHtmlCsp } from './vite.base.config'
 
 // https://vitejs.dev/config
 export default defineConfig((env) => {
@@ -23,6 +23,7 @@ export default defineConfig((env) => {
     // Needed for electron-forge (in npm run tron:start)
     optimizeDeps: { esbuildOptions: { target: 'es2022' } },
     plugins: [
+      indexHtmlCsp(true),
       pluginExposeRenderer(name),
       viteTsconfigPaths(),
       lezer(),