Merge pull request #367 from crabnebula-dev/fix/csp-settings

fix: csp settings

Author: alex-crabnebula

clients/web/csp.js

@@ -6,22 +6,43 @@ 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
       ? ""
       : "https://o4506303762464768.ingest.sentry.io/api/4506303812272128/security/?sentry_key=57614e75ac5f8c480aed3a2dd1528f13",
     directives: {
       "default-src": [SELF],
       "frame-src": [SELF],
-      "script-src": isDev ? [SELF, UNSAFE_EVAL] : [SELF, WASM_UNSAFE_EVAL],
-      "style-src": isDev ? [SELF, UNSAFE_INLINE] : [SELF],
+      "script-src": isDev
+        ? [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],
+      "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/index.html

@@ -11,16 +11,8 @@
       id="app"
       class="grid bg-navy-700 bg-opacity-70 grid-rows-[var(--header-height),calc(100vh-calc(var(--header-height)+var(--footer-height))),var(--footer-height)] h-screen"
     ></div>
-    <div
-      style="
-        z-index: -10;
-        position: absolute;
-        inset: 0px;
-        opacity: 0.5;
-        overflow: hidden;
-      "
-    >
-      <img style="width: 100%; height: 100%" src="/bg.webp" aria-hidden />
+    <div class="z-[-10] absolute inset-0 opacity-50 overflow-hidden">
+      <img class="w-full h-full" src="/bg.webp" aria-hidden />
     </div>
     <!-- this one is handled by Vite. No need for subpath-->
     <script type="module" src="/src/render-client.tsx"></script>

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",
+    "prebuild": "node csp.js -i",
     "build": "pnpm proto && vite build",
     "preview": "pnpm proto && vite preview",
     "format": "prettier --write --cache .",
@@ -23,7 +24,6 @@
   },
   "devDependencies": {
     "@protobuf-ts/protoc": "^2.9.4",
-    "@sentry/netlify-build-plugin": "^1.1.1",
     "@shikijs/transformers": "^1.12.1",
     "@solidjs/testing-library": "^0.8.9",
     "@testing-library/jest-dom": "^6.4.8",

clients/web/pnpm-lock.yaml

@@ -3,9 +3,7 @@ import { type JSXElement, Show } from "solid-js";
 export function Row(props: { title: string; children?: JSXElement }) {
   return (
     <tr class="grid grid-cols-2 text-left">
-      <th style={{ "grid-column": props.children ? "" : "span 2" }}>
-        {props.title}
-      </th>
+      <th class={props.children ? "" : "col-span-2"}>{props.title}</th>
       <Show when={props.children}>
         <td>{props.children}</td>
       </Show>