From cef2248a4532070d18628150f13b13c4ac9a8ce5 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sat, 26 Sep 2026 17:42:49 +0200
Subject: [PATCH] fix(security): escape untrusted values in transactional email
 HTML
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Customer input (first name, address, product names), order data, admin
fields (company data, carrier, tracking number) and URLs were inserted
into email HTML unescaped. A first name such as <a href="…">…</a> ended
up as a working link in a genuine shop email, usable for phishing.

All variable values in email HTML now go through escapeHtml
(lib/escape-html.ts, shared with the withdrawal receipt). Button links
only accept http(s), so a javascript: tracking URL is dropped. The plain
text part stays unescaped. Tests cover order confirmation, shipment,
status mails, layout company data and back-in-stock mails.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/app/api/widerruf/route.ts   |  3 +-
 src/lib/email-templates.test.ts | 75 +++++++++++++++++++++++++++++++++
 src/lib/email-templates.ts      | 52 +++++++++++++----------
 src/lib/escape-html.ts          | 14 ++++++
 src/lib/withdrawal.test.ts      |  3 +-
 src/lib/withdrawal.ts           | 14 ++----
 6 files changed, 126 insertions(+), 35 deletions(-)
 create mode 100644 src/lib/email-templates.test.ts
 create mode 100644 src/lib/escape-html.ts

diff --git a/src/app/api/widerruf/route.ts b/src/app/api/widerruf/route.ts
index 9014111..d089bec 100644
--- a/src/app/api/widerruf/route.ts
+++ b/src/app/api/widerruf/route.ts
@@ -5,7 +5,8 @@ import { rateLimit, getClientIp } from "@/lib/rate-limit";
 import { isTrustedOrigin } from "@/lib/csrf";
 import { sendMail } from "@/lib/mail";
 import { withdrawalReceiptEmail } from "@/lib/email-templates";
-import { escapeHtml, formatReceivedAt, withdrawalDeclarationLines } from "@/lib/withdrawal";
+import { formatReceivedAt, withdrawalDeclarationLines } from "@/lib/withdrawal";
+import { escapeHtml } from "@/lib/escape-html";
 import { getLocale } from "@/i18n/locale";
 
 const WITHDRAWALS_PER_WINDOW = 10;
diff --git a/src/lib/email-templates.test.ts b/src/lib/email-templates.test.ts
new file mode 100644
index 0000000..8a78a02
--- /dev/null
+++ b/src/lib/email-templates.test.ts
@@ -0,0 +1,75 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/company-info", () => ({
+  getCompanyInfo: async () => ({
+    name: "WABENHAIN <b>",
+    address: { street: "Bühlweg 10", zip: "86450", city: "Altenmünster" },
+  }),
+}));
+vi.mock("@/lib/url", () => ({ getSiteUrl: () => "https://wabenhain.com" }));
+
+import {
+  backInStockEmail,
+  orderConfirmationEmail,
+  pickupReadyEmail,
+  returnAcceptedEmail,
+  shipmentEmail,
+} from "./email-templates";
+
+const EVIL = `<a href="https://phish.example">Hier klicken</a>`;
+const ESCAPED = "&lt;a href=&quot;https://phish.example&quot;&gt;Hier klicken&lt;/a&gt;";
+
+describe("email templates escape untrusted values", () => {
+  it("order confirmation escapes name, items, address and order number", async () => {
+    const mail = await orderConfirmationEmail({
+      locale: "de",
+      orderNumber: `WH-1"><img src=x>`,
+      firstName: EVIL,
+      fulfillmentMethod: "VERSAND",
+      items: [{ productName: EVIL, quantity: 1, weightGrams: 500, totalCents: 1200 }],
+      subtotalCents: 1200,
+      shippingCents: 0,
+      totalCents: 1200,
+      street: EVIL,
+      zip: "86450",
+      city: "<script>alert(1)</script>",
+    });
+    expect(mail.html).not.toContain("https://phish.example\">");
+    expect(mail.html).not.toContain("<script>");
+    expect(mail.html).not.toContain("<img src=x>");
+    expect(mail.html).toContain(ESCAPED);
+    // Der Text-Teil bleibt lesbar und unmaskiert.
+    expect(mail.text).toContain(EVIL);
+  });
+
+  it("shipment mail escapes carrier and tracking number and rejects non-http tracking links", async () => {
+    const mail = await shipmentEmail({
+      locale: "de",
+      orderNumber: "WH-1",
+      firstName: "Erika",
+      carrier: EVIL,
+      trackingNumber: "<b>123</b>",
+      trackingUrl: "javascript:alert(1)",
+    });
+    expect(mail.html).toContain(ESCAPED);
+    expect(mail.html).toContain("&lt;b&gt;123&lt;/b&gt;");
+    expect(mail.html).not.toContain("javascript:");
+  });
+
+  it("status mails escape the first name and order number", async () => {
+    const mail = await returnAcceptedEmail({ locale: "en", orderNumber: "<i>1</i>", firstName: EVIL });
+    expect(mail.html).toContain(ESCAPED);
+    expect(mail.html).toContain("&lt;i&gt;1&lt;/i&gt;");
+  });
+
+  it("escapes admin-maintained company data in the layout", async () => {
+    const mail = await pickupReadyEmail({ locale: "de", orderNumber: "WH-1", firstName: "Erika" });
+    expect(mail.html).toContain("WABENHAIN &lt;b&gt;");
+  });
+
+  it("escapes product names in back-in-stock mails", async () => {
+    const mail = await backInStockEmail({ locale: "de", name: EVIL, slug: "honig" });
+    expect(mail.html).toContain(ESCAPED);
+    expect(mail.html).not.toContain("https://phish.example\">");
+  });
+});
diff --git a/src/lib/email-templates.ts b/src/lib/email-templates.ts
index fb7b5fd..f4c4dc7 100644
--- a/src/lib/email-templates.ts
+++ b/src/lib/email-templates.ts
@@ -2,6 +2,7 @@ import { formatPrice } from "@/lib/format";
 import { getSiteUrl } from "@/lib/url";
 import { getCompanyInfo } from "@/lib/company-info";
 import { getEmailStrings } from "@/lib/email-strings";
+import { escapeHtml } from "@/lib/escape-html";
 import { withdrawalReceiptEmailContent, type WithdrawalDeclarationInput } from "@/lib/withdrawal";
 import type { Locale } from "@/i18n/config";
 
@@ -16,13 +17,18 @@ interface EmailContent {
  * Inline-Styles und Tabellen-Layout statt Tailwind/externem CSS, da viele
  * E-Mail-Clients (Outlook, ältere Gmail-Ansichten) beides nicht zuverlaessig
  * unterstuetzen.
+ *
+ * Jeder variable Wert (Kundeneingaben, Bestelldaten, Admin-Felder) wird vor
+ * dem Einsetzen ins HTML mit escapeHtml maskiert — sonst liesse sich ueber
+ * z. B. den Vornamen HTML samt Phishing-Link in eine echte Shop-Mail
+ * einschleusen. Die Text-Variante bleibt unmaskiert (kein HTML).
  */
 async function emailLayout(locale: Locale, preheader: string, bodyHtml: string): Promise<string> {
   const company = await getCompanyInfo();
   return `<!doctype html>
 <html lang="${locale}">
   <body style="margin:0;padding:0;background-color:#FAF8F3;font-family:Arial,Helvetica,sans-serif;color:#242424;">
-    <span style="display:none;font-size:1px;color:#FAF8F3;line-height:1px;">${preheader}</span>
+    <span style="display:none;font-size:1px;color:#FAF8F3;line-height:1px;">${escapeHtml(preheader)}</span>
     <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#FAF8F3;padding:32px 16px;">
       <tr>
         <td align="center">
@@ -40,7 +46,7 @@ async function emailLayout(locale: Locale, preheader: string, bodyHtml: string):
             </tr>
             <tr>
               <td style="padding:20px 32px;background-color:#F4EFE5;font-size:12px;color:#666;">
-                ${company.name} · ${company.address.street}, ${company.address.zip} ${company.address.city}
+                ${escapeHtml(company.name)} · ${escapeHtml(company.address.street)}, ${escapeHtml(company.address.zip)} ${escapeHtml(company.address.city)}
               </td>
             </tr>
           </table>
@@ -51,8 +57,10 @@ async function emailLayout(locale: Locale, preheader: string, bodyHtml: string):
 </html>`;
 }
 
+/** Nur http(s)-Links — ein "javascript:"-Link aus einem Admin-Feld (Tracking) wird weggelassen. */
 function button(url: string, label: string): string {
-  return `<a href="${url}" style="display:inline-block;margin-top:16px;padding:12px 24px;background-color:#24352B;color:#F4EFE5;text-decoration:none;font-size:14px;letter-spacing:1px;">${label}</a>`;
+  if (!/^https?:\/\//i.test(url)) return "";
+  return `<a href="${escapeHtml(url)}" style="display:inline-block;margin-top:16px;padding:12px 24px;background-color:#24352B;color:#F4EFE5;text-decoration:none;font-size:14px;letter-spacing:1px;">${escapeHtml(label)}</a>`;
 }
 
 interface OrderConfirmationInput {
@@ -77,13 +85,13 @@ export async function orderConfirmationEmail(order: OrderConfirmationInput): Pro
   const rows = order.items
     .map(
       (item) =>
-        `<tr><td style="padding:6px 0;">${item.quantity} × ${item.productName} (${item.weightGrams} g)</td><td style="padding:6px 0;text-align:right;">${formatPrice(item.totalCents, "EUR", order.locale)}</td></tr>`
+        `<tr><td style="padding:6px 0;">${item.quantity} × ${escapeHtml(item.productName)} (${item.weightGrams} g)</td><td style="padding:6px 0;text-align:right;">${formatPrice(item.totalCents, "EUR", order.locale)}</td></tr>`
     )
     .join("");
 
   const deliveryHtml =
     order.fulfillmentMethod === "VERSAND"
-      ? `<p style="margin:4px 0;">${s.deliveryTo}<br>${order.street}<br>${order.zip} ${order.city}</p>`
+      ? `<p style="margin:4px 0;">${s.deliveryTo}<br>${escapeHtml(order.street)}<br>${escapeHtml(order.zip)} ${escapeHtml(order.city)}</p>`
       : `<p style="margin:4px 0;">${s.pickupNote}</p>`;
 
   const giftHtml = order.giftMessage
@@ -96,8 +104,8 @@ export async function orderConfirmationEmail(order: OrderConfirmationInput): Pro
     order.locale,
     s.preheader(order.orderNumber),
     `
-      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(order.firstName)}</h1>
-      <p style="margin:0 0 20px;line-height:1.5;">${s.intro(order.orderNumber)}</p>
+      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(escapeHtml(order.firstName))}</h1>
+      <p style="margin:0 0 20px;line-height:1.5;">${s.intro(escapeHtml(order.orderNumber))}</p>
       <table role="presentation" width="100%" style="font-size:14px;border-top:1px solid #eee;border-bottom:1px solid #eee;padding:8px 0;">
         ${rows}
       </table>
@@ -226,7 +234,7 @@ export async function shipmentEmail(order: ShipmentEmailInput): Promise<EmailCon
   const trackingHtml = hasTracking
     ? `
       <p style="margin:16px 0 0;line-height:1.5;">
-        ${order.carrier}: <strong>${order.trackingNumber}</strong>
+        ${escapeHtml(order.carrier ?? "")}: <strong>${escapeHtml(order.trackingNumber ?? "")}</strong>
       </p>
       ${order.trackingUrl ? button(order.trackingUrl, s.trackButton) : ""}
     `
@@ -235,8 +243,8 @@ export async function shipmentEmail(order: ShipmentEmailInput): Promise<EmailCon
     order.locale,
     s.preheader(order.orderNumber),
     `
-      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(order.firstName)}</h1>
-      <p style="margin:0 0 8px;line-height:1.5;">${s.intro(order.orderNumber)}</p>
+      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(escapeHtml(order.firstName))}</h1>
+      <p style="margin:0 0 8px;line-height:1.5;">${s.intro(escapeHtml(order.orderNumber))}</p>
       ${trackingHtml}
     `
   );
@@ -257,10 +265,10 @@ export async function pickupReadyEmail(order: OrderStatusUpdateInput): Promise<E
     order.locale,
     s.preheader(order.orderNumber),
     `
-      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(order.firstName)}</h1>
-      <p style="margin:0 0 8px;line-height:1.5;">${s.intro(order.orderNumber)}</p>
+      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(escapeHtml(order.firstName))}</h1>
+      <p style="margin:0 0 8px;line-height:1.5;">${s.intro(escapeHtml(order.orderNumber))}</p>
       <p style="margin:16px 0 0;line-height:1.5;">
-        ${company.address.street}<br>${company.address.zip} ${company.address.city}
+        ${escapeHtml(company.address.street)}<br>${escapeHtml(company.address.zip)} ${escapeHtml(company.address.city)}
       </p>
     `
   );
@@ -291,7 +299,7 @@ export async function backInStockEmail(product: BackInStockInput): Promise<Email
     s.preheader(product.name),
     `
       <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading}</h1>
-      <p style="margin:0;line-height:1.5;">${s.intro(product.name)}</p>
+      <p style="margin:0;line-height:1.5;">${s.intro(escapeHtml(product.name))}</p>
       ${button(url, s.button)}
     `
   );
@@ -322,8 +330,8 @@ export async function returnAcceptedEmail(order: OrderStatusUpdateInput): Promis
     order.locale,
     s.preheader(order.orderNumber),
     `
-      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(order.firstName)}</h1>
-      <p style="margin:0;line-height:1.5;">${s.intro(order.orderNumber)}</p>
+      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(escapeHtml(order.firstName))}</h1>
+      <p style="margin:0;line-height:1.5;">${s.intro(escapeHtml(order.orderNumber))}</p>
     `
   );
   return {
@@ -339,8 +347,8 @@ export async function returnRejectedEmail(order: OrderStatusUpdateInput): Promis
     order.locale,
     s.preheader(order.orderNumber),
     `
-      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(order.firstName)}</h1>
-      <p style="margin:0;line-height:1.5;">${s.intro(order.orderNumber)}</p>
+      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(escapeHtml(order.firstName))}</h1>
+      <p style="margin:0;line-height:1.5;">${s.intro(escapeHtml(order.orderNumber))}</p>
     `
   );
   return {
@@ -356,8 +364,8 @@ export async function returnRefundedEmail(order: OrderStatusUpdateInput): Promis
     order.locale,
     s.preheader(order.orderNumber),
     `
-      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(order.firstName)}</h1>
-      <p style="margin:0;line-height:1.5;">${s.intro(order.orderNumber)}</p>
+      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(escapeHtml(order.firstName))}</h1>
+      <p style="margin:0;line-height:1.5;">${s.intro(escapeHtml(order.orderNumber))}</p>
     `
   );
   return {
@@ -377,8 +385,8 @@ export async function paymentFailedEmail(order: OrderStatusUpdateInput): Promise
     order.locale,
     s.preheader(order.orderNumber),
     `
-      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(order.firstName)}</h1>
-      <p style="margin:0 0 8px;line-height:1.5;">${s.intro(order.orderNumber)}</p>
+      <h1 style="font-size:20px;color:#24352B;margin:0 0 12px;">${s.heading(escapeHtml(order.firstName))}</h1>
+      <p style="margin:0 0 8px;line-height:1.5;">${s.intro(escapeHtml(order.orderNumber))}</p>
       <p style="margin:0;line-height:1.5;">${s.retryNote}</p>
       <div style="margin-top:20px;">${button(shopUrl, s.button)}</div>
     `
diff --git a/src/lib/escape-html.ts b/src/lib/escape-html.ts
new file mode 100644
index 0000000..8c194fd
--- /dev/null
+++ b/src/lib/escape-html.ts
@@ -0,0 +1,14 @@
+/**
+ * Maskiert Text fuer die Ausgabe in HTML (Element-Inhalt und Attributwerte in
+ * doppelten oder einfachen Anfuehrungszeichen). Pflicht fuer JEDEN Wert aus
+ * Nutzereingaben, Datenbank oder Admin-Feldern, der in selbst gebautes HTML
+ * wandert — vor allem in E-Mails, wo React nicht automatisch maskiert.
+ */
+export function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
diff --git a/src/lib/withdrawal.test.ts b/src/lib/withdrawal.test.ts
index eacb914..27f23ca 100644
--- a/src/lib/withdrawal.test.ts
+++ b/src/lib/withdrawal.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
-import { escapeHtml, formatReceivedAt, withdrawalDeclarationLines, withdrawalReceiptEmailContent } from "./withdrawal";
+import { formatReceivedAt, withdrawalDeclarationLines, withdrawalReceiptEmailContent } from "./withdrawal";
+import { escapeHtml } from "./escape-html";
 
 const input = {
   name: "Erika Mustermann",
diff --git a/src/lib/withdrawal.ts b/src/lib/withdrawal.ts
index 10130bf..d6d229a 100644
--- a/src/lib/withdrawal.ts
+++ b/src/lib/withdrawal.ts
@@ -1,4 +1,5 @@
 import type { Locale } from "@/i18n/config";
+import { escapeHtml } from "@/lib/escape-html";
 
 /**
  * Elektronische Widerrufsfunktion (§ 356a BGB): Wortlaut der Erklaerung und
@@ -18,7 +19,7 @@ export interface WithdrawalDeclarationInput {
 export interface WithdrawalReceiptEmail {
   subject: string;
   preheader: string;
-  /** Inhalt fuer den gemeinsamen Mail-Rahmen (emailLayout), bereits maskiert. */
+  /** Inhalt fuer den gemeinsamen Mail-Rahmen (emailLayout), bereits maskiert. preheader maskiert emailLayout selbst. */
   bodyHtml: string;
   text: string;
 }
@@ -83,15 +84,6 @@ export function withdrawalDeclarationLines(input: WithdrawalDeclarationInput, lo
   ];
 }
 
-export function escapeHtml(value: string): string {
-  return value
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#39;");
-}
-
 /** Zeilenumbrueche im Betreff wuerden sonst als weitere Mail-Header gelesen (Header-Injection). */
 function singleLine(value: string): string {
   return value.replace(/[\r\n]+/g, " ");
@@ -117,7 +109,7 @@ export function withdrawalReceiptEmailContent(
   const text = [s.heading, "", s.intro, "", ...lines, "", `${s.receivedAt}: ${when}`, "", s.next].join("\n");
   return {
     subject: singleLine(s.subject(input.orderNumber)),
-    preheader: escapeHtml(singleLine(`${s.receivedAt}: ${when}`)),
+    preheader: singleLine(`${s.receivedAt}: ${when}`),
     bodyHtml,
     text,
   };