From b11f31fbadc5b37f5b49a675886dcdc2e9a84ad9 Mon Sep 17 00:00:00 2001
From: chen <clean6378@gmail.com>
Date: Wed, 17 Jun 2026 00:19:18 +0800
Subject: [PATCH 1/5] feat: add Content-Security-Policy header and externalize
 theme-init

---
 app.py                        | 20 ++++++++++++++++++++
 docs/architecture.md          | 15 +++++++++++++++
 static/index.html             | 21 ++-------------------
 static/js/hljs-theme-init.js  | 10 ++++++++++
 static/js/theme-init.js       |  7 +++++++
 tests/test_api_integration.py |  9 +++++++++
 6 files changed, 63 insertions(+), 19 deletions(-)
 create mode 100644 static/js/hljs-theme-init.js
 create mode 100644 static/js/theme-init.js

diff --git a/app.py b/app.py
index bcaaab1..dbaaf82 100644
--- a/app.py
+++ b/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")
diff --git a/docs/architecture.md b/docs/architecture.md
index 296c29f..b8ff9ca 100644
--- a/docs/architecture.md
+++ b/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:
diff --git a/static/index.html b/static/index.html
index 9623aaa..9365957 100644
--- a/static/index.html
+++ b/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>
diff --git a/static/js/hljs-theme-init.js b/static/js/hljs-theme-init.js
new file mode 100644
index 0000000..a766181
--- /dev/null
+++ b/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';
+})();
diff --git a/static/js/theme-init.js b/static/js/theme-init.js
new file mode 100644
index 0000000..4250b3a
--- /dev/null
+++ b/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);
+})();
diff --git a/tests/test_api_integration.py b/tests/test_api_integration.py
index 7fd37cb..0b07ce6 100644
--- a/tests/test_api_integration.py
+++ b/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 ---
 
 

From 15d8490a3987210352d856701174b360078ec0cf Mon Sep 17 00:00:00 2001
From: chen <clean6378@gmail.com>
Date: Wed, 17 Jun 2026 00:34:27 +0800
Subject: [PATCH 2/5] fix: wire UI handlers for CSP compliance and strengthen
 policy tests

---
 app.py                               |  2 ++
 docs/architecture.md                 |  4 +++-
 static/index.html                    |  8 +++----
 static/js/app.js                     | 33 ++++++++++++----------------
 static/js/hljs-theme-init.js         |  1 +
 static/js/projects.js                | 11 ++++++++--
 static/js/search.js                  | 16 ++++++++++----
 static/js/sessions.js                | 10 +++++++--
 tests/test_api_integration.py        |  5 +++--
 tests/test_hljs_theme_consistency.py | 32 +++++++++++++++++++++++++++
 10 files changed, 88 insertions(+), 34 deletions(-)

diff --git a/app.py b/app.py
index dbaaf82..a067957 100644
--- a/app.py
+++ b/app.py
@@ -25,6 +25,8 @@
         "img-src 'self' data:",
         "connect-src 'self'",
         "font-src 'self'",
+        "base-uri 'self'",
+        "frame-ancestors 'none'",
     ]
 )
 
diff --git a/docs/architecture.md b/docs/architecture.md
index b8ff9ca..fdeba4f 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -125,8 +125,10 @@ No bundler step — modern browsers load modules directly. Frontend unit tests u
 | `img-src` | `'self'`, `data:` | Session images and data URLs |
 | `connect-src` | `'self'` | API `fetch` calls to same origin |
 | `font-src` | `'self'` | Local fonts only |
+| `base-uri` | `'self'` | Restrict `<base>` tag injection |
+| `frame-ancestors` | `'none'` | Prevent clickjacking via iframes |
 
-**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'`.
+**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'`. Navbar and route UI handlers use `addEventListener` instead of inline `onclick` attributes for the same reason.
 
 ## Continuous integration
 
diff --git a/static/index.html b/static/index.html
index 9365957..4292dfc 100644
--- a/static/index.html
+++ b/static/index.html
@@ -36,15 +36,15 @@
   <!-- Navbar -->
   <nav class="navbar">
     <div class="navbar-inner">
-      <button class="hamburger" id="hamburger-btn" onclick="toggleSidebar()" aria-label="Toggle sidebar" style="display:none">
+      <button class="hamburger" id="hamburger-btn" aria-label="Toggle sidebar" style="display:none">
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
       </button>
-      <a href="#" onclick="showProjects();return false;" class="navbar-brand">Claude Code Chat Browser</a>
+      <a href="#" id="navbar-brand" class="navbar-brand">Claude Code Chat Browser</a>
       <div class="navbar-actions">
-        <a href="#search" onclick="showSearchPage();return false;" class="nav-link" title="Search">
+        <a href="#search" id="nav-search-link" class="nav-link" title="Search">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
         </a>
-        <button id="theme-toggle" class="nav-link" title="Toggle theme" onclick="toggleTheme()">
+        <button id="theme-toggle" class="nav-link" title="Toggle theme" type="button">
           <svg id="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
           <svg id="icon-sun"  width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
         </button>
diff --git a/static/js/app.js b/static/js/app.js
index b6f72ee..2122f7f 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1,4 +1,4 @@
-// Claude Code Chat Browser — Entry module (router + theme + window registrations).
+// Claude Code Chat Browser — Entry module (router + theme + navbar wiring).
 // Route modules live in sessions.js, projects.js, search.js, export.js.
 // Shared helpers live in shared/utils.js, shared/markdown.js, shared/theme.js.
 
@@ -6,9 +6,8 @@ import { state } from './shared/state.js';
 import { toggleSidebar, closeSidebar, loadingBar } from './shared/utils.js';
 import { HLJS_THEME_SHEETS, applyHljsTheme, applyTheme, toggleTheme, setWorkspaceMode } from './shared/theme.js';
 import { showProjects } from './projects.js';
-import { showWorkspace, loadSession, selectSession, copyAll } from './sessions.js';
-import { showSearchPage, doSearch } from './search.js';
-import { bulkExport, downloadSession } from './export.js';
+import { showWorkspace, loadSession } from './sessions.js';
+import { showSearchPage } from './search.js';
 
 // ==================== Router ====================
 
@@ -69,22 +68,18 @@ document.addEventListener('DOMContentLoaded', () => {
     topBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
     document.body.appendChild(topBtn);
     window.addEventListener('scroll', () => topBtn.classList.toggle('show', window.scrollY > 400));
-});
-
-// ==================== Window registrations for inline HTML handlers ====================
-// Functions listed here are called from onclick="..." attributes in index.html or
-// in HTML strings generated by route modules. ES module scope does not expose
-// identifiers to the global scope automatically, so they must be registered on window.
 
-window.showProjects    = showProjects;
-window.showSearchPage  = showSearchPage;
-window.toggleTheme     = toggleTheme;
-window.toggleSidebar   = toggleSidebar;
-window.selectSession   = selectSession;
-window.copyAll         = copyAll;
-window.downloadSession = downloadSession;
-window.bulkExport      = bulkExport;
-window.doSearch        = doSearch;
+    document.getElementById('hamburger-btn')?.addEventListener('click', toggleSidebar);
+    document.getElementById('navbar-brand')?.addEventListener('click', (e) => {
+        e.preventDefault();
+        showProjects();
+    });
+    document.getElementById('nav-search-link')?.addEventListener('click', (e) => {
+        e.preventDefault();
+        showSearchPage();
+    });
+    document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
+});
 
 // Keep HLJS_THEME_SHEETS accessible for test_hljs_theme_consistency.py (source-level check)
 export { HLJS_THEME_SHEETS };
diff --git a/static/js/hljs-theme-init.js b/static/js/hljs-theme-init.js
index a766181..668e9e5 100644
--- a/static/js/hljs-theme-init.js
+++ b/static/js/hljs-theme-init.js
@@ -5,6 +5,7 @@
   if (t !== 'light') return;
   var link = document.getElementById('hljs-theme');
   if (!link) return;
+  // Set integrity before href — browser reads integrity at fetch time (see applyHljsTheme).
   link.integrity = 'sha512-0aPQyyeZrWj9sCA46UlmWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA==';
   link.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css';
 })();
diff --git a/static/js/projects.js b/static/js/projects.js
index f3928d8..d103fef 100644
--- a/static/js/projects.js
+++ b/static/js/projects.js
@@ -3,9 +3,15 @@
 import { state } from './shared/state.js';
 import { esc, formatDate, smoothSet, loadingBar, setHamburgerVisible } from './shared/utils.js';
 import { setWorkspaceMode } from './shared/theme.js';
+import { bulkExport } from './export.js';
 
 // ==================== Projects (home) ====================
 
+function bindProjectsExportButtons(root) {
+    root.querySelector('#btn-export-since')?.addEventListener('click', () => bulkExport('incremental'));
+    root.querySelector('#btn-export-all')?.addEventListener('click', () => bulkExport('all'));
+}
+
 export async function showProjects() {
     state.currentProject = null;
     setHamburgerVisible(false);
@@ -69,7 +75,7 @@ export async function showProjects() {
         }
 
         const sinceBtnHtml = hasPreviousExport
-            ? `<button class="btn btn-primary btn-sm" id="btn-export-since" onclick="bulkExport('incremental')">
+            ? `<button type="button" class="btn btn-primary btn-sm" id="btn-export-since">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                 Export new since last
               </button>`
@@ -80,7 +86,7 @@ export async function showProjects() {
                 <h1>Projects</h1>
                 <div class="btn-group">
                     ${sinceBtnHtml}
-                    <button class="btn btn-outline btn-sm" id="btn-export-all" onclick="bulkExport('all')">
+                    <button type="button" class="btn btn-outline btn-sm" id="btn-export-all">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                         Export all
                     </button>
@@ -140,6 +146,7 @@ export async function showProjects() {
 
         loadingBar.done();
         smoothSet(content, html);
+        bindProjectsExportButtons(content);
     } catch (e) {
         loadingBar.done();
         smoothSet(content, `<div class="loading"><p class="text-danger">Failed to load projects.</p></div>`);
diff --git a/static/js/search.js b/static/js/search.js
index 31020b2..bd310a4 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -2,6 +2,7 @@
 
 import { esc, smoothSet, setHamburgerVisible } from './shared/utils.js';
 import { setWorkspaceMode } from './shared/theme.js';
+import { showProjects } from './projects.js';
 
 // ==================== Search ====================
 
@@ -14,19 +15,26 @@ export function showSearchPage() {
     const content = document.getElementById('content');
     content.innerHTML = `
         <div class="search-page">
-            <a class="back-link" href="#" onclick="showProjects();return false;">
+            <a class="back-link" href="#" id="search-back-link">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
                 Back to Projects
             </a>
             <br><br>
             <h1>Search</h1>
             <div class="search-bar">
-                <input class="input" type="text" id="search-input" placeholder="Search conversations..." autofocus
-                       onkeydown="if(event.key==='Enter') doSearch()">
-                <button class="btn btn-primary" onclick="doSearch()">Search</button>
+                <input class="input" type="text" id="search-input" placeholder="Search conversations..." autofocus>
+                <button type="button" class="btn btn-primary" id="search-submit-btn">Search</button>
             </div>
             <div id="search-results"></div>
         </div>`;
+    document.getElementById('search-back-link')?.addEventListener('click', (e) => {
+        e.preventDefault();
+        showProjects();
+    });
+    document.getElementById('search-submit-btn')?.addEventListener('click', doSearch);
+    document.getElementById('search-input')?.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') doSearch();
+    });
     document.getElementById('search-results').addEventListener('click', (e) => {
         if (!(e.target instanceof Element)) return;
         const result = e.target.closest('.search-result[data-project]');
diff --git a/static/js/sessions.js b/static/js/sessions.js
index a6821e5..33d5a8c 100644
--- a/static/js/sessions.js
+++ b/static/js/sessions.js
@@ -5,6 +5,7 @@ import { esc, formatDate, formatTs, smoothSet, loadingBar, showToast, closeSideb
 import { renderMarkdown, cleanContent } from './shared/markdown.js';
 import { setWorkspaceMode } from './shared/theme.js';
 import { downloadSession } from './export.js';
+import { showProjects } from './projects.js';
 import { renderToolUse, renderToolResult, toolResultHasBody } from './render/registry.js';
 
 // ==================== Workspace (split layout) ====================
@@ -66,7 +67,7 @@ export async function showWorkspace(projectName, selectedSessionId) {
         sidebar += '</div>';
 
         let html = `<div class="workspace-top-bar">
-            <a class="btn btn-ghost btn-sm back-link" href="#" onclick="showProjects();return false;">
+            <a class="btn btn-ghost btn-sm back-link" href="#" id="ws-back-link">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
                 Back to Projects
             </a>
@@ -84,6 +85,10 @@ export async function showWorkspace(projectName, selectedSessionId) {
         </div>`;
         smoothSet(content, html);
         bindSidebarSessionClicks();
+        content.querySelector('#ws-back-link')?.addEventListener('click', (e) => {
+            e.preventDefault();
+            showProjects();
+        });
         loadingBar.done();
 
         if (selectedSessionId) {
@@ -175,7 +180,7 @@ export async function loadSession(projectName, sessionId) {
         const wsActions = document.getElementById('ws-actions');
         if (wsActions) {
             wsActions.innerHTML = `<div class="btn-group">
-                <button class="btn btn-outline btn-sm" onclick="copyAll()">
+                <button type="button" class="btn btn-outline btn-sm" id="btn-copy-all">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                     Copy All
                 </button>
@@ -185,6 +190,7 @@ export async function loadSession(projectName, sessionId) {
                 </button>
             </div>`;
             bindWorkspaceDownloadClick(wsActions);
+            wsActions.querySelector('#btn-copy-all')?.addEventListener('click', copyAll);
         }
 
         html += `<div class="card">
diff --git a/tests/test_api_integration.py b/tests/test_api_integration.py
index 0b07ce6..7f929ce 100644
--- a/tests/test_api_integration.py
+++ b/tests/test_api_integration.py
@@ -9,6 +9,7 @@
 
 from __future__ import annotations
 
+from app import CSP_POLICY
 from tests.conftest import assert_error_response as _assert_error_shape
 
 # --- / (SPA shell) ---
@@ -16,8 +17,8 @@
 
 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"]
+    assert resp.status_code == 200
+    assert resp.headers.get("Content-Security-Policy") == CSP_POLICY
 
 
 # --- /api/projects ---
diff --git a/tests/test_hljs_theme_consistency.py b/tests/test_hljs_theme_consistency.py
index 5b80465..82a89ff 100644
--- a/tests/test_hljs_theme_consistency.py
+++ b/tests/test_hljs_theme_consistency.py
@@ -16,6 +16,7 @@
 
 REPO_ROOT = Path(__file__).resolve().parent.parent
 INDEX_HTML = REPO_ROOT / "static" / "index.html"
+HLJS_THEME_INIT_JS = REPO_ROOT / "static" / "js" / "hljs-theme-init.js"
 # HLJS_THEME_SHEETS was extracted to shared/theme.js (Day 4 module split).
 # app.js re-exports it, but the canonical source is theme.js.
 APP_JS = REPO_ROOT / "static" / "js" / "shared" / "theme.js"
@@ -47,6 +48,19 @@ def _js_theme_entry(js: str, theme: str) -> dict:
     return out
 
 
+def _js_string_assignments(js: str, keys: tuple[str, ...]) -> dict[str, str]:
+    """Return string literal assignments like ``link.href = '...'`` from classic JS."""
+    out: dict[str, str] = {}
+    for key in keys:
+        m = re.search(
+            r"link\." + re.escape(key) + r"\s*=\s*['\"]([^'\"]+)['\"]",
+            js,
+        )
+        assert m, f"hljs-theme-init.js has no link.{key} assignment"
+        out[key] = m.group(1)
+    return out
+
+
 def test_dark_theme_url_and_hash_match_between_html_and_js():
     html = INDEX_HTML.read_text(encoding="utf-8")
     js = APP_JS.read_text(encoding="utf-8")
@@ -65,3 +79,21 @@ def test_dark_theme_url_and_hash_match_between_html_and_js():
         f"html={html_integrity!r}, "
         f"app.js HLJS_THEME_SHEETS.dark={js_dark['integrity']!r}."
     )
+
+
+def test_light_theme_url_and_hash_match_between_hljs_init_and_theme_js():
+    init_js = HLJS_THEME_INIT_JS.read_text(encoding="utf-8")
+    theme_js = APP_JS.read_text(encoding="utf-8")
+
+    init = _js_string_assignments(init_js, ("integrity", "href"))
+    js_light = _js_theme_entry(theme_js, "light")
+
+    assert init["href"] == js_light["href"], (
+        "highlight.js light theme URL drifted between hljs-theme-init.js and theme.js — "
+        f"init={init['href']!r}, theme.js HLJS_THEME_SHEETS.light={js_light['href']!r}."
+    )
+    assert init["integrity"] == js_light["integrity"], (
+        "highlight.js light theme SRI hash drifted between hljs-theme-init.js and theme.js — "
+        f"init={init['integrity']!r}, "
+        f"theme.js HLJS_THEME_SHEETS.light={js_light['integrity']!r}."
+    )

From 35275f0a8fe2808f496f732a2105229aae701e0f Mon Sep 17 00:00:00 2001
From: chen <clean6378@gmail.com>
Date: Wed, 17 Jun 2026 00:47:10 +0800
Subject: [PATCH 3/5] fix: harden CSP policy and address PR review feedback

---
 app.py                               |  5 ++++-
 docs/architecture.md                 |  2 ++
 static/js/app.js                     |  4 ++--
 static/js/search.js                  |  2 +-
 tests/test_api_integration.py        |  6 ++++++
 tests/test_hljs_theme_consistency.py | 16 ++++++++--------
 6 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/app.py b/app.py
index a067957..fbc08a4 100644
--- a/app.py
+++ b/app.py
@@ -25,6 +25,8 @@
         "img-src 'self' data:",
         "connect-src 'self'",
         "font-src 'self'",
+        "object-src 'none'",
+        "form-action 'self'",
         "base-uri 'self'",
         "frame-ancestors 'none'",
     ]
@@ -102,7 +104,8 @@ def create_app(
 
     @app.after_request
     def set_security_headers(response):
-        response.headers.setdefault("Content-Security-Policy", CSP_POLICY)
+        # Always set — do not use setdefault; a blueprint must not weaken CSP.
+        response.headers["Content-Security-Policy"] = CSP_POLICY
         return response
 
     @app.route("/")
diff --git a/docs/architecture.md b/docs/architecture.md
index fdeba4f..4151f55 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -125,6 +125,8 @@ No bundler step — modern browsers load modules directly. Frontend unit tests u
 | `img-src` | `'self'`, `data:` | Session images and data URLs |
 | `connect-src` | `'self'` | API `fetch` calls to same origin |
 | `font-src` | `'self'` | Local fonts only |
+| `object-src` | `'none'` | Block plugins / `<object>` embeds (no plugin use in this app) |
+| `form-action` | `'self'` | Restrict form submissions to same origin |
 | `base-uri` | `'self'` | Restrict `<base>` tag injection |
 | `frame-ancestors` | `'none'` | Prevent clickjacking via iframes |
 
diff --git a/static/js/app.js b/static/js/app.js
index 2122f7f..d472670 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -3,8 +3,8 @@
 // Shared helpers live in shared/utils.js, shared/markdown.js, shared/theme.js.
 
 import { state } from './shared/state.js';
-import { toggleSidebar, closeSidebar, loadingBar } from './shared/utils.js';
-import { HLJS_THEME_SHEETS, applyHljsTheme, applyTheme, toggleTheme, setWorkspaceMode } from './shared/theme.js';
+import { toggleSidebar, closeSidebar } from './shared/utils.js';
+import { HLJS_THEME_SHEETS, applyTheme, toggleTheme } from './shared/theme.js';
 import { showProjects } from './projects.js';
 import { showWorkspace, loadSession } from './sessions.js';
 import { showSearchPage } from './search.js';
diff --git a/static/js/search.js b/static/js/search.js
index bd310a4..8192c15 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -44,7 +44,7 @@ export function showSearchPage() {
         if (!project || !sessionId) return;
         window.location.hash = `#project/${encodeURIComponent(project)}/${encodeURIComponent(sessionId)}`;
     });
-    document.getElementById('search-input').focus();
+    document.getElementById('search-input')?.focus();
 }
 
 export async function doSearch() {
diff --git a/tests/test_api_integration.py b/tests/test_api_integration.py
index 7f929ce..9500d55 100644
--- a/tests/test_api_integration.py
+++ b/tests/test_api_integration.py
@@ -21,6 +21,12 @@ def test_root_sets_csp_header(client):
     assert resp.headers.get("Content-Security-Policy") == CSP_POLICY
 
 
+def test_api_routes_set_csp_header(client):
+    resp = client.get("/api/projects")
+    assert resp.status_code == 200
+    assert resp.headers.get("Content-Security-Policy") == CSP_POLICY
+
+
 # --- /api/projects ---
 
 
diff --git a/tests/test_hljs_theme_consistency.py b/tests/test_hljs_theme_consistency.py
index 82a89ff..ef6c2c5 100644
--- a/tests/test_hljs_theme_consistency.py
+++ b/tests/test_hljs_theme_consistency.py
@@ -19,7 +19,7 @@
 HLJS_THEME_INIT_JS = REPO_ROOT / "static" / "js" / "hljs-theme-init.js"
 # HLJS_THEME_SHEETS was extracted to shared/theme.js (Day 4 module split).
 # app.js re-exports it, but the canonical source is theme.js.
-APP_JS = REPO_ROOT / "static" / "js" / "shared" / "theme.js"
+THEME_JS = REPO_ROOT / "static" / "js" / "shared" / "theme.js"
 
 
 def _link_attr(html: str, link_id: str, attr: str) -> str:
@@ -38,7 +38,7 @@ def _link_attr(html: str, link_id: str, attr: str) -> str:
 def _js_theme_entry(js: str, theme: str) -> dict:
     """Return {'href': ..., 'integrity': ...} from HLJS_THEME_SHEETS.<theme>."""
     block = re.search(re.escape(theme) + r"\s*:\s*\{([^}]*)\}", js, re.DOTALL)
-    assert block, f"HLJS_THEME_SHEETS.{theme} entry not found in app.js"
+    assert block, f"HLJS_THEME_SHEETS.{theme} entry not found in theme.js"
     body = block.group(1)
     out = {}
     for key in ("href", "integrity"):
@@ -63,27 +63,27 @@ def _js_string_assignments(js: str, keys: tuple[str, ...]) -> dict[str, str]:
 
 def test_dark_theme_url_and_hash_match_between_html_and_js():
     html = INDEX_HTML.read_text(encoding="utf-8")
-    js = APP_JS.read_text(encoding="utf-8")
+    js = THEME_JS.read_text(encoding="utf-8")
 
     html_href = _link_attr(html, "hljs-theme", "href")
     html_integrity = _link_attr(html, "hljs-theme", "integrity")
     js_dark = _js_theme_entry(js, "dark")
 
     assert html_href == js_dark["href"], (
-        "highlight.js theme URL drifted between index.html and app.js — "
-        f"html={html_href!r}, app.js HLJS_THEME_SHEETS.dark={js_dark['href']!r}. "
+        "highlight.js theme URL drifted between index.html and theme.js — "
+        f"html={html_href!r}, theme.js HLJS_THEME_SHEETS.dark={js_dark['href']!r}. "
         "On a version bump both must update together (issue #19)."
     )
     assert html_integrity == js_dark["integrity"], (
-        "highlight.js theme SRI hash drifted between index.html and app.js — "
+        "highlight.js theme SRI hash drifted between index.html and theme.js — "
         f"html={html_integrity!r}, "
-        f"app.js HLJS_THEME_SHEETS.dark={js_dark['integrity']!r}."
+        f"theme.js HLJS_THEME_SHEETS.dark={js_dark['integrity']!r}."
     )
 
 
 def test_light_theme_url_and_hash_match_between_hljs_init_and_theme_js():
     init_js = HLJS_THEME_INIT_JS.read_text(encoding="utf-8")
-    theme_js = APP_JS.read_text(encoding="utf-8")
+    theme_js = THEME_JS.read_text(encoding="utf-8")
 
     init = _js_string_assignments(init_js, ("integrity", "href"))
     js_light = _js_theme_entry(theme_js, "light")

From 67ef87e2d478ed8834d7571389b9e99b9963b822 Mon Sep 17 00:00:00 2001
From: chen <clean6378@gmail.com>
Date: Wed, 17 Jun 2026 03:10:59 +0800
Subject: [PATCH 4/5] docs: clarify style-src unsafe-inline scope in
 architecture.md

---
 docs/architecture.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/architecture.md b/docs/architecture.md
index 4151f55..86fdb59 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -121,7 +121,7 @@ No bundler step — modern browsers load modules directly. Frontend unit tests u
 |-----------|---------|-------|
 | `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 |
+| `style-src` | `'self'`, `'unsafe-inline'`, `https://cdnjs.cloudflare.com` | `'unsafe-inline'` required for highlight.js theme inline styles **and** the app's own inline `style` attributes (e.g. hamburger `display:none` in `index.html`, layout tweaks in JS templates). Dropping highlight.js alone does not remove this need; nonces are the future tightening path |
 | `img-src` | `'self'`, `data:` | Session images and data URLs |
 | `connect-src` | `'self'` | API `fetch` calls to same origin |
 | `font-src` | `'self'` | Local fonts only |
@@ -130,7 +130,7 @@ No bundler step — modern browsers load modules directly. Frontend unit tests u
 | `base-uri` | `'self'` | Restrict `<base>` tag injection |
 | `frame-ancestors` | `'none'` | Prevent clickjacking via iframes |
 
-**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'`. Navbar and route UI handlers use `addEventListener` instead of inline `onclick` attributes for the same reason.
+**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`). Recompute SRI hashes against the live CDN payload when bumping highlight.js — `tests/test_hljs_theme_consistency.py` cross-checks `index.html`, `hljs-theme-init.js`, and `theme.js` stay in sync with each other (not the live CDN, which would be flaky in CI). 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'`. Navbar and route UI handlers use `addEventListener` instead of inline `onclick` attributes for the same reason.
 
 ## Continuous integration
 

From d76e8562280b6692fb9a596351b79d94bab3d7f2 Mon Sep 17 00:00:00 2001
From: chen <clean6378@gmail.com>
Date: Wed, 17 Jun 2026 03:26:07 +0800
Subject: [PATCH 5/5] test: add coverage for CSP theme-init scripts and navbar
 handlers

---
 static/js/app.test.js             | 60 ++++++++++++++++++++++++++++++-
 static/js/hljs-theme-init.test.js | 34 ++++++++++++++++++
 static/js/theme-init.test.js      | 26 ++++++++++++++
 3 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 static/js/hljs-theme-init.test.js
 create mode 100644 static/js/theme-init.test.js

diff --git a/static/js/app.test.js b/static/js/app.test.js
index 03a399c..c2a255e 100644
--- a/static/js/app.test.js
+++ b/static/js/app.test.js
@@ -5,16 +5,22 @@ const showProjects = vi.fn();
 const showWorkspace = vi.fn();
 const loadSession = vi.fn();
 const showSearchPage = vi.fn();
+const toggleTheme = vi.fn();
+const toggleSidebar = vi.fn();
 
 vi.mock('./projects.js', () => ({ showProjects }));
 vi.mock('./sessions.js', () => ({ showWorkspace, loadSession, selectSession: vi.fn(), copyAll: vi.fn() }));
 vi.mock('./search.js', () => ({ showSearchPage, doSearch: vi.fn() }));
 vi.mock('./export.js', () => ({ bulkExport: vi.fn(), downloadSession: vi.fn() }));
+vi.mock('./shared/utils.js', async (importOriginal) => {
+    const actual = await importOriginal();
+    return { ...actual, toggleSidebar, closeSidebar: vi.fn() };
+});
 vi.mock('./shared/theme.js', () => ({
     HLJS_THEME_SHEETS: {},
     applyHljsTheme: vi.fn(),
     applyTheme: vi.fn(),
-    toggleTheme: vi.fn(),
+    toggleTheme,
     setWorkspaceMode: vi.fn(),
 }));
 
@@ -109,3 +115,55 @@ describe('router (app.js)', () => {
         expect(showWorkspace).toHaveBeenCalledWith('other');
     });
 });
+
+describe('navbar handlers (app.js DOMContentLoaded)', () => {
+    const origScrollTo = window.scrollTo;
+
+    beforeAll(async () => {
+        vi.resetModules();
+        window.scrollTo = vi.fn();
+        document.body.innerHTML = `
+            <button id="hamburger-btn"></button>
+            <a id="navbar-brand" href="#"></a>
+            <a id="nav-search-link" href="#search"></a>
+            <button id="theme-toggle"></button>
+            <div id="content"></div>
+            <span id="footer-year"></span>
+        `;
+        await import('./app.js');
+        document.dispatchEvent(new Event('DOMContentLoaded'));
+    });
+
+    afterAll(() => {
+        window.scrollTo = origScrollTo;
+    });
+
+    beforeEach(() => {
+        toggleTheme.mockClear();
+        toggleSidebar.mockClear();
+        showProjects.mockClear();
+        showSearchPage.mockClear();
+    });
+
+    it('wires hamburger click to toggleSidebar', () => {
+        document.getElementById('hamburger-btn').click();
+        expect(toggleSidebar).toHaveBeenCalledTimes(1);
+    });
+
+    it('wires navbar brand click to showProjects', () => {
+        const brand = document.getElementById('navbar-brand');
+        brand.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        expect(showProjects).toHaveBeenCalled();
+    });
+
+    it('wires nav search link click to showSearchPage', () => {
+        const link = document.getElementById('nav-search-link');
+        link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        expect(showSearchPage).toHaveBeenCalled();
+    });
+
+    it('wires theme toggle click to toggleTheme', () => {
+        document.getElementById('theme-toggle').click();
+        expect(toggleTheme).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/static/js/hljs-theme-init.test.js b/static/js/hljs-theme-init.test.js
new file mode 100644
index 0000000..43f3f4c
--- /dev/null
+++ b/static/js/hljs-theme-init.test.js
@@ -0,0 +1,34 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('hljs-theme-init.js', () => {
+    beforeEach(() => {
+        vi.resetModules();
+        document.documentElement.setAttribute('data-theme', 'dark');
+        document.body.innerHTML = '';
+    });
+
+    it('does nothing when data-theme is dark', async () => {
+        document.body.innerHTML = '<link id="hljs-theme" href="https://example.com/dark.css" />';
+        await import('./hljs-theme-init.js');
+        const link = document.getElementById('hljs-theme');
+        expect(link.href).toContain('dark.css');
+        expect(link.getAttribute('integrity')).toBeNull();
+    });
+
+    it('sets light-theme CDN href and SRI when data-theme is light', async () => {
+        document.documentElement.setAttribute('data-theme', 'light');
+        document.body.innerHTML = '<link id="hljs-theme" href="about:blank" />';
+        await import('./hljs-theme-init.js');
+        const link = document.getElementById('hljs-theme');
+        expect(link.href).toContain('github.min.css');
+        expect(link.integrity).toBe(
+            'sha512-0aPQyyeZrWj9sCA46UlmWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA==',
+        );
+    });
+
+    it('no-ops when hljs-theme link is missing', async () => {
+        document.documentElement.setAttribute('data-theme', 'light');
+        await import('./hljs-theme-init.js');
+        expect(document.getElementById('hljs-theme')).toBeNull();
+    });
+});
diff --git a/static/js/theme-init.test.js b/static/js/theme-init.test.js
new file mode 100644
index 0000000..d57449e
--- /dev/null
+++ b/static/js/theme-init.test.js
@@ -0,0 +1,26 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('theme-init.js', () => {
+    beforeEach(() => {
+        vi.resetModules();
+        localStorage.clear();
+        document.documentElement.removeAttribute('data-theme');
+    });
+
+    it('defaults to dark when localStorage has no theme', async () => {
+        await import('./theme-init.js');
+        expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+    });
+
+    it('applies saved light theme before paint', async () => {
+        localStorage.setItem('theme', 'light');
+        await import('./theme-init.js');
+        expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+    });
+
+    it('ignores invalid stored theme values', async () => {
+        localStorage.setItem('theme', 'sepia');
+        await import('./theme-init.js');
+        expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+    });
+});