web: update & move csp to svelte.config.js

ough

pnpm-lock.yaml

@@ -140,6 +140,9 @@ importers:
       compare-versions:
         specifier: ^6.1.0
         version: 6.1.1
+      dotenv:
+        specifier: ^16.0.1
+        version: 16.4.5
       eslint:
         specifier: ^8.57.0
         version: 8.57.0

web/package.json

@@ -33,6 +33,7 @@
         "@types/fluent-ffmpeg": "^2.1.25",
         "@types/node": "^20.14.10",
         "compare-versions": "^6.1.0",
+        "dotenv": "^16.0.1",
         "eslint": "^8.57.0",
         "glob": "^10.4.5",
         "mdsvex": "^0.11.2",

web/src/routes/_headers/+server.ts

@@ -1,29 +1,8 @@
-import env from "$lib/env";
-
-const allowedScriptOrigins = [
-    "'self'",
-    "challenges.cloudflare.com",
-    env.PLAUSIBLE_HOST ? env.PLAUSIBLE_HOST : ""
-]
-
 export async function GET() {
-    const CSP = {
-        "connect-src": ["*"],
-        "default-src": ["'self'"],
-
-        "script-src": allowedScriptOrigins,
-        "script-src-attr": allowedScriptOrigins,
-        "frame-src": ["challenges.cloudflare.com"],
-    }
-
     const _headers = {
         "/*": {
             "Cross-Origin-Opener-Policy": "same-origin",
             "Cross-Origin-Embedder-Policy": "require-corp",
-            "Content-Security-Policy":
-                Object.entries(CSP).map(
-                    ([directive, values]) => `${directive} ${values.join(' ')}`
-                ).flat().join("; "),
         }
     }
 

web/svelte.config.js

@@ -1,8 +1,10 @@
-import adapter from '@sveltejs/adapter-static';
-import { mdsvex } from 'mdsvex';
-import { fileURLToPath } from 'node:url';
-import { dirname, join } from 'node:path';
-import { sveltePreprocess } from 'svelte-preprocess';
+import "dotenv/config";
+import adapter from "@sveltejs/adapter-static";
+
+import { mdsvex } from "mdsvex";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+import { sveltePreprocess } from "svelte-preprocess";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -46,6 +48,37 @@ const config = {
             precompress: false,
             strict: true
         }),
+        csp: {
+            mode: "hash",
+            directives: {
+                "connect-src": ["*"],
+                "default-src": ["none"],
+
+                "font-src": ["self"],
+                "style-src": ["self", "unsafe-inline"],
+                "img-src": ["self", "data:"],
+                "manifest-src": ["self"],
+                "worker-src": ["self"],
+
+                "object-src": ["none"],
+                "frame-src": [
+                    "self",
+                    "challenges.cloudflare.com"
+                ],
+
+                "script-src": [
+                    "self",
+                    "wasm-unsafe-eval",
+                    "challenges.cloudflare.com",
+
+                    // eslint-disable-next-line no-undef
+                    process.env.WEB_PLAUSIBLE_HOST ? process.env.WEB_PLAUSIBLE_HOST : "",
+
+                    // hash of the theme preloader in app.html
+                    "sha256-g67gIjM3G8yMbjbxyc3QUoVsKhdxgcQzCmSKXiZZo6s=",
+                ]
+            }
+        },
         env: {
             publicPrefix: 'WEB_'
         },