@velumo/renderer-dom 0.1.0-beta.0

package/src/html-sanitize.ts

@@ -0,0 +1,446 @@
+export interface HtmlSanitizeElement {
+  setAttribute(name: string, value: string): void;
+  textContent: string;
+  parentNode?: unknown;
+}
+
+export interface HtmlSanitizeNode {
+  textContent: string;
+  parentNode?: unknown;
+}
+
+export interface HtmlSanitizeFactories {
+  createElement(tagName: string): HtmlSanitizeElement;
+  createText(text: string): HtmlSanitizeNode;
+  textElement(tagName: string, text: string): HtmlSanitizeElement;
+}
+
+const TAG_WHITELIST = new Set<string>([
+  "strong",
+  "em",
+  "b",
+  "i",
+  "u",
+  "code",
+  "br",
+  "p",
+  "span",
+]);
+
+const ATTRIBUTE_WHITELIST = new Set<string>([]);
+
+// Tags whose content must be consumed as opaque raw text (no nested parsing,
+// no content emission). Mirrors the HTML5 spec's raw-text/script-data content
+// models. When the tokenizer encounters an open tag with one of these names,
+// it scans forward to the matching case-insensitive close tag and discards
+// everything in between. This closes the `<script>alert(1)</script>` payload
+// leak that would otherwise happen with a stateless tokenizer.
+const RAW_TEXT_TAGS = new Set<string>([
+  "script",
+  "style",
+  "noscript",
+  "iframe",
+  "noembed",
+  "noframes",
+  "plaintext",
+  "xmp",
+]);
+
+type Token =
+  | { kind: "text"; value: string }
+  | { kind: "tag-open"; tagName: string; selfClosing: boolean }
+  | { kind: "tag-close"; tagName: string };
+
+function decodeNumericEntity(
+  source: string,
+  startIndex: number,
+): { value: string; nextIndex: number } | null {
+  if (source[startIndex] !== "&" || source[startIndex + 1] !== "#") {
+    return null;
+  }
+
+  let cursor = startIndex + 2;
+  let isHex = false;
+  if (source[cursor] === "x") {
+    isHex = true;
+    cursor++;
+  }
+
+  const digitsStart = cursor;
+  const digitPattern = isHex ? /[0-9a-fA-F]/ : /[0-9]/;
+  while (cursor < source.length && digitPattern.test(source[cursor])) {
+    cursor++;
+  }
+
+  if (cursor === digitsStart) {
+    return null;
+  }
+  if (source[cursor] !== ";") {
+    return null;
+  }
+
+  const digits = source.slice(digitsStart, cursor);
+  const code = parseInt(digits, isHex ? 16 : 10);
+  if (!Number.isFinite(code) || code < 0 || code > 0x10ffff) {
+    return null;
+  }
+
+  return { value: String.fromCodePoint(code), nextIndex: cursor + 1 };
+}
+
+function readCharInTagContext(
+  source: string,
+  index: number,
+): { value: string; nextIndex: number } {
+  if (source[index] === "&") {
+    const decoded = decodeNumericEntity(source, index);
+    if (decoded !== null) {
+      return decoded;
+    }
+  }
+  return { value: source[index], nextIndex: index + 1 };
+}
+
+function tokenize(source: string): Token[] {
+  const tokens: Token[] = [];
+  let textBuffer = "";
+  let i = 0;
+  const n = source.length;
+
+  const flushText = () => {
+    if (textBuffer.length > 0) {
+      tokens.push({ kind: "text", value: textBuffer });
+      textBuffer = "";
+    }
+  };
+
+  while (i < n) {
+    const ch = source[i];
+
+    if (ch !== "<") {
+      textBuffer += ch;
+      i++;
+      continue;
+    }
+
+    // Encountered `<` — possible tag opening.
+    const tagStart = i;
+    const next = source[i + 1];
+
+    // Comment: <!-- ... -->
+    if (next === "!" && source[i + 2] === "-" && source[i + 3] === "-") {
+      const closeIdx = source.indexOf("-->", i + 4);
+      if (closeIdx === -1) {
+        // Unterminated comment — recover as verbatim text.
+        textBuffer += source.slice(i);
+        i = n;
+        continue;
+      }
+      flushText();
+      i = closeIdx + 3;
+      continue;
+    }
+
+    // CDATA: <![CDATA[ ... ]]>
+    if (
+      next === "!" &&
+      source[i + 2] === "[" &&
+      source.slice(i + 3, i + 9) === "CDATA["
+    ) {
+      const closeIdx = source.indexOf("]]>", i + 9);
+      if (closeIdx === -1) {
+        // Unterminated CDATA — recover as verbatim text.
+        textBuffer += source.slice(i);
+        i = n;
+        continue;
+      }
+      flushText();
+      i = closeIdx + 3;
+      continue;
+    }
+
+    // DOCTYPE or other <!...> — drop entire construct up to next `>`.
+    if (next === "!") {
+      const closeIdx = source.indexOf(">", i + 2);
+      if (closeIdx === -1) {
+        // Malformed — drop partial.
+        flushText();
+        i = n;
+        continue;
+      }
+      flushText();
+      i = closeIdx + 1;
+      continue;
+    }
+
+    // Processing instruction: <?...?>
+    if (next === "?") {
+      const closeIdx = source.indexOf("?>", i + 2);
+      if (closeIdx === -1) {
+        flushText();
+        i = n;
+        continue;
+      }
+      flushText();
+      i = closeIdx + 2;
+      continue;
+    }
+
+    // Tag close: </name>
+    if (next === "/") {
+      i += 2;
+      let tagName = "";
+      while (i < n) {
+        const c = source[i];
+        if (c === ">") {
+          break;
+        }
+        if (/\s/.test(c)) {
+          // Skip whitespace inside close-tag — continue until `>`.
+          i++;
+          continue;
+        }
+        const read = readCharInTagContext(source, i);
+        tagName += read.value;
+        i = read.nextIndex;
+      }
+      if (i >= n) {
+        // EOF before `>` — drop partial close-tag.
+        textBuffer = "";
+        continue;
+      }
+      i++; // consume `>`
+      flushText();
+      tokens.push({ kind: "tag-close", tagName: tagName.toLowerCase() });
+      continue;
+    }
+
+    // Tag open: <name [attrs...]>
+    i++; // consume `<`
+    let tagName = "";
+    let selfClosing = false;
+    let inTagBody = true;
+
+    // Read tag name (may be empty if first char is whitespace or `>`).
+    while (i < n && inTagBody) {
+      const c = source[i];
+      if (c === ">") {
+        i++;
+        inTagBody = false;
+        break;
+      }
+      if (c === "/") {
+        selfClosing = true;
+        i++;
+        // After `/` expect `>`; consume any whitespace then `>`.
+        while (i < n && source[i] !== ">") {
+          if (/\s/.test(source[i])) {
+            i++;
+            continue;
+          }
+          // Non-whitespace, non-`>` after `/` — drop tag.
+          break;
+        }
+        if (i < n && source[i] === ">") {
+          i++;
+        }
+        inTagBody = false;
+        break;
+      }
+      if (/\s/.test(c)) {
+        // Transition to attributes — consume the whitespace and break.
+        i++;
+        break;
+      }
+      const read = readCharInTagContext(source, i);
+      // A decoded character drives state transitions identically to a literal
+      // character of the same code point — including transition triggers
+      // (whitespace, `>`, `/`).
+      if (/\s/.test(read.value)) {
+        i = read.nextIndex;
+        break;
+      }
+      if (read.value === ">") {
+        i = read.nextIndex;
+        inTagBody = false;
+        break;
+      }
+      if (read.value === "/") {
+        selfClosing = true;
+        i = read.nextIndex;
+        continue;
+      }
+      tagName += read.value;
+      i = read.nextIndex;
+    }
+
+    // If still in tag body (i.e., we hit whitespace and broke), we're now reading attributes.
+    while (i < n && inTagBody) {
+      const c = source[i];
+      if (c === ">") {
+        i++;
+        inTagBody = false;
+        break;
+      }
+      if (c === "/") {
+        selfClosing = true;
+        i++;
+        continue;
+      }
+      if (c === '"' || c === "'") {
+        // Read quoted attribute value — entity decode inside quotes for
+        // state-machine completeness; a decoded matching quote closes.
+        const quote = c;
+        i++;
+        while (i < n) {
+          const qc = source[i];
+          if (qc === "&") {
+            const decoded = decodeNumericEntity(source, i);
+            if (decoded !== null) {
+              if (decoded.value === quote) {
+                i = decoded.nextIndex;
+                break;
+              }
+              i = decoded.nextIndex;
+              continue;
+            }
+          }
+          if (qc === quote) {
+            i++;
+            break;
+          }
+          i++;
+        }
+        continue;
+      }
+      // Decode entities in attribute names too (for state-machine
+      // correctness; attribute names are discarded).
+      const read = readCharInTagContext(source, i);
+      // Decoded `>` ends the tag; decoded whitespace continues attributes.
+      if (read.value === ">") {
+        i = read.nextIndex;
+        inTagBody = false;
+        break;
+      }
+      i = read.nextIndex;
+    }
+
+    if (inTagBody) {
+      // EOF inside tag — drop partial tag.
+      textBuffer = "";
+      // But we already flushed text? No — we did NOT flush yet for the open tag path.
+      // Actually we need to ensure preceding text was preserved. The text up to
+      // tagStart is still in textBuffer. We want to drop it per spec ("text
+      // preceding `<` is still flushed" — wait, spec says text PRECEDING is
+      // still flushed). Re-read: "The text preceding `<` is still flushed."
+      // So we DO flush preceding text. But we did not flush in this path yet.
+      // Actually we need to preserve textBuffer that was accumulated BEFORE `<`.
+      // The `<` was at tagStart, and we accumulated text into textBuffer up to
+      // tagStart-1 in the TEXT loop. So textBuffer still has that preceding
+      // text. We should flush it.
+      flushText();
+      continue;
+    }
+
+    flushText();
+    const normalizedName = tagName.toLowerCase();
+    tokens.push({
+      kind: "tag-open",
+      tagName: normalizedName,
+      selfClosing,
+    });
+    void tagStart;
+
+    // Raw-text mode: if the opened tag is in RAW_TEXT_TAGS, consume content
+    // until matching case-insensitive close tag, then emit synthetic close
+    // token. The consumed content is NOT emitted as text. Uses the same
+    // entity-decoding char reader as the main tokenizer so close tags that
+    // are entity-obfuscated (e.g., </&#x73;cript>) still terminate.
+    if (RAW_TEXT_TAGS.has(normalizedName) && !selfClosing) {
+      let foundClose = false;
+      while (i < n) {
+        // Scan for `</` start.
+        if (source[i] === "<" && source[i + 1] === "/") {
+          // Try to read close-tag name using entity-aware reader.
+          let scan = i + 2;
+          let closeName = "";
+          while (scan < n) {
+            const ch = source[scan];
+            if (ch === ">") break;
+            if (/\s/.test(ch)) {
+              scan++;
+              continue;
+            }
+            const read = readCharInTagContext(source, scan);
+            closeName += read.value;
+            scan = read.nextIndex;
+          }
+          if (
+            scan < n &&
+            source[scan] === ">" &&
+            closeName.toLowerCase() === normalizedName
+          ) {
+            i = scan + 1;
+            tokens.push({ kind: "tag-close", tagName: normalizedName });
+            foundClose = true;
+            break;
+          }
+        }
+        i++;
+      }
+      if (!foundClose) {
+        i = n;
+      }
+    }
+  }
+
+  flushText();
+  return tokens;
+}
+
+export function sanitizeHtmlLayer(source: string): string {
+  const tokens = tokenize(source);
+  let output = "";
+
+  for (const token of tokens) {
+    switch (token.kind) {
+      case "text":
+        output += token.value;
+        break;
+      case "tag-open":
+        if (TAG_WHITELIST.has(token.tagName)) {
+          output += `<${token.tagName}>`;
+        }
+        break;
+      case "tag-close":
+        if (TAG_WHITELIST.has(token.tagName)) {
+          output += `</${token.tagName}>`;
+        }
+        break;
+    }
+  }
+
+  // Reference ATTRIBUTE_WHITELIST to keep the module-scope constant audit-visible
+  // even though the empty set means no attribute survives the emit pass.
+  void ATTRIBUTE_WHITELIST;
+
+  return output;
+}
+
+export function stripTags(source: string): string {
+  return source.replace(/<[^>]*>/g, "");
+}
+
+export function renderSafeHtml(
+  source: string,
+  factories: HtmlSanitizeFactories,
+): Array<HtmlSanitizeElement | HtmlSanitizeNode> {
+  const sanitized = sanitizeHtmlLayer(source);
+  const strongMatch = sanitized.match(/<strong[^>]*>([\s\S]*?)<\/strong>/i);
+
+  if (strongMatch !== null) {
+    return [factories.textElement("strong", stripTags(strongMatch[1]))];
+  }
+
+  return [factories.createText(stripTags(sanitized))];
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+export const rendererDomPackageName = "@velumo/renderer-dom";
+export {
+  defaultTheme,
+  defaultThemeCss,
+  defaultThemeId,
+} from "./default-theme.js";
+export { tokensToCssProperties } from "./theme-tokens.js";
+export { compileFontFaceCss, escapeCssString } from "./theme-fonts.js";
+export * from "./camera-adapter.js";
+export * from "./spatial-renderer.js";
+export { mountSlideThumbnail } from "./slide-thumbnail.js";
+export type {
+  SlideThumbnailOptions,
+  SlideThumbnailHandle,
+} from "./slide-thumbnail.js";
+export {
+  renderLayoutNode,
+  type LayoutRendererElement,
+  type LayoutRendererFactories,
+} from "./layout-renderer.js";
+export { DomRenderer } from "./dom-renderer.js";
+export type {
+  DomRendererOptions,
+  DomLayerRendererContext,
+} from "./dom-renderer.js";