@handled-ai/design-system 0.18.52 → 0.19.0-rc.0

package/src/internal/safe-html.ts

@@ -0,0 +1,284 @@
+const DANGEROUS_BLOCK_TAGS = new Set([
+  "script",
+  "style",
+  "iframe",
+  "object",
+  "embed",
+  "svg",
+  "math",
+  "template",
+  "noscript",
+  "textarea",
+  "select",
+])
+
+const ALLOWED_TAGS = new Set([
+  "a",
+  "b",
+  "blockquote",
+  "br",
+  "code",
+  "del",
+  "div",
+  "em",
+  "hr",
+  "i",
+  "img",
+  "li",
+  "ol",
+  "p",
+  "pre",
+  "s",
+  "span",
+  "strong",
+  "table",
+  "tbody",
+  "td",
+  "th",
+  "thead",
+  "tr",
+  "u",
+  "ul",
+])
+
+const VOID_TAGS = new Set(["br", "hr", "img"])
+const SAFE_GLOBAL_ATTRS = new Set(["aria-label", "role", "title"])
+const SAFE_URL_PROTOCOLS = new Set(["http:", "https:", "mailto:", "tel:"])
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+}
+
+function escapeAttribute(value: string): string {
+  return escapeHtml(value).replace(/"/g, "&quot;")
+}
+
+function safeCodePoint(value: number): string {
+  return Number.isInteger(value) && value >= 0 && value <= 0x10ffff ? String.fromCodePoint(value) : ""
+}
+
+function decodeHtmlEntities(value: string): string {
+  const namedEntities: Record<string, string> = {
+    amp: "&",
+    apos: "'",
+    colon: ":",
+    gt: ">",
+    lt: "<",
+    newline: "\n",
+    quot: '"',
+    tab: "\t",
+  }
+
+  let decoded = value
+  for (let i = 0; i < 4; i += 1) {
+    const next = decoded
+      .replace(/&#x([0-9a-f]+);?/gi, (_match, hex: string) => {
+        const codePoint = Number.parseInt(hex, 16)
+        return safeCodePoint(codePoint)
+      })
+      .replace(/&#(\d+);?/g, (_match, decimal: string) => {
+        const codePoint = Number.parseInt(decimal, 10)
+        return safeCodePoint(codePoint)
+      })
+      .replace(/&([a-z]+);/gi, (match, name: string) => namedEntities[name.toLowerCase()] ?? match)
+
+    if (next === decoded) return decoded
+    decoded = next
+  }
+
+  return decoded
+}
+
+function isSafeUrl(value: string): boolean {
+  const decoded = decodeHtmlEntities(value).replace(/[\u0000-\u001f\u007f\s]+/g, "").trim()
+  if (!decoded) return false
+  if (decoded.startsWith("//")) return false
+  if (decoded.startsWith("#") || decoded.startsWith("/") || decoded.startsWith("./") || decoded.startsWith("../")) {
+    return true
+  }
+
+  try {
+    return SAFE_URL_PROTOCOLS.has(new URL(decoded, "https://handled.local").protocol)
+  } catch {
+    return false
+  }
+}
+
+function sanitizeClassName(value: string): string | null {
+  const safeTokens = value
+    .split(/\s+/)
+    .map((token) => token.trim())
+    .filter((token) => /^[A-Za-z0-9_-]+$/.test(token))
+
+  return safeTokens.length ? safeTokens.join(" ") : null
+}
+
+function sanitizeAttribute(tagName: string, name: string, value: string): string | null {
+  const attr = name.toLowerCase()
+
+  if (
+    attr.startsWith("on") ||
+    attr === "style" ||
+    attr === "srcdoc" ||
+    attr === "formaction" ||
+    attr === "xlink:href" ||
+    attr === "xmlns"
+  ) {
+    return null
+  }
+
+  if (attr === "class") {
+    const safeClassName = sanitizeClassName(value)
+    return safeClassName ? `class="${escapeAttribute(safeClassName)}"` : null
+  }
+
+  if (SAFE_GLOBAL_ATTRS.has(attr) || attr.startsWith("aria-")) {
+    return `${attr}="${escapeAttribute(value)}"`
+  }
+
+  if (tagName === "a" && attr === "href" && isSafeUrl(value)) {
+    return `href="${escapeAttribute(value)}"`
+  }
+
+  if (tagName === "img" && attr === "src" && isSafeUrl(value)) {
+    return `src="${escapeAttribute(value)}"`
+  }
+
+  if (tagName === "img" && (attr === "alt" || attr === "width" || attr === "height")) {
+    return `${attr}="${escapeAttribute(value)}"`
+  }
+
+  if ((tagName === "td" || tagName === "th") && (attr === "colspan" || attr === "rowspan")) {
+    return `${attr}="${escapeAttribute(value)}"`
+  }
+
+  return null
+}
+
+function sanitizeAttributes(tagName: string, rawAttributes = ""): string {
+  const attributes: string[] = []
+  const attrPattern = /([A-Za-z_:][-A-Za-z0-9_:.]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g
+  let match: RegExpExecArray | null
+
+  while ((match = attrPattern.exec(rawAttributes)) !== null) {
+    const [, name, doubleQuotedValue, singleQuotedValue, unquotedValue] = match
+    const value = doubleQuotedValue ?? singleQuotedValue ?? unquotedValue ?? ""
+    const safeAttribute = sanitizeAttribute(tagName, name, value)
+    if (safeAttribute) attributes.push(safeAttribute)
+  }
+
+  if (tagName === "a" && attributes.some((attr) => attr.startsWith("href="))) {
+    attributes.push('target="_blank"', 'rel="noopener noreferrer"')
+  }
+
+  return attributes.length ? ` ${attributes.join(" ")}` : ""
+}
+
+function findTagEnd(html: string, startIndex: number): number {
+  let quote: '"' | "'" | null = null
+
+  for (let i = startIndex + 1; i < html.length; i += 1) {
+    const char = html[i]
+    if (quote) {
+      if (char === quote) quote = null
+      continue
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char
+      continue
+    }
+
+    if (char === ">") return i
+  }
+
+  return -1
+}
+
+function parseTag(rawTag: string): { closing: boolean; name: string; attributes: string } | null {
+  const match = rawTag.match(/^<\s*(\/)?\s*([A-Za-z][A-Za-z0-9:-]*)\b([\s\S]*?)\/?>$/)
+  if (!match) return null
+
+  return {
+    closing: !!match[1],
+    name: match[2].toLowerCase(),
+    attributes: match[3] ?? "",
+  }
+}
+
+function findDangerousClose(html: string, tagName: string, fromIndex: number): number {
+  const closePattern = new RegExp(`</\\s*${tagName}\\s*>`, "ig")
+  closePattern.lastIndex = fromIndex
+  const match = closePattern.exec(html)
+  return match ? closePattern.lastIndex : -1
+}
+
+/**
+ * Conservative, deterministic sanitizer for user/email supplied HTML rendered by
+ * design-system components. It keeps common email formatting tags while removing
+ * executable tags, event handlers, inline styles, and unsafe URLs. This stays
+ * dependency-free for the shared package and intentionally favors stripping
+ * ambiguous email content over preserving every possible HTML feature.
+ */
+export function sanitizeHtml(html: string): string {
+  let output = ""
+  let cursor = 0
+
+  while (cursor < html.length) {
+    const tagStart = html.indexOf("<", cursor)
+    if (tagStart === -1) {
+      output += html.slice(cursor)
+      break
+    }
+
+    output += html.slice(cursor, tagStart)
+
+    if (html.startsWith("<!--", tagStart)) {
+      const commentEnd = html.indexOf("-->", tagStart + 4)
+      cursor = commentEnd === -1 ? html.length : commentEnd + 3
+      continue
+    }
+
+    const tagEnd = findTagEnd(html, tagStart)
+    if (tagEnd === -1) {
+      output += escapeHtml(html.slice(tagStart))
+      break
+    }
+
+    const rawTag = html.slice(tagStart, tagEnd + 1)
+    const parsed = parseTag(rawTag)
+    if (!parsed) {
+      cursor = tagEnd + 1
+      continue
+    }
+
+    if (DANGEROUS_BLOCK_TAGS.has(parsed.name)) {
+      const closeEnd = parsed.closing ? -1 : findDangerousClose(html, parsed.name, tagEnd + 1)
+      cursor = closeEnd === -1 ? tagEnd + 1 : closeEnd
+      continue
+    }
+
+    if (ALLOWED_TAGS.has(parsed.name)) {
+      if (parsed.closing) {
+        if (!VOID_TAGS.has(parsed.name)) output += `</${parsed.name}>`
+      } else {
+        output += `<${parsed.name}${sanitizeAttributes(parsed.name, parsed.attributes)}>`
+      }
+    }
+
+    cursor = tagEnd + 1
+  }
+
+  return output
+}
+
+export function htmlToTextSnippet(html: string, maxLength = 140): string {
+  return sanitizeHtml(html)
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .slice(0, maxLength)
+}