Build csp headers dynamically

Author: alex-crabnebula

clients/web/csp.js

@@ -6,8 +6,14 @@ import {
   WASM_UNSAFE_EVAL,
   UNSAFE_EVAL,
 } from "csp-header";
+import { env, argv } from "node:process";
+import { readFile, writeFile } from "node:fs/promises";
 
 export function generateCSP(isDev = false) {
+  const FATHOM_HOST = env.VITE_FATHOM_URL
+    ? new URL(env.VITE_FATHOM_URL).host
+    : undefined;
+
   return getCSP({
     reportUri: isDev
       ? ""
@@ -16,14 +22,27 @@ export function generateCSP(isDev = false) {
       "default-src": [SELF],
       "frame-src": [SELF],
       "script-src": isDev
-        ? [SELF, UNSAFE_EVAL, process.env.VITE_FATHOM_URL]
-        : [SELF, WASM_UNSAFE_EVAL, process.env.VITE_FATHOM_URL],
+        ? [SELF, UNSAFE_EVAL, FATHOM_HOST].filter(Boolean)
+        : [SELF, WASM_UNSAFE_EVAL, FATHOM_HOST].filter(Boolean),
       "style-src": [SELF, UNSAFE_INLINE],
       "connect-src": [SELF, "127.0.0.1", "127.0.0.1:*", "ws://localhost:5173/"],
-      "img-src": [SELF, process.env.VITE_FATHOM_URL],
+      "img-src": [SELF, FATHOM_HOST].filter(Boolean),
       "object-src": [NONE],
     },
   });
 }
 
-console.log(generateCSP());
+if (argv.includes("-i")) {
+  readFile("./netlify.toml", "utf-8").then((toml) =>
+    writeFile(
+      "./netlify.toml",
+      toml.replace(
+        /Content-Security-Policy-Report-Only=[^\n]+/,
+        `Content-Security-Policy-Report-Only="${generateCSP()}"`,
+      ),
+      "utf-8",
+    ).then(() => console.log("Updated CSP headers in netlify.toml")),
+  );
+} else {
+  console.log(generateCSP());
+}

clients/web/package.json

@@ -9,6 +9,7 @@
   "scripts": {
     "proto": "protoc --ts_out src/lib/proto --proto_path ../../crates/wire/proto ../../crates/wire/proto/common.proto ../../crates/wire/proto/instrument.proto ../../crates/wire/proto/logs.proto ../../crates/wire/proto/spans.proto ../../crates/wire/proto/tauri.proto ../../crates/wire/proto/sources.proto ../../crates/wire/proto/meta.proto ../../crates/wire/proto/health.proto",
     "dev": "pnpm proto --experimental_allow_proto3_optional && vite",
+    "build:csp": "node csp.js -i",
     "build": "pnpm proto && vite build",
     "preview": "pnpm proto && vite preview",
     "format": "prettier --write --cache .",