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
@@ -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 ─────────────────────────────────────────────────────────