@bygghammar/cms-platform 0.95.0 → 0.96.0

package/CHANGELOG.md

@@ -8,6 +8,78 @@ matches `package.json` exactly. See
 Versions 0.1.0 through 0.78.0 predate this repository and were reconstructed
 from the published npm tarballs.
 
+## 0.96.0
+
+Security release. No migration, and no export was added or removed.
+
+- **Rich text is sanitized by a parser, not by patterns** (`./html/sanitize-html`).
+  The old sanitizer copied the text between the tags it recognised through as
+  written, so an unterminated tag at the end of a fragment (for example an image
+  tag with an event handler and no closing `>`) survived, and in server
+  rendering the markup after the fragment completed it into a live element.
+  Markup is now read the way a browser's HTML tokenizer reads it (every quoting
+  form, comments, DOCTYPE, CDATA, raw-text elements, a tag cut off by the end of
+  the input) and the output is written from scratch: allowlisted elements and
+  attributes only, attributes decoded once and escaped once, and every `<` and
+  `>` in text escaped. The editor's allowlist, URL rules and booking-link
+  `&amp;` handling are unchanged.
+  - Tightened: a `data:` image is accepted only in an image's `src`, never as a
+    link target. `svg`, `math`, `template`, `textarea`, `title`, `xmp`,
+    `noembed`, `noframes` and `plaintext` are dropped together with their
+    content.
+  - `htmlToText` now returns plain text, with entities decoded.
+- **The builder and its preview only talk to each other**
+  (`./site/routes/preview-page`, the page builder). The public preview route
+  used to render blocks posted by any window that put a marker string in its
+  message, and both ends posted to `"*"`. Now:
+  - the preview accepts the builder's messages only from its parent frame,
+    from its own origin or an origin the host lists, in one builder session
+    with increasing sequence numbers, shape-checked and at most 4 MB;
+  - the builder accepts the preview's messages only from its own iframe, and
+    every message names its target origin.
+  - **Host change, only for a builder on another origin:** list that origin in
+    the preview page deps as `trustedEditorOrigins`. A builder on the site's own
+    origin (Voyara's) needs no configuration.
+- **One outbound request policy** for every address staff or configuration
+  chooses: media import, form webhooks and popup opt-in webhooks. Each of these
+  was a server-side request forgery primitive. Every request now:
+  - allows only the schemes its policy names (webhooks: https only), with no
+    credentials in the URL, no local or single-label host names and no
+    privileged ports other than 80 and 443;
+  - looks the host up and goes ahead only if every address it resolves to is
+    public (IPv4 and IPv6 special-purpose ranges, including mapped, NAT64 and
+    6to4 forms), then connects to the address it checked (pinned, so a DNS
+    answer that changes in between cannot redirect it), with TLS still verified
+    for the host name;
+  - follows redirects itself, checking and pinning every hop, up to a cap;
+  - runs under one deadline for the whole request, which also holds when a
+    lookup, connection or response body ignores cancellation (Node's DNS
+    lookup cannot be cancelled), and reads at most a fixed number of bytes,
+    streaming, whatever `Content-Length` says;
+  - reports failures by category, with messages that carry no address, query
+    string or response body.
+- **What each path does with that policy:**
+  - **Media import:** a downloaded file is stored as what its first bytes say
+    it is (JPEG, PNG, GIF, WebP, AVIF, MP4, MOV, M4V, WebM, MP3, WAV, Ogg or
+    PDF), with that extension, never as the server's content type or the URL's
+    extension. SVG and HTML are refused. Public redirects to other sites are
+    still followed, carrying only plain request headers.
+  - **Form and popup webhooks never follow a redirect to another site.** A
+    signed body, its signature, timestamp, event id and idempotency key reach
+    only the configured origin (a redirect within that origin is followed;
+    popup webhooks report the refusal as `blocked-endpoint`). When a redirect
+    turns a request into a GET, entity and signature headers are dropped.
+    **Receivers that redirect to another host must be configured with their
+    final address.**
+  - **Form webhooks** are checked when the form is saved, report a failure by
+    status only (the receiver's reply is never copied into it), and are never
+    sent unsigned when signing fails.
+- **Addresses in records keep the origin only.** Webhook delivery records,
+  errors and the form audit trail show a webhook as its origin plus a fixed
+  `/[redacted]` marker, never its path, query string or credentials, because
+  receivers put keys in paths as well as in query strings. Settings whose name
+  says they are a secret are recorded as changed, never with a value.
+
 ## 0.95.0
 
 - **Pages can be link-only, and unpublished from the page itself.** Listing is

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.95.0",
+  "version": "0.96.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [

package/src/backoffice/PageEditorView.tsx

@@ -56,6 +56,12 @@ import {
   type InsertRefusal,
 } from "../blocks/block-tree";
 import { subscribeSharedDrafts } from "../cms/shared-draft-store";
+import {
+  acceptPreviewMessage,
+  EDITOR_SOURCE,
+  newPreviewSession,
+  previewOriginOf,
+} from "../site/preview-messaging";
 import { SaveGlobalDialog, type SaveGlobalResult } from "./SaveGlobalDialog";
 
 function uid(prefix = "b") {
@@ -570,6 +576,27 @@ export function PageEditorView({
   );
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [previewReady, setPreviewReady] = useState(false);
+  // The canvas is spoken to only at its own origin, in one session, in order
+  // (see preview-messaging); its answers count only from its own window.
+  const previewSession = useMemo(() => newPreviewSession(), []);
+  const previewSeq = useRef(0);
+  const previewOrigin = useMemo(
+    () =>
+      typeof window === "undefined" ? null : previewOriginOf(previewUrl(pageKey), window.location.href),
+    [previewUrl, pageKey],
+  );
+  const postToPreview = useCallback(
+    (message: Record<string, unknown>) => {
+      const frame = iframeRef.current?.contentWindow;
+      if (!frame || !previewOrigin) return;
+      previewSeq.current += 1;
+      frame.postMessage(
+        { source: EDITOR_SOURCE, session: previewSession, seq: previewSeq.current, ...message },
+        previewOrigin,
+      );
+    },
+    [previewOrigin, previewSession],
+  );
 
   const currentBlocks = controlledBlocks ?? blocks;
 
@@ -581,19 +608,15 @@ export function PageEditorView({
   // Push draft to iframe whenever blocks/locale/selection change.
   useEffect(() => {
     if (!previewReady) return;
-    iframeRef.current?.contentWindow?.postMessage(
-      {
-        source: "lovable-editor",
-        type: "draft",
-        blocks: currentBlocks,
-        globals,
-        selectedId,
-        locale,
-        sharedContent: sharedDrafts,
-      },
-      "*",
-    );
-  }, [currentBlocks, globals, selectedId, locale, previewReady, sharedDrafts]);
+    postToPreview({
+      type: "draft",
+      blocks: currentBlocks,
+      globals,
+      selectedId,
+      locale,
+      sharedContent: sharedDrafts,
+    });
+  }, [currentBlocks, globals, selectedId, locale, previewReady, sharedDrafts, postToPreview]);
 
   useEffect(() => {
     const t = setTimeout(() => {
@@ -604,27 +627,27 @@ export function PageEditorView({
   }, [pageKey, currentBlocks, globals, locale]);
 
   /** Select a block from the outline and scroll the preview to it. */
-  const selectAndReveal = useCallback((id: string) => {
-    setSelectedId(id);
-    iframeRef.current?.contentWindow?.postMessage(
-      { source: "lovable-editor", type: "scrollTo", blockId: id },
-      "*",
-    );
-  }, []);
+  const selectAndReveal = useCallback(
+    (id: string) => {
+      setSelectedId(id);
+      postToPreview({ type: "scrollTo", blockId: id });
+    },
+    [postToPreview],
+  );
 
   // Listen for iframe messages.
   useEffect(() => {
     const onMsg = (ev: MessageEvent) => {
-      const d = ev.data as { source?: string; type?: string; blockId?: string };
-      if (d?.source !== "lovable-preview") return;
+      const d = acceptPreviewMessage(ev, { frame: iframeRef.current?.contentWindow, previewOrigin });
+      if (!d) return;
       if (d.type === "ready") setPreviewReady(true);
-      if (d.type === "select" && d.blockId) {
+      if (d.type === "select") {
         if (findBlockDeep(currentBlocks, d.blockId)) setSelectedId(d.blockId);
       }
     };
     window.addEventListener("message", onMsg);
     return () => window.removeEventListener("message", onMsg);
-  }, [currentBlocks]);
+  }, [currentBlocks, previewOrigin]);
 
   // Keep the outline highlight visible whenever the selection changes.
   useEffect(() => {

package/src/forms/form-audit.ts

@@ -2,6 +2,8 @@
 // Every backoffice change to a form (settings + fields) is turned into a list
 // of short change descriptions so the Activity view answers who/what/when.
 
+import { redactUrl } from "../util/redact-url";
+
 export type FormAuditChange = {
   /** Machine scope: "form" | "settings" | "field" */
   scope: "form" | "settings" | "field";
@@ -26,6 +28,24 @@ export type FormSnapshotInput = {
 
 const MAX_LEN = 160;
 
+/** Delivery settings whose value is a credential: the audit says it changed, never what to. */
+const SECRET_SETTING = /secret|token|password|apikey|api_key/i;
+
+/** An address as the audit shows it: its origin only — keys travel in paths and query strings. */
+function addressOnly(v: unknown): unknown {
+  if (typeof v !== "string" || v.trim() === "") return v;
+  const redacted = redactUrl(v.trim());
+  return redacted === "(invalid address)" ? "(not a valid address)" : redacted;
+}
+
+/** A delivery setting's value as the audit may record it. */
+function auditable(group: string, key: string, v: unknown): unknown {
+  if (group !== "private_settings") return v;
+  if (SECRET_SETTING.test(key)) return v == null || v === "" ? v : "(hidden)";
+  if (/url$/i.test(key)) return addressOnly(v);
+  return v;
+}
+
 function short(v: unknown): string {
   if (v == null) return "—";
   if (typeof v === "string") return v.length > MAX_LEN ? `${v.slice(0, MAX_LEN)}…` : v || "—";
@@ -143,8 +163,8 @@ export function diffForms(
       out.push({
         scope: "settings",
         label: `${label}: ${humanKey(k)}`,
-        from: short(a[k]),
-        to: short(b[k]),
+        from: short(auditable(group, k, a[k])),
+        to: short(auditable(group, k, b[k])),
       });
     }
   }

package/src/html/html-tokenizer.ts

@@ -0,0 +1,254 @@
+/**
+ * An HTML tokenizer for the sanitizer, following the WHATWG tokenizer states
+ * that matter for a fragment of body content. No DOM is needed, so it runs the
+ * same on the server and in the browser.
+ *
+ * It splits markup into text, start tags and end tags, the way a browser
+ * would. Comments, DOCTYPEs, CDATA sections and processing instructions are
+ * consumed and produce nothing. A tag that runs into the end of the input is
+ * dropped, as a browser drops it. The content of raw-text and RCDATA elements
+ * (`<script>`, `<style>`, `<textarea>`, …) is returned as one text token, as
+ * the browser's tree builder makes the tokenizer read it.
+ *
+ * Values are returned exactly as written — text and attribute values are not
+ * decoded here. The sanitizer re-serializes everything it keeps, so nothing
+ * from the input reaches its output without being re-encoded.
+ */
+
+export type HtmlToken =
+  | { kind: "text"; raw: string }
+  | {
+      kind: "start";
+      name: string;
+      /** In source order; a repeated name keeps its first value, as browsers do. */
+      attrs: Array<{ name: string; raw: string }>;
+      selfClosing: boolean;
+    }
+  | { kind: "end"; name: string };
+
+/** Elements whose content the browser reads as text up to their own end tag. */
+const RAW_TEXT = new Set([
+  "script",
+  "style",
+  "xmp",
+  "iframe",
+  "noembed",
+  "noframes",
+  "noscript",
+  "title",
+  "textarea",
+]);
+
+const isWhitespace = (c: string) =>
+  c === " " || c === "\t" || c === "\n" || c === "\f" || c === "\r";
+const isAlpha = (c: string) => (c >= "a" && c <= "z") || (c >= "A" && c <= "Z");
+
+/** Lower-cases ASCII only, as the HTML tokenizer does for names. */
+function asciiLower(value: string): string {
+  return value.replace(/[A-Z]+/g, (m) => m.toLowerCase());
+}
+
+export function tokenizeHtml(input: string): HtmlToken[] {
+  const html = input.replace(/\r\n?/g, "\n").replace(/\u0000/g, "�");
+  const tokens: HtmlToken[] = [];
+  const n = html.length;
+  let lower: string | undefined;
+  let i = 0;
+  let textStart = 0;
+
+  const flushText = (end: number) => {
+    if (end > textStart) tokens.push({ kind: "text", raw: html.slice(textStart, end) });
+  };
+
+  /** Skips a bogus comment: everything up to and including the next `>`. */
+  const skipBogusComment = (from: number): number => {
+    const end = html.indexOf(">", from);
+    return end < 0 ? n : end + 1;
+  };
+
+  /** Skips a comment whose `<!--` ends at `from`. */
+  const skipComment = (from: number): number => {
+    if (html.startsWith(">", from)) return from + 1; // <!-->
+    if (html.startsWith("->", from)) return from + 2; // <!--->
+    let j = from;
+    while (j < n) {
+      if (html.startsWith("-->", j)) return j + 3;
+      if (html.startsWith("--!>", j)) return j + 4;
+      j++;
+    }
+    return n;
+  };
+
+  /**
+   * Reads a tag whose name starts at `from`. Returns the token and the index
+   * after the tag, or null when the input ends inside it.
+   */
+  const readTag = (
+    from: number,
+    closing: boolean,
+  ): { token: HtmlToken; next: number } | null => {
+    let j = from;
+    while (j < n && !isWhitespace(html[j]!) && html[j] !== "/" && html[j] !== ">") j++;
+    const name = asciiLower(html.slice(from, j));
+    const attrs: Array<{ name: string; raw: string }> = [];
+    const seen = new Set<string>();
+    let selfClosing = false;
+
+    for (;;) {
+      // Before attribute name.
+      while (j < n && (isWhitespace(html[j]!) || html[j] === "/")) {
+        if (html[j] === "/") {
+          // Self-closing start tag state.
+          if (html[j + 1] === ">") {
+            selfClosing = true;
+            j++;
+            break;
+          }
+        }
+        j++;
+      }
+      if (j >= n) return null;
+      if (html[j] === ">") {
+        j++;
+        break;
+      }
+      // Attribute name: a leading `=` is part of the name.
+      const nameStart = j;
+      j++;
+      while (j < n && !isWhitespace(html[j]!) && html[j] !== "/" && html[j] !== ">" && html[j] !== "=") {
+        j++;
+      }
+      const attrName = asciiLower(html.slice(nameStart, j));
+      // After attribute name.
+      while (j < n && isWhitespace(html[j]!)) j++;
+      let raw = "";
+      if (j < n && html[j] === "=") {
+        j++;
+        while (j < n && isWhitespace(html[j]!)) j++;
+        if (j >= n) return null;
+        const quote = html[j];
+        if (quote === '"' || quote === "'") {
+          const end = html.indexOf(quote, j + 1);
+          if (end < 0) return null;
+          raw = html.slice(j + 1, end);
+          j = end + 1;
+        } else if (html[j] !== ">") {
+          const start = j;
+          while (j < n && !isWhitespace(html[j]!) && html[j] !== ">") j++;
+          raw = html.slice(start, j);
+        }
+      }
+      if (j >= n) return null;
+      if (!seen.has(attrName)) {
+        seen.add(attrName);
+        attrs.push({ name: attrName, raw });
+      }
+    }
+
+    const token: HtmlToken = closing
+      ? { kind: "end", name }
+      : { kind: "start", name, attrs, selfClosing };
+    return { token, next: j };
+  };
+
+  while (i < n) {
+    const lt = html.indexOf("<", i);
+    if (lt < 0) break;
+    const c = html[lt + 1] ?? "";
+
+    if (isAlpha(c)) {
+      const tag = readTag(lt + 1, false);
+      flushText(lt);
+      if (!tag) {
+        // The input ends inside the tag: the browser drops it.
+        i = textStart = n;
+        break;
+      }
+      tokens.push(tag.token);
+      i = textStart = tag.next;
+      const name = tag.token.kind === "start" ? tag.token.name : "";
+      if (name === "plaintext") {
+        flushText(n);
+        textStart = n;
+        i = n;
+        break;
+      }
+      if (RAW_TEXT.has(name)) {
+        // Read the content as text, up to `</name` followed by a delimiter.
+        // ASCII-only lower-casing keeps every index the same as in `html`.
+        lower ??= asciiLower(html);
+        let j = i;
+        let end = -1;
+        while ((j = lower.indexOf(`</${name}`, j)) >= 0) {
+          const after = html[j + 2 + name.length] ?? "";
+          if (after === "" || isWhitespace(after) || after === "/" || after === ">") {
+            end = j;
+            break;
+          }
+          j += 2 + name.length;
+        }
+        if (end < 0) {
+          if (i < n) tokens.push({ kind: "text", raw: html.slice(i) });
+          i = textStart = n;
+          break;
+        }
+        if (end > i) tokens.push({ kind: "text", raw: html.slice(i, end) });
+        const close = readTag(end + 2, true);
+        tokens.push({ kind: "end", name });
+        i = textStart = close ? close.next : n;
+      }
+      continue;
+    }
+
+    if (c === "/") {
+      const d = html[lt + 2] ?? "";
+      if (isAlpha(d)) {
+        const tag = readTag(lt + 2, true);
+        flushText(lt);
+        if (!tag) {
+          i = textStart = n;
+          break;
+        }
+        tokens.push(tag.token);
+        i = textStart = tag.next;
+        continue;
+      }
+      if (d === ">") {
+        flushText(lt);
+        i = textStart = lt + 3;
+        continue;
+      }
+      if (d === "") {
+        // `</` at the end of the input is text.
+        i = n;
+        break;
+      }
+      flushText(lt);
+      i = textStart = skipBogusComment(lt + 2);
+      continue;
+    }
+
+    if (c === "!") {
+      flushText(lt);
+      if (html.startsWith("--", lt + 2)) {
+        i = textStart = skipComment(lt + 4);
+      } else {
+        // DOCTYPE, CDATA and anything else after `<!` end at the next `>`.
+        i = textStart = skipBogusComment(lt + 2);
+      }
+      continue;
+    }
+
+    if (c === "?") {
+      flushText(lt);
+      i = textStart = skipBogusComment(lt + 1);
+      continue;
+    }
+
+    // A `<` that starts nothing is text.
+    i = lt + 1;
+  }
+
+  flushText(n);
+  return tokens;
+}

package/src/html/sanitize-html.ts

@@ -5,7 +5,16 @@
  * only staff can author it, the output is sanitized on every render so a
  * pasted `<script>`, inline event handler or `javascript:` URL can never end
  * up in a page.
+ *
+ * The input is tokenized the way a browser tokenizes it (`html-tokenizer`),
+ * and the output is written from scratch: allowed elements with allowed,
+ * re-encoded attributes, and text with every `<` and `>` escaped. Nothing from
+ * the input is ever copied through as written, so markup the sanitizer does
+ * not recognise — an unterminated tag, a stray `<` — reaches the page as
+ * visible text and can never be completed into an element by the markup that
+ * follows it.
  */
+import { tokenizeHtml } from "./html-tokenizer";
 
 const ALLOWED_TAGS = new Set([
   "p", "br", "hr", "span", "div",
@@ -19,9 +28,13 @@ const ALLOWED_TAGS = new Set([
 
 /** Tags whose entire contents are dropped. */
 const DROP_WITH_CONTENT = new Set([
-  "script", "style", "iframe", "object", "embed", "noscript", "template", "svg", "math",
+  "script", "style", "iframe", "object", "noscript", "template", "svg", "math",
+  "textarea", "title", "xmp", "noembed", "noframes", "plaintext",
 ]);
 
+/** Dropped elements that can contain themselves, so their end tags are counted. */
+const NESTING = new Set(["svg", "math", "object", "template"]);
+
 const VOID_TAGS = new Set(["br", "hr", "img", "col"]);
 
 const GLOBAL_ATTRS = new Set(["class", "style", "id", "title", "dir", "lang"]);
@@ -58,10 +71,13 @@ const ALLOWED_CSS = new Set([
 
 const SAFE_URL = /^(https?:\/\/|mailto:|tel:|\/|#|\.\/|\.\.\/)/i;
 
-function safeUrl(raw: string): string | null {
+function safeUrl(raw: string, attribute: string): string | null {
   const value = raw.trim().replace(/[\u0000-\u001f]/g, "");
   if (!value) return null;
-  if (/^data:image\/(png|jpe?g|gif|webp|avif);base64,/i.test(value)) return value;
+  // An inline image is an image source, never a link target.
+  if (/^data:image\/(png|jpe?g|gif|webp|avif);base64,/i.test(value)) {
+    return attribute === "src" ? value : null;
+  }
   if (!SAFE_URL.test(value)) return null;
   if (/^\s*javascript:/i.test(value)) return null;
   return value;
@@ -127,21 +143,17 @@ export function decodeAttr(value: string): string {
   );
 }
 
-const ATTR_RE = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>]+))/g;
-
-function sanitizeAttrs(tag: string, raw: string): string {
-  const allowed = TAG_ATTRS[tag];
+function sanitizeAttrs(tag: string, attrs: ReadonlyArray<{ name: string; raw: string }>): string {
+  const allowed = Object.prototype.hasOwnProperty.call(TAG_ATTRS, tag) ? TAG_ATTRS[tag] : undefined;
   const parts: string[] = [];
-  let m: RegExpExecArray | null;
-  ATTR_RE.lastIndex = 0;
-  while ((m = ATTR_RE.exec(raw))) {
-    const name = m[1].toLowerCase();
-    let value = decodeAttr(m[3] ?? m[4] ?? m[5] ?? "");
+  for (const attr of attrs) {
+    const name = attr.name;
+    let value = decodeAttr(attr.raw);
     if (name.startsWith("on")) continue;
     if (!GLOBAL_ATTRS.has(name) && !allowed?.has(name)) continue;
     if (name === "href" || name === "src" || name === "srcset") {
       if (name === "srcset") continue;
-      const url = safeUrl(value);
+      const url = safeUrl(value, name);
       if (!url) continue;
       value = url;
     }
@@ -164,30 +176,56 @@ function sanitizeAttrs(tag: string, raw: string): string {
   return parts.length ? " " + parts.join(" ") : "";
 }
 
+/** A character reference as written in text: kept, since it can only decode to text. */
+const CHAR_REF = /^&(?:#[0-9]{1,7}|#[xX][0-9a-fA-F]{1,6}|[a-zA-Z][a-zA-Z0-9]{0,31});/;
+
+/** Text as written, made safe to emit: no `<` or `>`, and every `&` a reference. */
+function escapeText(raw: string): string {
+  let out = "";
+  for (let i = 0; i < raw.length; i++) {
+    const c = raw[i]!;
+    if (c === "<") out += "&lt;";
+    else if (c === ">") out += "&gt;";
+    else if (c === "&") out += CHAR_REF.test(raw.slice(i, i + 42)) ? "&" : "&amp;";
+    else out += c;
+  }
+  return out;
+}
+
 /** Sanitize an HTML fragment down to the editor's allowlist. */
 export function sanitizeHtml(input: string | undefined | null): string {
   if (!input) return "";
-  // Remove comments and any element whose content must go with it.
-  let html = input.replace(/<!--[\s\S]*?-->/g, "");
-  for (const tag of DROP_WITH_CONTENT) {
-    html = html.replace(new RegExp(`<${tag}[\\s\\S]*?<\\/${tag}\\s*>`, "gi"), "");
-    html = html.replace(new RegExp(`<${tag}\\b[^>]*\\/?>`, "gi"), "");
-  }
-
   const open: string[] = [];
   let out = "";
-  let last = 0;
-  const tagRe = /<\s*(\/)?\s*([a-zA-Z][a-zA-Z0-9-]*)((?:[^>"']|"[^"]*"|'[^']*')*)>/g;
-  let m: RegExpExecArray | null;
-
-  while ((m = tagRe.exec(html))) {
-    out += html.slice(last, m.index);
-    last = m.index + m[0].length;
-    const closing = Boolean(m[1]);
-    const tag = m[2].toLowerCase();
+  /** The dropped element being skipped, and how deep inside it we are. */
+  let skipping: { tag: string; depth: number } | null = null;
+
+  for (const token of tokenizeHtml(input)) {
+    if (skipping) {
+      if (token.kind === "start" && token.name === skipping.tag && NESTING.has(token.name)) {
+        if (!token.selfClosing) skipping.depth++;
+      } else if (token.kind === "end" && token.name === skipping.tag) {
+        if (--skipping.depth === 0) skipping = null;
+      }
+      continue;
+    }
+
+    if (token.kind === "text") {
+      out += escapeText(token.raw);
+      continue;
+    }
+
+    const tag = token.name;
+    if (token.kind === "start" && DROP_WITH_CONTENT.has(tag)) {
+      // A self-closing <svg/> or <math/> is empty; every other one has content.
+      if (!(token.selfClosing && (tag === "svg" || tag === "math"))) {
+        skipping = { tag, depth: 1 };
+      }
+      continue;
+    }
     if (!ALLOWED_TAGS.has(tag)) continue;
 
-    if (closing) {
+    if (token.kind === "end") {
       if (VOID_TAGS.has(tag)) continue;
       const at = open.lastIndexOf(tag);
       if (at < 0) continue;
@@ -197,22 +235,19 @@ export function sanitizeHtml(input: string | undefined | null): string {
     }
 
     if (VOID_TAGS.has(tag)) {
-      out += `<${tag}${sanitizeAttrs(tag, m[3] ?? "")} />`;
+      out += `<${tag}${sanitizeAttrs(tag, token.attrs)} />`;
       continue;
     }
-    out += `<${tag}${sanitizeAttrs(tag, m[3] ?? "")}>`;
+    out += `<${tag}${sanitizeAttrs(tag, token.attrs)}>`;
     open.push(tag);
   }
-  out += html.slice(last);
   while (open.length) out += `</${open.pop()}>`;
   return out;
 }
 
 /** Plain-text preview of rich text (used for thumbnails and summaries). */
 export function htmlToText(input: string | undefined | null): string {
-  return sanitizeHtml(input)
-    .replace(/<[^>]+>/g, " ")
-    .replace(/&nbsp;/g, " ")
+  return decodeAttr(sanitizeHtml(input).replace(/<[^>]+>/g, " "))
     .replace(/\s+/g, " ")
     .trim();
 }