From 120e480766a0ae43c8533ae31e8e9d5e60cbbbdc Mon Sep 17 00:00:00 2001
From: Suradet Pratomsak <pharmacistsabot@gmail.com>
Date: Wed, 5 Aug 2026 09:09:37 +0700
Subject: [PATCH] fix: CSP violations - inline script bootstrap + SW network
 error

Three CSP-related fixes:

1. script-src 'unsafe-inline' added to CSP (vercel.json)
   Trunk 0.21 generates an inline script for WASM bootstrap whose
   content changes per build (content-hashed filenames). A static
   SHA-256 hash is non-viable. Documented in SECURITY.md.

2. Service worker network error handling (sw.js)
   The stale-while-revalidate handler now catches network failures
   and returns a 503 response instead of an unhandled TypeError.

3. CI csp-verify job updated to allow 'unsafe-inline' in script-src
   with an explanatory comment.
---
 .github/workflows/ci.yml |  9 +++++----
 SECURITY.md              | 11 ++++++++---
 static/pwa/sw.js         | 23 ++++++++++++++++-------
 vercel.json              |  2 +-
 4 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6c3774e..67731d7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -166,17 +166,18 @@ jobs:
             exit 1
           fi
 
-          # style-src may contain 'unsafe-inline' (Leptos requirement), but no other source should
+          # style-src may contain 'unsafe-inline' (Leptos requirement)
           style_val=$(echo "$csp" | sed -n 's/.*style-src \([^;]*\);.*/\1/p')
           if echo "$style_val" | grep -q "unsafe-inline"; then
             echo "  style-src contains 'unsafe-inline' (expected for Leptos)"
           fi
 
-          # script-src must NOT contain 'unsafe-inline'
+          # script-src may contain 'unsafe-inline' (Trunk generates an inline
+          # <script type="module"> to bootstrap WASM; the hash changes per build
+          # because filenames are content-hashed, so a static hash is not viable).
           script_val=$(echo "$csp" | sed -n 's/.*script-src \([^;]*\);.*/\1/p')
           if echo "$script_val" | grep -q "unsafe-inline"; then
-            echo "::error::script-src must not contain 'unsafe-inline'"
-            exit 1
+            echo "  script-src contains 'unsafe-inline' (Trunk WASM bootstrap)"
           fi
 
           echo "✅ CSP header is valid and contains all required directives"
diff --git a/SECURITY.md b/SECURITY.md
index 6139009..b6d95b5 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -69,7 +69,7 @@ CSP directives enforced:
 
 ```
 default-src 'none';
-script-src 'self';
+script-src 'self' 'unsafe-inline';
 style-src 'self' 'unsafe-inline';
 img-src 'self' blob:;
 font-src 'self';
@@ -79,8 +79,13 @@ manifest-src 'self';
 ```
 
 No `unsafe-eval`. The `unsafe-inline` for styles is required by Leptos's
-CSR rendering. CI enforces that the CSP header is present and valid via the
-`csp-verify` job in `.github/workflows/ci.yml`.
+CSR rendering. The `unsafe-inline` for scripts is required because Trunk
+generates an inline `<script type="module">` to bootstrap WASM — its
+content (including hashed filenames) changes per build, making a static
+SHA-256 hash non-viable. This is a known limitation; a post-build
+extraction step would be needed to eliminate it. CI enforces that the
+CSP header is present and valid via the `csp-verify` job in
+`.github/workflows/ci.yml`.
 
 ---
 
diff --git a/static/pwa/sw.js b/static/pwa/sw.js
index e08f9ba..d23e667 100644
--- a/static/pwa/sw.js
+++ b/static/pwa/sw.js
@@ -50,13 +50,22 @@ self.addEventListener("fetch", (event) => {
   // All other requests (CSS, WASM, JS, fonts, images): stale-while-revalidate
   event.respondWith(
     caches.match(request).then((cached) => {
-      const networkFetch = fetch(request).then((response) => {
-        if (response.ok && request.url.startsWith(self.location.origin)) {
-          const clone = response.clone();
-          caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
-        }
-        return response;
-      });
+      const networkFetch = fetch(request)
+        .then((response) => {
+          if (response.ok && request.url.startsWith(self.location.origin)) {
+            const clone = response.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
+          }
+          return response;
+        })
+        .catch(() => {
+          // Network failed and no cache — return a proper error response
+          // instead of letting the promise reject with a TypeError.
+          return new Response("Offline", {
+            status: 503,
+            statusText: "Service Unavailable",
+          });
+        });
 
       return cached || networkFetch;
     })
diff --git a/vercel.json b/vercel.json
index 7cce84a..cf33b2f 100644
--- a/vercel.json
+++ b/vercel.json
@@ -9,7 +9,7 @@
     {
       "source": "/(.*)",
       "headers": [
-        { "key": "Content-Security-Policy", "value": "default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' blob:; font-src 'self'; connect-src 'self'; worker-src 'self'; manifest-src 'self'" },
+        { "key": "Content-Security-Policy", "value": "default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' blob:; font-src 'self'; connect-src 'self'; worker-src 'self'; manifest-src 'self'" },
         { "key": "X-Content-Type-Options", "value": "nosniff" },
         { "key": "X-Frame-Options", "value": "DENY" },
         { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },