fix(blog): sanitize descriptionHtml before set:html

Blog dek content can include intentional HTML links via descriptionHtml.
Render through an allowlist sanitizer so script tags, event handlers, and
javascript: hrefs cannot execute if introduced via content or a PR.

Signed-off-by: Sebastien Tardif <sebtardif@ncf.ca>

Author: SebTardif

src/lib/sanitize-html.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, test } from "bun:test";
+import { sanitizeHtml } from "./sanitize-html";
+
+describe("sanitizeHtml", () => {
+  test("preserves safe anchors and emphasis", () => {
+    const input =
+      'Every skill ships with a <a href="https://example.com/card">Skill Card</a> and <em>scans</em>';
+    expect(sanitizeHtml(input)).toBe(input);
+  });
+
+  test("strips script tags by escaping them", () => {
+    const input = 'hello <script>alert(1)</script> world';
+    const out = sanitizeHtml(input);
+    expect(out).not.toContain("<script>");
+    expect(out).toContain("&lt;script&gt;");
+  });
+
+  test("drops javascript: hrefs", () => {
+    const input = '<a href="javascript:alert(1)">x</a>';
+    const out = sanitizeHtml(input);
+    expect(out).not.toContain("javascript:");
+    expect(out).toBe("<a>x</a>");
+  });
+
+  test("adds noopener for target=_blank", () => {
+    const input = '<a href="https://example.com" target="_blank">x</a>';
+    const out = sanitizeHtml(input);
+    expect(out).toContain('rel="noopener noreferrer"');
+  });
+
+  test("escapes event-handler attributes on allowlisted tags", () => {
+    const input = '<a href="https://example.com" onclick="alert(1)">x</a>';
+    const out = sanitizeHtml(input);
+    expect(out).not.toContain("onclick");
+    expect(out).toBe('<a href="https://example.com">x</a>');
+  });
+});

src/lib/sanitize-html.ts

@@ -0,0 +1,96 @@
+/**
+ * Strip dangerous HTML while preserving safe formatting tags.
+ * Used by blog descriptionHtml (and similar set:html surfaces).
+ * Prevents XSS if a malicious string is introduced via content or a PR.
+ */
+
+const SAFE_TAGS = new Set([
+  "strong",
+  "em",
+  "b",
+  "i",
+  "code",
+  "br",
+  "a",
+  "p",
+  "span",
+  "sup",
+  "sub",
+  "ul",
+  "ol",
+  "li",
+]);
+
+const SAFE_ATTRS: Record<string, Set<string>> = {
+  a: new Set(["href", "title", "target", "rel"]),
+  span: new Set(["class"]),
+};
+
+const SAFE_HREF_RE = /^(https:\/\/|\/|#)/i;
+const SAFE_TARGETS = new Set(["_blank", "_self", "_parent", "_top"]);
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+/**
+ * Sanitize an HTML string: keep only allowlisted tags and attributes,
+ * escape everything else.
+ */
+export function sanitizeHtml(raw: string): string {
+  return raw.replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)\b([^>]*)?\/?>/g, (match, tag, attrStr) => {
+    const lower = (tag as string).toLowerCase();
+    if (!SAFE_TAGS.has(lower)) {
+      return escapeHtml(match);
+    }
+
+    if (match.startsWith("</")) {
+      return `</${lower}>`;
+    }
+
+    const allowedAttrs = SAFE_ATTRS[lower];
+    if (!allowedAttrs || !attrStr?.trim()) {
+      const selfClose = match.endsWith("/>") ? " /" : "";
+      return `<${lower}${selfClose}>`;
+    }
+
+    const attrs: string[] = [];
+    let opensNewWindow = false;
+    let targetSeen = false;
+    let relSeen = false;
+    const attrRe = /([a-zA-Z][\w-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
+    let m: RegExpExecArray | null;
+    while ((m = attrRe.exec(attrStr)) !== null) {
+      const name = m[1]!.toLowerCase();
+      const value = m[2] ?? m[3] ?? m[4] ?? "";
+      if (!allowedAttrs.has(name)) continue;
+      if (name === "href" && !SAFE_HREF_RE.test(value)) continue;
+      if (name === "target") {
+        if (targetSeen) continue;
+        const target = value.toLowerCase();
+        if (!SAFE_TARGETS.has(target)) continue;
+        targetSeen = true;
+        opensNewWindow = target === "_blank";
+        attrs.push(`${name}="${target}"`);
+        continue;
+      }
+      if (name === "rel") {
+        relSeen = true;
+        attrs.push(`${name}="${escapeHtml(value)}"`);
+        continue;
+      }
+      attrs.push(`${name}="${escapeHtml(value)}"`);
+    }
+    if (lower === "a" && opensNewWindow && !relSeen) {
+      attrs.push('rel="noopener noreferrer"');
+    }
+
+    const selfClose = match.endsWith("/>") ? " /" : "";
+    const attrPart = attrs.length > 0 ? ` ${attrs.join(" ")}` : "";
+    return `<${lower}${attrPart}${selfClose}>`;
+  });
+}

src/pages/blog/[...slug].astro

@@ -7,6 +7,7 @@ import { getPublishedBlogPosts } from '../../lib/blog';
 import { resolveBlogSocialImage } from '../../lib/blog-social-image';
 import { authorSlug, getSortedAuthorLinkMeta, resolveAuthorProfile, type BlogAuthor } from '../../lib/authors';
 import { getCachedXAvatarSrc, getInitialsAvatarSrc } from '../../lib/avatars';
+import { sanitizeHtml } from '../../lib/sanitize-html';
 import { sanitizeUrl } from '../../lib/sanitize-url';
 import { absoluteUrl, blogPostPath } from '../../lib/seo';
 import { siX } from 'simple-icons';
@@ -76,7 +77,7 @@ const canonicalPostUrl = absoluteUrl(blogPostPath(post));
 const ogImage = resolveBlogSocialImage(post.id, post.data.ogImage);
 const articleImageUrl = absoluteUrl(ogImage.src);
 
-const descriptionHtml = post.data.descriptionHtml ?? post.data.description;
+const descriptionHtml = sanitizeHtml(post.data.descriptionHtml ?? post.data.description);
 const structuredAuthors = authors.map((author) => {
   const sameAs = getSortedAuthorLinkMeta(author)
     .map((link) => link.url)