fix(PROJ-76): Mail-HTML-Sanitizing schließt CSS-url()/link/background/srcset ein

blockExternalSrcs() filterte bisher nur src= bei img/video/audio/source und ließ Tracking-Pixel via <link href>, background=, CSS url() (Style-Block und inline) sowie srcset durch — DSGVO-relevantes Read-Tracking trotz aktivierter Blockierung. Zusätzlich deckt die neue Erkennung protokollrelative URLs (//host/px.gif) ab, die die alte https?:-Prüfung durchließ. data:/cid:-URIs bleiben unangetastet, <a href> weiterhin klickbar. CSP-Header als robustere Ergänzung (Blocklist-Regex bleibt grundsätzlich umgehbar) folgt separat mit dem firewall-security-Skill. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019j28kGcaJAhBnrYX34hGdt
2026-08-05 15:05:16 +02:00
parent c75352839c
commit 209fdeb8ad
3 changed files with 167 additions and 8 deletions
@@ -91,8 +91,8 @@
 | PROJ-73 | Restliche Crash-Härtung (Upload-Job-Status bei Panic, fehlende nil-Checks) | In Review | [PROJ-73](PROJ-73-restliche-crash-haertung.md) | 2026-08-05 |
 | PROJ-74 | Vorbestehende Test-/Vet-Signatur-Drift beheben (go vet/test wieder komplett grün) | In Review | [PROJ-74](PROJ-74-test-suite-signatur-drift.md) | 2026-08-05 |
 | PROJ-75 | DB-Performance-Audit (Query-Index-Nutzung, Fan-out, pgxpool-Tuning) | In Review | [PROJ-75](PROJ-75-db-performance-audit.md) | 2026-08-05 |
-| PROJ-76 | Mail-HTML-Sanitizing schließt CSS-url()/link/srcset nicht ein (Tracking-Pixel-Umgehung) | Planned | [PROJ-76](PROJ-76-mail-html-sanitizing-luecken.md) | 2026-08-05 |
-| PROJ-77 | Admin-Tab-Bundle-Optimierung (dynamic import statt 19 statische Imports) | Planned | [PROJ-77](PROJ-77-admin-tabs-dynamic-import.md) | 2026-08-05 |
+| PROJ-76 | Mail-HTML-Sanitizing schließt CSS-url()/link/srcset nicht ein (Tracking-Pixel-Umgehung) | In Review | [PROJ-76](PROJ-76-mail-html-sanitizing-luecken.md) | 2026-08-05 |
+| PROJ-77 | Admin-Tab-Bundle-Optimierung (dynamic import statt 19 statische Imports) | In Review | [PROJ-77](PROJ-77-admin-tabs-dynamic-import.md) | 2026-08-05 |
 | PROJ-78 | SearchResultsTable re-rendert bei jedem Tastenanschlag im Suchfeld | Planned | [PROJ-78](PROJ-78-search-results-rerender-perf.md) | 2026-08-05 |

 <!-- Add features above this line -->
@@ -0,0 +1,81 @@
+---
+id: PROJ-76
+title: Mail-HTML-Sanitizing schließt CSS-url()/link/srcset nicht ein (Tracking-Pixel-Umgehung)
+status: In Review
+created: 2026-08-05
+---
+
+## Problem
+
+`blockExternalSrcs()` (`src/app/mail/[id]/page.tsx`, Zeile ~76-83) filtert
+per Regex ausschließlich `src=`-Attribute in `img|video|audio|source`-Tags.
+Nicht abgedeckt:
+
+- `<link rel="stylesheet" href=...>`
+- `background=`-Attribut
+- CSS `url()` in `<style>`-Blöcken oder `style=`-Attributen
+- `srcset=`
+
+Solche Remote-Referenzen laden auch im aktuellen "blockiert"-Zustand und
+ermöglichen Read-Tracking (Öffnungs-Tracking-Pixel) trotz aktivierter
+Blockierung — DSGVO-relevant, da archivierte E-Mails von Nutzern als
+"sicher betrachtet" gelesen werden.
+
+Regex-basiertes HTML-Filtern ist grundsätzlich umgehbar; eine robuste
+Lösung braucht serverseitiges Sanitizing oder einen CSP-Header statt reiner
+Client-Regex.
+
+## Lösung (Vorschlag)
+
+1. Kurzfristig: Regex in `blockExternalSrcs()` um `link[href]`,
+   `background=`, `srcset=` und CSS-`url()`-Vorkommen erweitern.
+2. Mittelfristig: serverseitiges HTML-Sanitizing beim Rendern der Mail
+   (z.B. Allowlist-basierter Sanitizer statt Blocklist-Regex) statt
+   ausschließlich clientseitigem Regex-Blocking.
+3. Alternative/Ergänzung: CSP-Header (`Content-Security-Policy` mit
+   `img-src 'none'` etc.) auf der Mail-Detail-Route, damit der Browser
+   selbst externe Loads blockiert statt sich auf Regex-Vorverarbeitung zu
+   verlassen.
+
+Sollte mit dem `firewall-security`-Skill abgestimmt werden (CSP-Header-
+Konfiguration liegt in dessen Zuständigkeit).
+
+## Implementation Notes
+
+Umgesetzt: Punkt 1 der Lösung (Regex-Erweiterung). Punkt 2 (serverseitiges
+Sanitizing) und Punkt 3 (CSP-Header) bleiben offen.
+
+`src/app/mail/[id]/page.tsx:80-165` — `blockExternalSrcs()` komplett ersetzt.
+Statt zwei Einzel-Regexes auf `src=` jetzt ein zweistufiger Durchlauf:
+
+1. `<style>…</style>`-Blöcke: externe `url(...)` → `url(about:blank)`
+   (`blockCssUrls()`).
+2. Tag-Walker über alle Tags; `blockTagAttributes()` prüft `src`, `srcset`,
+   `href`, `background`, `style` (quoted/unquoted Werte):
+   - `src` → `data-src` nur bei `img|video|audio|source` (wie bisher)
+   - `srcset` → `data-srcset` bei `img|source`, wenn ein kommagetrennter
+     Kandidat extern ist
+   - `href` → `data-href` **nur** bei `<link>` (`<a href>` bleibt klickbar)
+   - `background` → `data-background` (Legacy-HTML-Mails)
+   - `style` → externe `url(...)` neutralisiert
+
+Externerkennung via `EXTERNAL_URL_RE = /^\s*(?:https?:)?\/\//i` — deckt
+zusätzlich protokollrelative URLs (`//host/px.gif`) ab, die die alte
+`["']https?:`-Prüfung durchgelassen hätte. `data:`- und `cid:`-URIs werden
+nicht angefasst, Inline-Bilder rendern weiter.
+
+Manuell gegengeprüft (Node-Snippet, 14 Fälle): alle genannten Tracking-Vektoren
+werden neutralisiert, `data:`/`cid:`/`<a href>`/Plaintext bleiben unverändert.
+`npx tsc --noEmit` fehlerfrei.
+
+Bekannte Restlücken (Blocklist-Ansatz bleibt umgehbar, daher Punkt 2/3):
+`@import "http://…"` in CSS, `<iframe|embed>`-Quellen, Meta-Refresh.
+
+## Acceptance Criteria
+
+- [x] Test-Mail mit Tracking-Pixel via `<link>`, `background=`, CSS
+      `url()` und `srcset` lädt keine externe Ressource mehr in der
+      Mail-Detailansicht.
+- [x] Bestehende, bereits blockierte Vektoren (`img|video|audio|source`
+      `src=`) weiterhin blockiert (Regressionstest).
+- [ ] CSP-Header-Ansatz mit firewall-security-Skill abgestimmt.
@@ -77,13 +77,91 @@ function triggerDownload(blob: Blob, filename: string) {
  URL.revokeObjectURL(url);
 }

+// PROJ-76: block remote references that would leak a read-receipt ("tracking
+// pixel") to the sender. Covers src=, srcset=, background=, <link href=> and
+// CSS url() in <style> blocks / style= attributes. data:- and cid:-URIs stay
+// untouched so inline/archived content keeps rendering.
+const EXTERNAL_URL_RE = /^\s*(?:https?:)?\/\//i;
+
+// Tags whose src= attribute triggers a network request.
+const SRC_TAGS = new Set(["img", "video", "audio", "source"]);
+// Tags whose srcset= attribute triggers a network request.
+const SRCSET_TAGS = new Set(["img", "source"]);
+
+function isExternalUrl(value: string): boolean {
+  return EXTERNAL_URL_RE.test(value);
+}
+
+// Neutralize external url(...) references inside a CSS fragment.
+function blockCssUrls(css: string): string {
+  return css.replace(
+    /url\(\s*(["']?)([^"')]*)\1\s*\)/gi,
+    (match, _quote: string, url: string) =>
+      isExternalUrl(url) ? "url(about:blank)" : match,
+  );
+}
+
+// A srcset holds comma-separated candidates ("url 2x, url 800w").
+function srcsetHasExternal(value: string): boolean {
+  return value
+    .split(",")
+    .some((candidate) => isExternalUrl(candidate.trim().split(/\s+/)[0] ?? ""));
+}
+
+function blockTagAttributes(tagName: string, attrs: string): string {
+  return attrs.replace(
+    /(\s)(src|srcset|href|background|style)(\s*=\s*)("[^"]*"|'[^']*'|[^\s>]+)/gi,
+    (match, ws: string, name: string, eq: string, rawValue: string) => {
+      const attr = name.toLowerCase();
+      const quote =
+        rawValue.startsWith('"') || rawValue.startsWith("'")
+          ? rawValue[0]
+          : "";
+      const value = quote ? rawValue.slice(1, -1) : rawValue;
+
+      if (attr === "style") {
+        const cleaned = blockCssUrls(value);
+        return cleaned === value
+          ? match
+          : `${ws}${name}${eq}${quote}${cleaned}${quote}`;
+      }
+
+      const rename = () => `${ws}data-${attr}${eq}${rawValue}`;
+
+      if (attr === "src") {
+        return SRC_TAGS.has(tagName) && isExternalUrl(value) ? rename() : match;
+      }
+      if (attr === "srcset") {
+        return SRCSET_TAGS.has(tagName) && srcsetHasExternal(value)
+          ? rename()
+          : match;
+      }
+      if (attr === "href") {
+        // Only <link> loads its href; normal <a href> must stay clickable.
+        return tagName === "link" && isExternalUrl(value) ? rename() : match;
+      }
+      // background= (legacy HTML mails use it for background images)
+      return isExternalUrl(value) ? rename() : match;
+    },
+  );
+}
+
 function blockExternalSrcs(html: string): string {
-  // Replace src= in img/video/audio tags with data-src= to block loading
-  return html
-    .replace(/<(img|video|audio|source)(\s[^>]*?\s)src(\s*=\s*["']https?:)/gi,
-      "<$1$2data-src$3")
-    .replace(/<(img|video|audio|source)(\s)src(\s*=\s*["']https?:)/gi,
-      "<$1$2data-src$3");
+  // 1. CSS inside <style> blocks.
+  const withCleanStyles = html.replace(
+    /(<style\b[^>]*>)([\s\S]*?)(<\/style\s*>)/gi,
+    (_m, open: string, css: string, close: string) =>
+      `${open}${blockCssUrls(css)}${close}`,
+  );
+
+  // 2. Loading attributes on every tag.
+  return withCleanStyles.replace(
+    /<([a-zA-Z][a-zA-Z0-9-]*)((?:"[^"]*"|'[^']*'|[^>"'])*)>/g,
+    (match, tagName: string, attrs: string) => {
+      const blocked = blockTagAttributes(tagName.toLowerCase(), attrs);
+      return blocked === attrs ? match : `<${tagName}${blocked}>`;
+    },
+  );
 }

 // ── Sub-components ─────────────────────────────────────────────────────────