fix: harden routing, encoding, error handling, and XSS in frontend modules

Author: clean6378-max-it

static/js/app.js

@@ -12,6 +12,10 @@ import { bulkExport, downloadSession } from './export.js';
 
 // ==================== Router ====================
 
+function safeDecode(str) {
+    try { return decodeURIComponent(str); } catch { return null; }
+}
+
 function handleRoute() {
     if (state.navInProgress) return;
     window.scrollTo(0, 0);
@@ -20,7 +24,8 @@ function handleRoute() {
         const parts = hash.slice(9);
         const slashIdx = parts.indexOf('/');
         if (slashIdx > 0) {
-            const project = decodeURIComponent(parts.slice(0, slashIdx));
+            const project = safeDecode(parts.slice(0, slashIdx));
+            if (!project) { showProjects(); return; }
             const sessionId = parts.slice(slashIdx + 1);
             if (state.currentProject === project && state.cachedSessions.length > 0 && document.getElementById('sidebar')) {
                 document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));
@@ -31,7 +36,9 @@ function handleRoute() {
                 showWorkspace(project, sessionId);
             }
         } else {
-            showWorkspace(decodeURIComponent(parts));
+            const project = safeDecode(parts);
+            if (!project) { showProjects(); return; }
+            showWorkspace(project);
         }
     } else if (hash === '#search') {
         showSearchPage();

static/js/export.js

@@ -49,7 +49,7 @@ export async function downloadSession(project, sessionId) {
     const handle = await getFileHandle(fname, [{ description: 'Markdown', accept: { 'text/markdown': ['.md'] } }]);
     if (!handle) return;
     try {
-        const res = await fetch(`/api/export/session/${encodeURIComponent(project)}/${sessionId}`);
+        const res = await fetch(`/api/export/session/${encodeURIComponent(project)}/${encodeURIComponent(sessionId)}`);
         if (!res.ok) throw new Error(`Download failed: ${res.status}`);
         const blob = await res.blob();
         await writeToHandle(handle, blob, fname);
@@ -72,8 +72,13 @@ async function getFileHandle(suggestedName, fileTypes) {
 async function writeToHandle(handle, blob, fallbackName) {
     if (handle !== 'fallback') {
         const writable = await handle.createWritable();
-        await writable.write(blob);
-        await writable.close();
+        try {
+            await writable.write(blob);
+            await writable.close();
+        } catch (e) {
+            try { await writable.abort(); } catch { /* ignore abort errors */ }
+            throw e;
+        }
     } else {
         const url = URL.createObjectURL(blob);
         const a = document.createElement('a');

static/js/projects.js

@@ -24,6 +24,13 @@ export async function showProjects() {
             fetch('/api/projects'),
             fetch('/api/export/state').catch(() => null),
         ]);
+        if (!projRes.ok) {
+            let msg = `Failed to load projects (${projRes.status})`;
+            try { const body = await projRes.json(); if (body.error) msg = body.error; } catch { try { msg = await projRes.text() || msg; } catch { /* ignore */ } }
+            loadingBar.done();
+            smoothSet(content, `<div class="loading"><p class="text-danger">${esc(msg)}</p></div>`);
+            return;
+        }
         const projects = await projRes.json();
         loadingBar.done();
 
@@ -44,7 +51,7 @@ export async function showProjects() {
                     const d = new Date(exportState.last_export_time);
                     if (!isNaN(d.getTime())) {
                         hasPreviousExport = true;
-                        const sessionCount = exportState.last_export_session_count ?? exportState.export_count ?? 0;
+                        const sessionCount = Math.max(0, parseInt(exportState.last_export_session_count ?? exportState.export_count ?? 0, 10) || 0);
                         lastExportHtml = `<p class="text-muted text-sm" style="margin:0">Last export: ${d.toLocaleString()} (${sessionCount} sessions in last export)</p>`;
                     }
                 }

static/js/search.js

@@ -39,13 +39,18 @@ export async function doSearch() {
 
     try {
         const res = await fetch(`/api/search?q=${encodeURIComponent(query)}&limit=50`);
+        if (!res.ok) {
+            let msg = `Search failed (${res.status})`;
+            try { msg = await res.text() || msg; } catch { /* ignore */ }
+            throw new Error(msg);
+        }
         const results = await res.json();
 
         let html = `<p class="text-muted text-sm">${results.length} result${results.length !== 1 ? 's' : ''}</p><br>`;
         html += '<div class="search-results">';
 
         for (const r of results) {
-            html += `<div class="search-result" onclick="window.location.hash='#project/${encodeURIComponent(r.project)}/${r.session_id}'">
+            html += `<div class="search-result" onclick="window.location.hash='#project/${encodeURIComponent(r.project)}/${encodeURIComponent(r.session_id)}'">
                 <div><strong>${esc(r.title)}</strong> <span class="text-muted text-sm">${esc(r.project)} &bull; ${esc(r.role)}</span></div>
                 <div class="snippet">...${esc(r.snippet)}...</div>
             </div>`;

static/js/sessions.js

@@ -54,7 +54,7 @@ export async function showWorkspace(projectName, selectedSessionId) {
                 const errorClass = s.error ? ' sidebar-item-error' : '';
                 const errorDetail = s.error_detail ? `<div class="error-detail">${esc(s.error_detail)}</div>` : '';
                 const modelBadge = models ? `<span style="font-size:0.65rem;opacity:0.6;display:block;margin-top:1px">${esc(models)}</span>` : '';
-                sidebar += `<button class="sidebar-item${isActive}${errorClass}" onclick="selectSession('${esc(projectName)}','${esc(s.id)}')" id="sidebar-${s.id}">
+                sidebar += `<button class="sidebar-item${isActive}${errorClass}" onclick="selectSession(${JSON.stringify(projectName)},${JSON.stringify(s.id)})" id="sidebar-${esc(s.id)}">
                     <div class="sidebar-item-title">${esc(title)}</div>
                     ${errorDetail}
                     <div class="sidebar-item-time">${esc(ts)}${modelBadge}</div>
@@ -96,7 +96,7 @@ export async function showWorkspace(projectName, selectedSessionId) {
 
 export function selectSession(projectName, sessionId) {
     closeSidebar();
-    window.location.hash = `#project/${encodeURIComponent(projectName)}/${sessionId}`;
+    window.location.hash = `#project/${encodeURIComponent(projectName)}/${encodeURIComponent(sessionId)}`;
 }
 
 export async function loadSession(projectName, sessionId) {
@@ -105,7 +105,7 @@ export async function loadSession(projectName, sessionId) {
     loadingBar.start();
 
     try {
-        const res = await fetch(`/api/sessions/${encodeURIComponent(projectName)}/${sessionId}`);
+        const res = await fetch(`/api/sessions/${encodeURIComponent(projectName)}/${encodeURIComponent(sessionId)}`);
         if (!res.ok) {
             loadingBar.done();
             const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
@@ -151,7 +151,7 @@ export async function loadSession(projectName, sessionId) {
                     <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>
-                <button class="btn btn-outline btn-sm" onclick="downloadSession('${esc(projectName)}','${sessionId}')">
+                <button class="btn btn-outline btn-sm" onclick="downloadSession(${JSON.stringify(projectName)},${JSON.stringify(sessionId)})">
                     <svg width="14" height="14" 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>
                     Download
                 </button>
@@ -392,8 +392,8 @@ function renderToolResult(parsed) {
 }
 
 export function copyAll() {
-    const msgs = document.querySelector('.messages-container');
-    if (!msgs) return;
-    const text = msgs.innerText;
+    const sessionEl = document.querySelector('.session-content-inner') || document.querySelector('#session-content');
+    if (!sessionEl) return;
+    const text = sessionEl.innerText;
     navigator.clipboard.writeText(text).then(() => showToast('Copied to clipboard', 'success'));
 }

static/js/shared/markdown.js

@@ -39,9 +39,7 @@ export function renderMarkdown(text) {
             if (typeof DOMPurify !== 'undefined') {
                 return DOMPurify.sanitize(parsed);
             }
-            // DOMPurify not yet loaded — return parsed but log a warning
-            console.warn('[renderMarkdown] DOMPurify not available; output is unsanitized');
-            return parsed;
+            throw new Error('DOMPurify not available');
         } catch (e) { /* fall through to escaped fallback */ }
     }
     // Fallback: fully escaped output with basic code block conversion (no DOMPurify needed)

static/js/shared/utils.js

@@ -13,6 +13,7 @@ export function truncate(s, max) {
 export function formatTs(ts) {
     try {
         const d = new Date(ts);
+        if (isNaN(d.getTime())) return ts;
         const mm = String(d.getUTCMonth() + 1).padStart(2, '0');
         const dd = String(d.getUTCDate()).padStart(2, '0');
         const yyyy = d.getUTCFullYear();
@@ -29,6 +30,7 @@ export function formatTs(ts) {
 export function formatDate(ts) {
     try {
         const d = new Date(ts);
+        if (isNaN(d.getTime())) return ts ? ts.slice(0, 10) : '';
         const mm = String(d.getUTCMonth() + 1).padStart(2, '0');
         const dd = String(d.getUTCDate()).padStart(2, '0');
         const yyyy = d.getUTCFullYear();
@@ -37,7 +39,7 @@ export function formatDate(ts) {
 }
 
 export function formatSize(bytes) {
-    if (!bytes) return '?';
+    if (bytes == null) return '?';
     if (bytes < 1024) return bytes + ' B';
     if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
     return (bytes / 1048576).toFixed(1) + ' MB';
@@ -59,9 +61,20 @@ export function showToast(message, type = 'info') {
     const icons = { success: '\u2713', error: '\u2717', info: '\u2139' };
     const toast = document.createElement('div');
     toast.className = `toast toast-${type}`;
-    toast.innerHTML = `<span class="toast-icon">${icons[type] || icons.info}</span><span class="toast-text">${message}</span><button class="toast-close">\u00d7</button><div class="toast-progress"></div>`;
+    const iconSpan = document.createElement('span');
+    iconSpan.className = 'toast-icon';
+    iconSpan.textContent = icons[type] || icons.info;
+    const textSpan = document.createElement('span');
+    textSpan.className = 'toast-text';
+    textSpan.textContent = message;
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'toast-close';
+    closeBtn.textContent = '\u00d7';
+    const progress = document.createElement('div');
+    progress.className = 'toast-progress';
+    toast.append(iconSpan, textSpan, closeBtn, progress);
     document.body.appendChild(toast);
-    toast.querySelector('.toast-close').addEventListener('click', () => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 300); });
+    closeBtn.addEventListener('click', () => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 300); });
     requestAnimationFrame(() => toast.classList.add('show'));
     setTimeout(() => {
         toast.classList.remove('show');
@@ -74,16 +87,16 @@ export function showConfirm(message, onConfirm) {
     overlay.className = 'confirm-overlay';
     const dialog = document.createElement('div');
     dialog.className = 'confirm-dialog';
-    dialog.innerHTML = `
-        <div class="confirm-header">
-            <span class="confirm-icon">?</span>
-            <span class="confirm-title">Confirm Action</span>
-        </div>
-        <p class="confirm-message">${message}</p>
-        <div class="confirm-actions">
-            <button class="confirm-btn confirm-cancel">Cancel</button>
-            <button class="confirm-btn confirm-ok">Confirm</button>
-        </div>`;
+    const header = document.createElement('div');
+    header.className = 'confirm-header';
+    header.innerHTML = '<span class="confirm-icon">?</span><span class="confirm-title">Confirm Action</span>';
+    const msgEl = document.createElement('p');
+    msgEl.className = 'confirm-message';
+    msgEl.textContent = message;
+    const actions = document.createElement('div');
+    actions.className = 'confirm-actions';
+    actions.innerHTML = '<button class="confirm-btn confirm-cancel">Cancel</button><button class="confirm-btn confirm-ok">Confirm</button>';
+    dialog.append(header, msgEl, actions);
     overlay.appendChild(dialog);
     document.body.appendChild(overlay);
     requestAnimationFrame(() => overlay.classList.add('show'));

tests/test_xss_sanitization.py

@@ -114,7 +114,7 @@ def test_only_shared_markdown_calls_marked_parse(self):
         assert not violations, (
             "The following JS files call marked.parse() directly (issue #295). "
             "All markdown rendering must go through renderMarkdown() in "
-            f"shared/markdown.js:\n  " + "\n  ".join(violations)
+            "shared/markdown.js:\n  " + "\n  ".join(violations)
         )
 
     def test_no_raw_marked_parse_to_inner_html(self):