fix(security): CSS injection guard, timeout clamping, session validation, tests (#806)

Community PR #806 by @mr-k-man (security audit round 2, new parts only).

- CSS value validation (DANGEROUS_CSS) in cdp-inspector, write-commands, extension inspector
- Queue file permissions (0o700/0o600) in cli, server, sidebar-agent
- escapeRegExp for frame --url ReDoS fix
- Responsive screenshot path validation with validateOutputPath
- State load cookie filtering (reject localhost/.internal/metadata cookies)
- Session ID format validation in loadSession
- /health endpoint: remove currentUrl and currentMessage fields
- QueueEntry interface + isValidQueueEntry validator for sidebar-agent
- SIGTERM->SIGKILL escalation in timeout handler
- Viewport dimension clamping (1-16384), wait timeout clamping (1s-300s)
- Cookie domain validation in cookie-import and cookie-import-browser
- DocumentFragment-based tab switching (XSS fix in sidepanel)
- pollInProgress reentrancy guard for pollChat
- toggleClass/injectCSS input validation in extension inspector
- Snapshot annotated path validation with realpathSync
- 714-line security-audit-r2.test.ts + 33-line learnings-injection.test.ts

Co-Authored-By: mr-k-man <mr-k-man@users.noreply.github.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

extension/inspector.js

@@ -355,6 +355,10 @@
   function applyStyle(selector, property, value) {
     // Validate property name: alphanumeric + hyphens only
     if (!/^[a-zA-Z-]+$/.test(property)) return { error: 'Invalid property name' };
+    // Validate CSS value: block exfiltration vectors (url(), expression(), @import, javascript:, data:)
+    if (/url\s*\(|expression\s*\(|@import|javascript:|data:/i.test(value)) {
+      return { error: 'CSS value contains blocked pattern' };
+    }
 
     const el = findElement(selector);
     if (!el) return { error: 'Element not found' };
@@ -373,6 +377,9 @@
   }
 
   function toggleClass(selector, className, action) {
+    if (!/^[a-zA-Z0-9_-]+$/.test(className)) {
+      return { error: 'Invalid class name' };
+    }
     const el = findElement(selector);
     if (!el) return { error: 'Element not found' };
 
@@ -387,6 +394,12 @@
   }
 
   function injectCSS(id, css) {
+    if (!/^[a-zA-Z0-9_-]+$/.test(id)) {
+      return { error: 'Invalid CSS injection id' };
+    }
+    if (/url\s*\(|expression\s*\(|@import|javascript:|data:/i.test(css)) {
+      return { error: 'CSS contains blocked pattern (url, expression, @import)' };
+    }
     const styleId = `gstack-inject-${id}`;
     let styleEl = document.getElementById(styleId);
     if (!styleEl) {

extension/sidepanel.js

@@ -20,7 +20,8 @@ let connState = 'disconnected'; // disconnected | connected | reconnecting | dea
 let lastOptimisticMsg = null; // track optimistically rendered user msg to avoid dupes
 let sidebarActiveTabId = null; // which browser tab's chat we're showing
 const chatLineCountByTab = {}; // tabId -> last seen chatLineCount
-const chatDomByTab = {}; // tabId -> saved innerHTML
+const chatDomByTab = {}; // tabId -> saved DocumentFragment (never serialized HTML)
+let pollInProgress = false; // reentrancy guard — prevents concurrent/recursive pollChat calls
 let reconnectAttempts = 0;
 let reconnectTimer = null;
 const MAX_RECONNECT_ATTEMPTS = 30; // 30 * 2s = 60s before showing "dead"
@@ -390,7 +391,9 @@ document.getElementById('stop-agent-btn').addEventListener('click', stopAgent);
 let initialLoadDone = false;
 
 async function pollChat() {
-  if (!serverUrl || !serverToken) return;
+  if (pollInProgress) return;
+  pollInProgress = true;
+  if (!serverUrl || !serverToken) { pollInProgress = false; return; }
   try {
     // Request chat for the currently displayed tab
     const tabParam = sidebarActiveTabId !== null ? `&tabId=${sidebarActiveTabId}` : '';
@@ -449,6 +452,8 @@ async function pollChat() {
     updateStopButton(data.agentStatus === 'processing');
   } catch (err) {
     console.error('[gstack sidebar] Chat poll error:', err.message);
+  } finally {
+    pollInProgress = false;
   }
 }
 
@@ -458,7 +463,11 @@ function switchChatTab(newTabId) {
 
   // Save current tab's chat DOM + scroll position
   if (sidebarActiveTabId !== null) {
-    chatDomByTab[sidebarActiveTabId] = chatMessages.innerHTML;
+    const frag = document.createDocumentFragment();
+    while (chatMessages.firstChild) {
+      frag.appendChild(chatMessages.firstChild);
+    }
+    chatDomByTab[sidebarActiveTabId] = frag;
     chatLineCountByTab[sidebarActiveTabId] = chatLineCount;
   }
 
@@ -468,7 +477,8 @@ function switchChatTab(newTabId) {
   // mid-message (the server may have switched tabs because the user's
   // Chrome tab changed, but we still want to show the optimistic UI).
   if (chatDomByTab[newTabId]) {
-    chatMessages.innerHTML = chatDomByTab[newTabId];
+    while (chatMessages.firstChild) chatMessages.removeChild(chatMessages.firstChild);
+    chatMessages.appendChild(chatDomByTab[newTabId]);
     chatLineCount = chatLineCountByTab[newTabId] || 0;
     // Reset agent state for restored tab
     agentContainer = null;
@@ -480,12 +490,22 @@ function switchChatTab(newTabId) {
     chatLineCount = 0;
     // agentContainer/agentTextEl are already set from sendMessage()
   } else {
-    chatMessages.innerHTML = `
-      <div class="chat-welcome" id="chat-welcome">
-        <div class="chat-welcome-icon">G</div>
-        <p>Send a message about this page.</p>
-        <p class="muted">Each tab has its own conversation.</p>
-      </div>`;
+    while (chatMessages.firstChild) chatMessages.removeChild(chatMessages.firstChild);
+    const welcomeDiv = document.createElement('div');
+    welcomeDiv.className = 'chat-welcome';
+    welcomeDiv.id = 'chat-welcome';
+    const iconDiv = document.createElement('div');
+    iconDiv.className = 'chat-welcome-icon';
+    iconDiv.textContent = 'G';
+    welcomeDiv.appendChild(iconDiv);
+    const p1 = document.createElement('p');
+    p1.textContent = 'Send a message about this page.';
+    welcomeDiv.appendChild(p1);
+    const p2 = document.createElement('p');
+    p2.className = 'muted';
+    p2.textContent = 'Each tab has its own conversation.';
+    welcomeDiv.appendChild(p2);
+    chatMessages.appendChild(welcomeDiv);
     chatLineCount = 0;
     // Reset agent state for fresh tab
     agentContainer = null;
@@ -494,7 +514,7 @@ function switchChatTab(newTabId) {
   }
 
   // Immediately poll the new tab's chat
-  pollChat();
+  setTimeout(pollChat, 0);
 }
 
 function updateStopButton(agentRunning) {