@handled-ai/design-system 0.20.21 → 0.20.23

package/src/internal/__tests__/safe-html.test.ts

@@ -2,12 +2,14 @@ import { describe, expect, it } from "vitest"
 import { htmlToTextSnippet, sanitizeHtml } from "../safe-html"
 
 describe("sanitizeHtml", () => {
-  it("removes executable tags, event handlers, styles, and unsafe urls", () => {
+  it("removes executable tags, event handlers, unsafe styles, and unsafe urls", () => {
     const html = sanitizeHtml(
-      '<p style="color:red" onclick="alert(1)">Hi<script>alert(1)</script><iframe src="https://evil.test"></iframe><a href="java&#x3a;script:alert(1)">bad</a><img src="data:text/html,boom" onerror="alert(1)"></p>',
+      '<p style="color:red; background-image: url(https://evil.test/x)" onclick="alert(1)">Hi<script>alert(1)</script><iframe src="https://evil.test"></iframe><a href="java&#x3a;script:alert(1)">bad</a><img src="data:text/html,boom" onerror="alert(1)"></p>',
     )
 
-    expect(html).toBe('<p>Hi<a>bad</a><img></p>')
+    // Presentational color survives (signature fidelity); the url()-bearing
+    // declaration and everything executable is gone.
+    expect(html).toBe('<p style="color: red">Hi<a>bad</a><img></p>')
   })
 
   it("removes svg, math, and other active embedded content", () => {
@@ -60,12 +62,29 @@ describe("sanitizeHtml", () => {
     expect(html).toContain('class="gmail_signature"')
     expect(html).toContain('<table><tbody><tr><td><img src="https://example.com/logo.png" width="120" height="48" alt="Acme &amp; Co"></td>')
     expect(html).toContain('<sup>TM</sup><sub>LLC</sub>')
-    expect(html).toContain('style="vertical-align: super; font-size: 10px"')
+    // Authored presentational styles now survive (signature Gmail-look
+    // fidelity); url()-bearing declarations are still dropped.
+    expect(html).toContain('style="vertical-align: super; font-size: 10px; color: red"')
     expect(html).not.toContain("onerror")
-    expect(html).not.toContain("color: red")
     expect(html).not.toContain("background-image")
   })
 
+  it("preserves authored signature typography and spacing styles, dropping unknown properties", () => {
+    const html = sanitizeHtml(
+      '<p style="font-family: \'pt serif\', serif; font-style: italic; font-size: 12px; color: rgb(102, 102, 102); line-height: 1.38; margin: 0 0 8px 0; position: fixed; z-index: 9999">2261 Market Street</p>',
+    )
+
+    expect(html).toContain("font-family: 'pt serif', serif")
+    expect(html).toContain("font-style: italic")
+    expect(html).toContain("font-size: 12px")
+    expect(html).toContain("color: rgb(102, 102, 102)")
+    expect(html).toContain("line-height: 1.38")
+    expect(html).toContain("margin: 0 0 8px 0")
+    // Layout-escape properties are not allowlisted.
+    expect(html).not.toContain("position")
+    expect(html).not.toContain("z-index")
+  })
+
   it("bounds image dimensions and inline font-size while preserving subscript alignment", () => {
     const html = sanitizeHtml(
       '<span style="vertical-align: sub; font-size: 500px">H2O</span><img src="https://example.com/x.png" width="99999" height="64" alt="x">',

package/src/internal/safe-html.ts

@@ -147,6 +147,39 @@ function sanitizeFontSize(value: string): string | null {
   return `${amount}${unit}`
 }
 
+// Presentational properties preserved so email signatures keep their authored
+// Gmail look (serif/italic/gray etc.) when rendered in the conversation panel.
+// Values are validated per-property; anything containing url()/expression()
+// (or any property not listed) is still dropped — these are text-presentation
+// only, no layout escape or resource loading.
+const COLOR_VALUE = /^(#[0-9a-f]{3,8}|rgba?\([\d\s,./%]+\)|[a-z]+)$/
+const LENGTH_BOX_VALUE = /^(-?[\d.]+(px|em|rem|%)?|auto|0)(\s+(-?[\d.]+(px|em|rem|%)?|auto|0)){0,3}$/
+const SAFE_TEXT_STYLE_PROPS: Record<string, RegExp> = {
+  color: COLOR_VALUE,
+  "background-color": COLOR_VALUE,
+  "font-family": /^[a-z0-9\s,'"-]+$/,
+  "font-style": /^(italic|normal|oblique)$/,
+  "font-weight": /^(bold|bolder|lighter|normal|[1-9]00)$/,
+  "font-variant": /^[a-z\s-]+$/,
+  "text-decoration": /^[a-z\s-]+$/,
+  "text-decoration-line": /^[a-z\s-]+$/,
+  "text-transform": /^(none|capitalize|uppercase|lowercase)$/,
+  "text-align": /^(left|right|center|justify)$/,
+  "letter-spacing": /^(normal|-?[\d.]+(px|em|rem)?)$/,
+  "line-height": /^(normal|[\d.]+(px|em|rem|%)?)$/,
+  "white-space": /^[a-z-]+$/,
+  margin: LENGTH_BOX_VALUE,
+  "margin-top": LENGTH_BOX_VALUE,
+  "margin-right": LENGTH_BOX_VALUE,
+  "margin-bottom": LENGTH_BOX_VALUE,
+  "margin-left": LENGTH_BOX_VALUE,
+  padding: LENGTH_BOX_VALUE,
+  "padding-top": LENGTH_BOX_VALUE,
+  "padding-right": LENGTH_BOX_VALUE,
+  "padding-bottom": LENGTH_BOX_VALUE,
+  "padding-left": LENGTH_BOX_VALUE,
+}
+
 function sanitizeStyle(value: string): string | null {
   const declarations: string[] = []
 
@@ -166,6 +199,12 @@ function sanitizeStyle(value: string): string | null {
     if (property === "font-size") {
       const fontSize = sanitizeFontSize(rawValue)
       if (fontSize) declarations.push(`font-size: ${fontSize}`)
+      continue
+    }
+
+    const allowedValue = SAFE_TEXT_STYLE_PROPS[property]
+    if (allowedValue?.test(rawValue)) {
+      declarations.push(`${property}: ${rawValue}`)
     }
   }