🔒️ Render cloud logs via DOM instead of HTML strings

Author: savannahostrowski

src/cloud/commands/logs.ts

@@ -36,17 +36,6 @@ const FILTER_CHIPS = [
   { level: "critical", label: "CRITICAL" },
 ]
 
-const HTML_ESCAPE: Record<string, string> = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-}
-
-function escapeHtml(text: string): string {
-  return text.replace(/[&<>"]/g, (ch) => HTML_ESCAPE[ch])
-}
-
 function formatTimestamp(ts: string): string {
   const d = new Date(ts)
   return Number.isNaN(d.getTime()) ? ts : `${d.toISOString().slice(0, 23)}Z`
@@ -71,14 +60,20 @@ function normalizeLevel(level: string, message?: string): string {
   return resolved
 }
 
-export function formatLogEntry(entry: AppLogEntry): string {
+export interface FormattedLogEntry {
+  level: string
+  timestamp: string
+  message: string
+}
+
+export function formatLogEntry(entry: AppLogEntry): FormattedLogEntry {
   const rawLevel = (entry.level ?? "info").toLowerCase()
   const level = normalizeLevel(rawLevel, entry.message)
-  const pipeColor = LEVEL_COLORS[level] ?? LEVEL_COLORS.default
-  const ts = escapeHtml(formatTimestamp(entry.timestamp))
-  const msg = escapeHtml(entry.message)
-  const escapedLevel = escapeHtml(level)
-  return `<div class="log-line" data-level="${escapedLevel}"><span class="pipe" style="color:${pipeColor}">┃</span> <span class="ts">${ts}</span> ${msg}</div>`
+  return {
+    level,
+    timestamp: formatTimestamp(entry.timestamp),
+    message: entry.message,
+  }
 }
 
 // --- Webview HTML ---
@@ -290,7 +285,7 @@ export class LogsViewProvider implements vscode.WebviewViewProvider {
         count++
         this.view.webview.postMessage({
           type: "log",
-          html: formatLogEntry(entry),
+          entry: formatLogEntry(entry),
         })
       }
       clearTimeout(connectedTimer)

src/cloud/ui/panel/styles.css

@@ -248,6 +248,30 @@ body {
   display: none;
 }
 
+.pipe {
+  color: #888;
+}
+
+.log-line[data-level="debug"] .pipe {
+  color: #4488ff;
+}
+
+.log-line[data-level="info"] .pipe {
+  color: #00cccc;
+}
+
+.log-line[data-level="warning"] .pipe {
+  color: #ccaa00;
+}
+
+.log-line[data-level="error"] .pipe {
+  color: #f14c4c;
+}
+
+.log-line[data-level="critical"] .pipe {
+  color: #cc66cc;
+}
+
 .ts {
   opacity: 0.5;
 }

src/cloud/ui/panel/webview.ts

@@ -129,6 +129,28 @@ function setStreamingState(streaming: boolean, appLabel?: string): void {
     streaming && appLabel ? `Streaming logs for ${appLabel}...` : ""
 }
 
+interface LogEntry {
+  level: string
+  timestamp: string
+  message: string
+}
+
+// Build the log line as a DOM node. The untrusted message is set as a text
+// node, so it is never parsed as HTML — no sanitization needed.
+function buildLogLine(entry: LogEntry): HTMLElement {
+  const line = document.createElement("div")
+  line.className = "log-line"
+  line.dataset.level = entry.level
+  const pipe = document.createElement("span")
+  pipe.className = "pipe"
+  pipe.textContent = "┃"
+  const ts = document.createElement("span")
+  ts.className = "ts"
+  ts.textContent = entry.timestamp
+  line.append(pipe, " ", ts, " ", entry.message)
+  return line
+}
+
 window.addEventListener("message", (event) => {
   const msg = event.data
   if (msg.type === "log") {
@@ -137,13 +159,12 @@ window.addEventListener("message", (event) => {
       firstEntry = false
     }
     const wasAtBottom = isNearBottom()
-    logs.insertAdjacentHTML("beforeend", msg.html)
-    const last = logs.lastElementChild as HTMLElement | null
+    const line = buildLogLine(msg.entry)
+    logs.append(line)
     if (
-      last &&
-      !shouldShow(last, getSelectedLevels(), searchInput.value.toLowerCase())
+      !shouldShow(line, getSelectedLevels(), searchInput.value.toLowerCase())
     ) {
-      last.classList.add("filtered")
+      line.classList.add("filtered")
     }
     if (wasAtBottom) window.scrollTo(0, document.body.scrollHeight)
   } else if (msg.type === "status") {

src/test/cloud/commands/logs.test.ts

@@ -136,8 +136,10 @@ suite("cloud/commands/logs", () => {
 
       const logMessages = messages.filter((m) => m.type === "log")
       assert.strictEqual(logMessages.length, 2)
-      assert.ok(logMessages[0].html.includes("line 1"))
-      assert.ok(logMessages[1].html.includes("line 2"))
+      assert.strictEqual(logMessages[0].entry.message, "line 1")
+      assert.strictEqual(logMessages[0].entry.level, "info")
+      assert.strictEqual(logMessages[1].entry.message, "line 2")
+      assert.strictEqual(logMessages[1].entry.level, "error")
 
       const statusMessages = messages.filter((m) => m.type === "status")
       assert.ok(statusMessages.some((m) => m.text === "Stream ended."))
@@ -446,104 +448,87 @@ suite("cloud/commands/logs", () => {
   })
 
   suite("formatLogEntry", () => {
-    test("formats a log entry with level, timestamp, and message", () => {
-      const html = formatLogEntry({
+    test("returns level, timestamp, and message fields", () => {
+      const entry = formatLogEntry({
         timestamp: "2025-01-15T10:30:00Z",
         message: "Server started",
         level: "info",
       })
-      assert.ok(html.startsWith('<div class="log-line"'))
-      assert.ok(html.includes('data-level="info"'))
-      assert.ok(html.includes("color:#00cccc"))
-      assert.ok(html.includes("Server started"))
-      assert.ok(html.includes("2025-01-15T10:30:00.000Z"))
-      assert.ok(html.includes('<span class="ts">'))
-      assert.ok(html.includes("┃"))
+      assert.equal(entry.level, "info")
+      assert.equal(entry.message, "Server started")
+      assert.equal(entry.timestamp, "2025-01-15T10:30:00.000Z")
     })
 
     test("normalizes warn to warning", () => {
-      const html = formatLogEntry({
+      const entry = formatLogEntry({
         timestamp: "2025-01-15T10:30:00Z",
         message: "msg",
         level: "warn",
       })
-      assert.ok(html.includes('data-level="warning"'))
+      assert.equal(entry.level, "warning")
     })
 
     test("normalizes fatal to critical", () => {
-      const html = formatLogEntry({
+      const entry = formatLogEntry({
         timestamp: "2025-01-15T10:30:00Z",
         message: "msg",
         level: "fatal",
       })
-      assert.ok(html.includes('data-level="critical"'))
+      assert.equal(entry.level, "critical")
     })
 
     test("infers level from message prefix when level is unknown", () => {
-      const html = formatLogEntry({
+      const entry = formatLogEntry({
         timestamp: "2025-01-15T10:30:00Z",
         message: '      INFO   50.35.91.231:0 - "GET / HTTP/1.1" 200',
         level: "unknown",
       })
-      assert.ok(html.includes('data-level="info"'))
-      assert.ok(html.includes("color:#00cccc"))
+      assert.equal(entry.level, "info")
     })
 
     test("defaults to info when level is missing", () => {
-      const html = formatLogEntry({
+      const entry = formatLogEntry({
         timestamp: "2025-01-15T10:30:00Z",
         message: "no level",
         level: undefined as any,
       })
-      assert.ok(html.includes('data-level="info"'))
+      assert.equal(entry.level, "info")
     })
 
-    test("uses default color for unknown level", () => {
-      const html = formatLogEntry({
+    test("preserves unrecognized level verbatim", () => {
+      const entry = formatLogEntry({
         timestamp: "2025-01-15T10:30:00Z",
         message: "msg",
         level: "trace",
       })
-      assert.ok(html.includes('data-level="trace"'))
-      assert.ok(html.includes("color:#888"))
+      assert.equal(entry.level, "trace")
     })
 
     test("lowercases level", () => {
-      const html = formatLogEntry({
+      const entry = formatLogEntry({
         timestamp: "2025-01-15T10:30:00Z",
         message: "msg",
         level: "ERROR",
       })
-      assert.ok(html.includes('data-level="error"'))
+      assert.equal(entry.level, "error")
     })
 
-    test("escapes HTML in message", () => {
-      const html = formatLogEntry({
+    test("passes message through unescaped (webview sets it as text)", () => {
+      const entry = formatLogEntry({
         timestamp: "2025-01-15T10:30:00Z",
         message: "<script>alert('xss')</script>",
         level: "info",
       })
-      assert.ok(html.includes("&lt;script&gt;"))
-      assert.ok(!html.includes("<script>alert"))
-    })
-
-    test("escapes quotes in level for attribute safety", () => {
-      const html = formatLogEntry({
-        timestamp: "2025-01-15T10:30:00Z",
-        message: "msg",
-        level: '"onclick="alert(1)',
-      })
-      assert.ok(!html.includes('data-level=""onclick'))
-      assert.ok(html.includes("&quot;"))
+      assert.equal(entry.message, "<script>alert('xss')</script>")
     })
 
     test("handles invalid timestamp gracefully", () => {
-      const html = formatLogEntry({
+      const entry = formatLogEntry({
         timestamp: "not-a-date",
         message: "msg",
         level: "info",
       })
-      assert.ok(html.includes("not-a-date"))
+      assert.equal(entry.timestamp, "not-a-date")
     })
   })