feat: add Content-Security-Policy header and externalize theme-init

Author: clean6378-max-it

app.py

@@ -13,6 +13,21 @@
 from api.sessions import sessions_bp
 from utils.exclusion_rules import load_rules, resolve_exclusion_rules_path
 
+# Content-Security-Policy for all Flask responses. 'unsafe-inline' in style-src is
+# required because highlight.js themes apply inline styles; can be tightened with
+# nonces later. script-src lists cdnjs only — keep in sync with SRI <script>/<link>
+# sources in static/index.html.
+CSP_POLICY = "; ".join(
+    [
+        "default-src 'self'",
+        "script-src 'self' https://cdnjs.cloudflare.com",
+        "style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com",
+        "img-src 'self' data:",
+        "connect-src 'self'",
+        "font-src 'self'",
+    ]
+)
+
 
 def _normalize_bind_host(host: str) -> str:
     """Lowercase host for checks; strip optional IPv6 brackets (e.g. ``[::1]`` → ``::1``)."""
@@ -83,6 +98,11 @@ def create_app(
     app.register_blueprint(search_bp)
     app.register_blueprint(export_bp)
 
+    @app.after_request
+    def set_security_headers(response):
+        response.headers.setdefault("Content-Security-Policy", CSP_POLICY)
+        return response
+
     @app.route("/")
     def index():
         return app.send_static_file("index.html")

docs/architecture.md

@@ -113,6 +113,21 @@ The UI is a **hash-routed** SPA with ES modules under `static/js/`:
 
 No bundler step — modern browsers load modules directly. Frontend unit tests use **vitest** + **jsdom** (`npm test`), including `static/js/render/registry.test.js` for registry wiring and renderer escaping.
 
+## Content-Security-Policy
+
+`create_app()` registers an `@app.after_request` hook that sets a `Content-Security-Policy` header on every Flask response. The policy is defined as `CSP_POLICY` in `app.py`:
+
+| Directive | Sources | Notes |
+|-----------|---------|-------|
+| `default-src` | `'self'` | Fallback for unspecified fetch types |
+| `script-src` | `'self'`, `https://cdnjs.cloudflare.com` | Self-hosted JS (e.g. `theme-init.js`, ES modules) plus SRI-pinned CDN scripts in `index.html` |
+| `style-src` | `'self'`, `'unsafe-inline'`, `https://cdnjs.cloudflare.com` | `'unsafe-inline'` needed for highlight.js theme inline styles; tighten with nonces later |
+| `img-src` | `'self'`, `data:` | Session images and data URLs |
+| `connect-src` | `'self'` | API `fetch` calls to same origin |
+| `font-src` | `'self'` | Local fonts only |
+
+**Keeping CDN sources in sync:** when adding or bumping a CDN asset in `static/index.html`, update both the SRI `integrity` hash and `CSP_POLICY` if the origin changes (today all CDN assets use `cdnjs.cloudflare.com`). Theme-init scripts were externalized to `static/js/theme-init.js` and `static/js/hljs-theme-init.js` so `script-src` does not require `'unsafe-inline'`.
+
 ## Continuous integration
 
 [`.github/workflows/ci.yml`](../.github/workflows/ci.yml) runs on push/PR:

static/index.html

@@ -4,15 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Claude Code Chat Browser</title>
-  <script>
-    /* Apply saved theme before first paint (avoids dark flash in light mode).
-       hljs URLs/integrity must match HLJS_THEME_SHEETS in static/js/shared/theme.js */
-    (function () {
-      var t = localStorage.getItem('theme');
-      if (t !== 'light' && t !== 'dark') t = 'dark';
-      document.documentElement.setAttribute('data-theme', t);
-    })();
-  </script>
+  <script src="/static/js/theme-init.js"></script>
   <link rel="stylesheet" href="/static/css/style.css">
   <!-- SRI hashes pin each CDN asset to a specific known-good payload; the
        browser refuses anything whose hash does not match (issue #19).
@@ -26,16 +18,7 @@
         integrity="sha512-mtXspRdOWHCYp+f4c7CkWGYPPRAhq9X+xCvJMUBVAb6pqA4U8pxhT3RWT3LP3bKbiolYL2CkL1bSKZZO4eeTew=="
         crossorigin="anonymous"
         id="hljs-theme">
-  <script>
-    (function () {
-      var t = document.documentElement.getAttribute('data-theme') || 'dark';
-      if (t !== 'light') return;
-      var link = document.getElementById('hljs-theme');
-      if (!link) return;
-      link.integrity = 'sha512-0aPQyyeZrWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA==';
-      link.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css';
-    })();
-  </script>
+  <script src="/static/js/hljs-theme-init.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"
           integrity="sha512-D9gUyxqja7hBtkWpPWGt9wfbfaMGVt9gnyCvYa+jojwwPHLCzUm5i8rpk7vD7wNee9bA35eYIjobYPaQuKS1MQ=="
           crossorigin="anonymous"></script>

static/js/hljs-theme-init.js

@@ -0,0 +1,10 @@
+/* Initial hljs stylesheet for light mode — must match HLJS_THEME_SHEETS.light
+   in static/js/shared/theme.js (runtime swaps use applyHljsTheme). */
+(function () {
+  var t = document.documentElement.getAttribute('data-theme') || 'dark';
+  if (t !== 'light') return;
+  var link = document.getElementById('hljs-theme');
+  if (!link) return;
+  link.integrity = 'sha512-0aPQyyeZrWj9sCA46UlmWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA==';
+  link.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css';
+})();

static/js/theme-init.js

@@ -0,0 +1,7 @@
+/* Apply saved theme before first paint (avoids dark flash in light mode).
+   hljs URLs/integrity must match HLJS_THEME_SHEETS in static/js/shared/theme.js */
+(function () {
+  var t = localStorage.getItem('theme');
+  if (t !== 'light' && t !== 'dark') t = 'dark';
+  document.documentElement.setAttribute('data-theme', t);
+})();

tests/test_api_integration.py

@@ -11,6 +11,15 @@
 
 from tests.conftest import assert_error_response as _assert_error_shape
 
+# --- / (SPA shell) ---
+
+
+def test_root_sets_csp_header(client):
+    resp = client.get("/")
+    assert "Content-Security-Policy" in resp.headers
+    assert "default-src 'self'" in resp.headers["Content-Security-Policy"]
+
+
 # --- /api/projects ---