fix: wire UI handlers for CSP compliance and strengthen policy tests

clean6378-max-it · clean6378-max-it · commit aba3526130b5 · 2026-06-17T00:34:27.000+08:00
diff --git 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
@@ -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
@@ -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
@@ -1,14 +1,13 @@
-// 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.
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,15 +9,16 @@
 
 from __future__ import annotations
 
+from app import CSP_POLICY
 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"]
+    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
@@ -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}."
+    )

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,8 @@`
`25`	`25`	`"img-src 'self' data:",`
`26`	`26`	`"connect-src 'self'",`
`27`	`27`	`"font-src 'self'",`
	`28`	`+ "base-uri 'self'",`
	`29`	`+ "frame-ancestors 'none'",`
`28`	`30`	`]`
`29`	`31`	`)`
`30`	`32`