From 5aca0038b6a239bc1ac9efdb4c0962738afe9e08 Mon Sep 17 00:00:00 2001
From: Rene Luria <rene.luria@infomaniak.com>
Date: Wed, 8 Jul 2026 14:11:26 +0200
Subject: [PATCH] chore: missing doc

---
 .../plans/2026-07-08-xss-sink-csp.md          | 262 ++++++++++++++++++
 1 file changed, 262 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-07-08-xss-sink-csp.md

diff --git a/docs/superpowers/plans/2026-07-08-xss-sink-csp.md b/docs/superpowers/plans/2026-07-08-xss-sink-csp.md
new file mode 100644
index 0000000..9012a02
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-08-xss-sink-csp.md
@@ -0,0 +1,262 @@
+# XSS Sink Remediation + CSP Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Eliminate the `innerHTML` XSS sink in `utils.showAlert` and add a nonce-based Content-Security-Policy header to the frontend route.
+
+**Architecture:** Frontend `showAlert` is rewritten to build alert DOM via `document.createElement` / `textContent` (no `innerHTML`). Backend `read_root()` generates a per-request nonce, injects it into the inline `<script>` tag, and sets a strict CSP header on the HTML response.
+
+**Tech Stack:** FastAPI (Python 3.14), vanilla JS frontend, pytest + fastapi.testclient.TestClient.
+
+**Spec:** `docs/superpowers/specs/2026-07-08-xss-sink-csp-design.md`
+
+## Global Constraints
+
+- Run all commands from repo root (relative path `templates/index.html` in `main.py:329`).
+- Python 3.14 (`.python-version`, Dockerfile `python:3.14-alpine`).
+- No lint/typecheck/formatter/CI — pytest is the only verification step.
+- Test command: `python -m pytest tests/ --cov=. --cov-config=.coveragerc -v` (or `./run_tests.sh`).
+- `@lru_cache` OIDC helpers (`main.py:68-129`) — call `func.cache_clear()` when patching `requests`. Not relevant to this plan but good to know.
+- `CLIENT_ID` has no default (`main.py:28`) — the test env sets it via `run_tests.sh`; the CSP test does not depend on it.
+
+---
+
+### Task 1: Add CSP header + nonce injection to `read_root()`
+
+**Files:**
+- Modify: `main.py:1-10` (add `import secrets`)
+- Modify: `main.py:326-331` (`read_root` function)
+- Test: `tests/test_main.py` (add new test)
+
+**Interfaces:**
+- Consumes: none
+- Produces: `GET /` now returns a `Content-Security-Policy` response header containing a fresh per-request nonce, and the HTML body's inline `<script>` tag carries a matching `nonce="..."` attribute.
+
+- [ ] **Step 1: Write the failing test**
+
+Add this test to `tests/test_main.py` (after `test_get_client_config`, around line 33):
+
+```python
+def test_root_serves_csp_with_nonce():
+    """Test that GET / returns a CSP header with a nonce and the inline script carries it."""
+    response = client.get("/")
+    assert response.status_code == 200
+    csp = response.headers.get("content-security-policy", "")
+    assert "nonce-" in csp
+    assert "script-src" in csp
+    assert "cdn.jsdelivr.net" in csp
+    assert "connect-src" in csp
+    assert "login.infomaniak.com" in csp
+    assert "api.coingecko.com" in csp
+    assert "object-src 'none'" in csp
+    body = response.text
+    assert "<script nonce=" in body
+    import re
+    match = re.search(r"nonce-([A-Za-z0-9_-]+)", csp)
+    assert match is not None
+    nonce = match.group(1)
+    assert f'nonce="{nonce}"' in body
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `python -m pytest tests/test_main.py::test_root_serves_csp_with_nonce -v`
+Expected: FAIL — `assert "nonce-" in csp` fails because no CSP header is set yet (empty string).
+
+- [ ] **Step 3: Add `import secrets` to `main.py`**
+
+In `main.py`, add `import secrets` after `import os` (line 9), keeping it in the stdlib group:
+
+```python
+import os
+import secrets
+from functools import lru_cache
+```
+
+(Line 10's `from functools import lru_cache` stays where it is — just insert `import secrets` between lines 9 and 10.)
+
+- [ ] **Step 4: Rewrite `read_root()` with nonce injection + CSP header**
+
+Replace the body of `read_root()` at `main.py:326-331` with:
+
+```python
+@app.get("/", response_class=HTMLResponse)
+async def read_root():
+    """Serve the frontend HTML file"""
+    nonce = secrets.token_urlsafe(16)
+    with open("templates/index.html", "r") as file:
+        html_content = file.read()
+    html_content = html_content.replace(
+        '<script>', f'<script nonce="{nonce}">', 1
+    )
+    csp = (
+        "default-src 'self'; "
+        f"script-src 'self' 'nonce-{nonce}' https://cdn.jsdelivr.net; "
+        "style-src 'self' https://cdn.jsdelivr.net; "
+        "connect-src 'self' https://login.infomaniak.com https://api.coingecko.com; "
+        "img-src 'self'; "
+        "object-src 'none'; "
+        "base-uri 'self'; "
+        "frame-ancestors 'none'"
+    )
+    return HTMLResponse(
+        content=html_content,
+        status_code=200,
+        headers={"Content-Security-Policy": csp},
+    )
+```
+
+The `replace('<script>', ..., 1)` targets only the bare inline tag at `templates/index.html:62`. The Bootstrap tag at line 8 is `<script src=...>` (does not match the literal `<script>`) and is authorized by the `https://cdn.jsdelivr.net` entry in `script-src`.
+
+- [ ] **Step 5: Run test to verify it passes**
+
+Run: `python -m pytest tests/test_main.py::test_root_serves_csp_with_nonce -v`
+Expected: PASS
+
+- [ ] **Step 6: Run full suite to confirm no regressions**
+
+Run: `./run_tests.sh`
+Expected: All tests pass (including the new one). Coverage report builds in `htmlcov/`.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add main.py tests/test_main.py
+git commit -m "fix(security): add nonce-based CSP header to frontend route"
+```
+
+---
+
+### Task 2: Remove the `innerHTML` XSS sink in `showAlert`
+
+**Files:**
+- Modify: `templates/index.html:162-164` (`showAlert` method)
+- Modify: `templates/index.html:468` (caller — cached secret)
+- Modify: `templates/index.html:584` (caller — server secret phrase)
+- Modify: `templates/index.html:619-623` (caller — BTC price)
+
+**Interfaces:**
+- Consumes: none
+- Produces: `utils.showAlert(element, message, type)` now accepts either a plain `string` (rendered as `textContent`) or a structured `{title, body}` object (title rendered in `<strong>` as `textContent`, body rendered as text). The `innerHTML` sink is gone.
+
+**Note on testing:** This repo has no JavaScript test framework. This task is verified by (a) the Python test from Task 1 confirming the page still serves correctly, and (b) manual browser verification steps at the end. The CSP from Task 1 provides defense-in-depth: even if a future caller passes attacker-controlled data, inline script execution is blocked.
+
+- [ ] **Step 1: Rewrite `showAlert` to build DOM instead of using `innerHTML`**
+
+In `templates/index.html`, replace the `showAlert` method (lines 162-164):
+
+Current:
+```js
+                showAlert(element, message, type = 'info') {
+                    element.innerHTML = `<div class="alert alert-${type}" role="alert">${message}</div>`;
+                },
+```
+
+New:
+```js
+                showAlert(element, message, type = 'info') {
+                    element.replaceChildren();
+                    const alert = document.createElement('div');
+                    alert.className = `alert alert-${type}`;
+                    alert.setAttribute('role', 'alert');
+                    if (typeof message === 'string') {
+                        alert.textContent = message;
+                    } else if (message && typeof message === 'object') {
+                        if (message.title) {
+                            const strong = document.createElement('strong');
+                            strong.textContent = message.title;
+                            alert.appendChild(strong);
+                        }
+                        if (message.body) {
+                            if (message.title) {
+                                alert.appendChild(document.createTextNode(' '));
+                            }
+                            alert.appendChild(document.createTextNode(message.body));
+                        }
+                    }
+                    element.appendChild(alert);
+                },
+```
+
+- [ ] **Step 2: Update caller at line 468 (cached secret phrase)**
+
+Current (`templates/index.html:468`):
+```js
+                            utils.showAlert(elements.secretResult, `<strong>Secret Phrase:</strong> ${cachedSecret}`, 'success');
+```
+
+New:
+```js
+                            utils.showAlert(elements.secretResult, { title: 'Secret Phrase:', body: cachedSecret }, 'success');
+```
+
+- [ ] **Step 3: Update caller at line 584 (server secret phrase)**
+
+Current (`templates/index.html:584`):
+```js
+                                    utils.showAlert(elements.secretResult, `<strong>Secret Phrase:</strong> ${data.secret_phrase}`, 'success');
+```
+
+New:
+```js
+                                    utils.showAlert(elements.secretResult, { title: 'Secret Phrase:', body: data.secret_phrase }, 'success');
+```
+
+- [ ] **Step 4: Update caller at lines 619-623 (BTC price)**
+
+Current (`templates/index.html:619-623`):
+```js
+                            utils.showAlert(
+                                elements.btcPriceResult, 
+                                `<strong>1 Bitcoin (BTC) = CHF ${price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong>`, 
+                                'success'
+                            );
+```
+
+New:
+```js
+                            utils.showAlert(
+                                elements.btcPriceResult,
+                                { title: `1 Bitcoin (BTC) = CHF ${price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}` },
+                                'success'
+                            );
+```
+
+- [ ] **Step 5: Verify no `innerHTML` remains in `showAlert` or its callers**
+
+Run: `grep -n 'innerHTML' templates/index.html`
+Expected: no matches in the `showAlert` method or its callers. (If other unrelated `innerHTML` uses exist elsewhere in the file, they are out of scope for this task — leave them.)
+
+- [ ] **Step 6: Run full Python suite to confirm the page still serves**
+
+Run: `./run_tests.sh`
+Expected: All tests pass, including `test_root_serves_csp_with_nonce` from Task 1.
+
+- [ ] **Step 7: Manual browser verification**
+
+Start the dev server: `uvicorn main:app --host 0.0.0.0 --port 8000 --reload`
+
+Open `http://localhost:8000` and verify:
+- The page loads with no browser console errors about CSP violations.
+- The Bootstrap styling still renders (CSS from cdn.jsdelivr.net loads).
+- Click "Fetch Bitcoin Price" — the success alert shows **1 Bitcoin (BTC) = CHF ...** in bold.
+- (If you have OIDC credentials) Log in, click "Refresh" on the Secret Phrase card — the success alert shows **Secret Phrase:** in bold followed by the phrase text.
+- Trigger an error (e.g., click "Validate Token" with no token) — the error alert renders the message as plain text.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add templates/index.html
+git commit -m "fix(security): remove innerHTML XSS sink in showAlert"
+```
+
+---
+
+## Summary
+
+| Task | What | Verification |
+|------|------|--------------|
+| 1 | CSP header + nonce injection in `read_root()` | pytest (automated) |
+| 2 | `showAlert` DOM rewrite + 3 caller updates | grep + manual browser check |
+
+After both tasks, the finding is resolved: the `innerHTML` sink is structurally gone, and a strict nonce-based CSP blocks inline script execution as defense-in-depth.