Fix XSS vulnerabilities via unsanitized innerHTML (36 usages)

[sgardoll]

Summary

There are 36 innerHTML assignments across app.js and index.html. Several accept data from external sources (API responses, AI-generated content, error messages) without sanitization, creating XSS attack vectors.

Risk Assessment

• Risk Level: Critical
• Likelihood: High — user-facing inputs and API response data flow into innerHTML
• Impact: High — combined with encryption key in sessionStorage, XSS can extract all stored API keys
• Timeline: Exploitable now

Affected Code Paths

1. Error message injection (app.js line 3844-3852)

let errorMessage = error.message;
output.innerHTML = `<div class="bg-red-50 ...">
  <p class="text-sm text-red-700">${errorMessage}</p>
</div>`;

errorMessage originates from error.message which can contain API response text.

2. AI-generated markdown rendering (lines 3270-3375)

renderMarkdownAudit() converts AI model responses into HTML via string interpolation. If the AI model returns content containing <script>, <img onerror=...>, or event handler attributes, they execute.

Key lines:

• Line 3316: <span>${title}</span> — H1/H2 headers from markdown
• Line 3339: <span>${processInlineFormatting(item)}</span> — list items
• Line 3360: <p>${processInlineFormatting(line)}</p> — paragraphs

3. escapeHtml() exists (line 4103) but is only used in one place

Remediation

Short term

1. Apply escapeHtml() to all external data before innerHTML insertion
2. In renderMarkdownAudit(), sanitize each line before interpolating

Long term

1. Add DOMPurify via CDN
2. Replace innerHTML with safe DOM manipulation where possible
3. Use a battle-tested markdown library (marked.js + DOMPurify) instead of custom regex

Impact Chain

Combined with encryption key in sessionStorage, XSS allows full API key exfiltration (FlutterFlow, Gemini, Claude, OpenAI, OpenRouter).