@agent-native/core 0.146.8 → 0.148.0

package/corpus/templates/plan/app/components/plan/wireframe/sanitize-html.ts

@@ -1,343 +0,0 @@
-/*
- * Render-layer sanitizer for model-authored wireframe HTML.
- *
- * The HTML artboard injects model HTML via dangerouslySetInnerHTML into the LIVE
- * page DOM (it can't be iframe-sandboxed because the rough overlay must measure
- * the laid-out elements). The schema's regex guard is necessary but not
- * sufficient — obfuscated schemes (java\tscript:, javascript:) slip past
- * string matching. This neutralizes the html at the render point using the
- * browser's OWN parser/URL normalization, which decodes entities and collapses
- * whitespace, so obfuscation can't survive:
- *   - drops dangerous elements (script/style/iframe/object/embed/...);
- *   - strips every on* event-handler attribute;
- *   - removes url attributes whose RESOLVED scheme isn't safe;
- *   - removes inline styles carrying expression()/javascript:/data:text/html.
- * Defense-in-depth: stored content should also be sanitized server-side, but
- * this guarantees the live DOM never carries an executable payload.
- */
-
-const BLOCKED_TAGS =
-  "script,style,iframe,object,embed,link,meta,base,form,noscript,frame,frameset,applet,marquee,portal";
-const DIAGRAM_BLOCKED_TAGS = `${BLOCKED_TAGS},math,foreignObject,foreignobject`;
-
-const URL_ATTRS = new Set([
-  "href",
-  "src",
-  "xlink:href",
-  "srcdoc",
-  "action",
-  "formaction",
-  "background",
-  "poster",
-  "data",
-  "ping",
-]);
-
-const SAFE_SCHEMES = new Set(["http:", "https:", "mailto:", "tel:", "ftp:"]);
-
-const WHITESPACE = /\s+/g;
-const HAS_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
-const SAFE_DATA_IMAGE = /^data:image\/(png|jpe?g|gif|webp);/i;
-
-function isSafeUrl(value: string): boolean {
-  // Strip whitespace for scheme detection ONLY (the browser collapses these when
-  // resolving too, so obfuscated schemes like "java\tscript:" can't hide). The
-  // original attribute is left untouched unless we decide to drop it.
-  const v = (value || "").replace(WHITESPACE, "");
-  if (
-    v === "" ||
-    v.startsWith("#") ||
-    v.startsWith("/") ||
-    v.startsWith("./") ||
-    v.startsWith("../")
-  ) {
-    return true;
-  }
-  if (!HAS_SCHEME.test(v)) return true; // no scheme => relative, safe
-  try {
-    const a = document.createElement("a");
-    a.href = v; // browser decodes the scheme + normalizes
-    const proto = a.protocol.toLowerCase();
-    // Allow only safe raster data images; block data:image/svg+xml (can script)
-    // and data:text/html.
-    if (proto === "data:") return SAFE_DATA_IMAGE.test(a.href);
-    return SAFE_SCHEMES.has(proto);
-  } catch {
-    return false;
-  }
-}
-
-const DANGEROUS_STYLE =
-  /(expression\s*\(|javascript:|vbscript:|url\s*\(\s*['"]?\s*(?:javascript|vbscript|data:text\/html))/i;
-const DANGEROUS_CSS =
-  /(@(?:import|font-face|keyframes|page|namespace|charset)\b|expression\s*\(|javascript:|vbscript:|data:text\/html|data:image\/svg\+xml|<\/?\s*(?:script|style)\b)/i;
-const DANGEROUS_VIEWPORT_CSS =
-  /(?:^|[;{\s])position\s*:\s*(?:fixed|sticky)\b|(?:^|[;{\s])z-index\s*:\s*[1-9]\d{4,}\b/i;
-
-function decodeCssSafetyEscapes(value: string): string {
-  return value.replace(/\\([0-9a-fA-F]{1,6}\s?|.)/g, (_match, escaped) => {
-    const hex = String(escaped).match(/^[0-9a-fA-F]{1,6}/)?.[0];
-    if (hex) {
-      const point = Number.parseInt(hex, 16);
-      return Number.isFinite(point) ? String.fromCodePoint(point) : "";
-    }
-    return String(escaped)[0] ?? "";
-  });
-}
-
-function cssSafetyText(value: string): string {
-  return decodeCssSafetyEscapes(value)
-    .toLowerCase()
-    .replace(/[\u0000-\u0020]+/g, "");
-}
-
-type SanitizeElementOptions = {
-  stripRuntimeDirectives?: boolean;
-  stripWireframeThemeClasses?: boolean;
-};
-
-const TAILWIND_THEME_COLORS =
-  /^(?:bg|text|border|ring|outline|divide|placeholder|from|via|to|accent|caret|decoration|fill|stroke)-(?:inherit|current|transparent|black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)(?:-\d{2,3})?(?:\/[\d.]+)?$/;
-const TAILWIND_ARBITRARY_THEME_COLOR =
-  /^(?:bg|text|border|ring|outline|divide|placeholder|from|via|to|accent|caret|decoration|fill|stroke)-\[/;
-const TAILWIND_SHADOW = /^shadow(?:$|-)/;
-
-function baseClassName(className: string): string {
-  let bracketDepth = 0;
-  let lastVariantSeparator = -1;
-  for (let index = 0; index < className.length; index += 1) {
-    const char = className[index];
-    if (char === "[") bracketDepth += 1;
-    if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
-    if (char === ":" && bracketDepth === 0) lastVariantSeparator = index;
-  }
-  return className.slice(lastVariantSeparator + 1);
-}
-
-function isWireframeThemeClass(className: string): boolean {
-  const base = baseClassName(className);
-  return (
-    TAILWIND_THEME_COLORS.test(base) ||
-    TAILWIND_ARBITRARY_THEME_COLOR.test(base) ||
-    TAILWIND_SHADOW.test(base)
-  );
-}
-
-function stripWireframeThemeClasses(value: string): string {
-  return value
-    .split(/\s+/)
-    .filter(Boolean)
-    .filter((className) => !isWireframeThemeClass(className))
-    .join(" ");
-}
-
-/** Conservative no-DOM fallback for any non-browser code path (SSR). */
-function fallbackStrip(html: string, options?: SanitizeElementOptions): string {
-  // Drop the whole url attribute if its value (whitespace/control-stripped)
-  // carries a dangerous scheme. Mirrors the DOM path for the rare no-DOMParser
-  // case; entity-obfuscation isn't decoded here (the live DOM path handles it).
-  const stripScheme = (m: string, dq?: string, sq?: string, uq?: string) => {
-    const v = (dq ?? sq ?? uq ?? "").replace(/[\s\u0000-\u001f]+/g, "");
-    return /^(?:javascript|vbscript):|^data:text\/html/i.test(v) ? "" : m;
-  };
-  let out = html
-    .replace(
-      /<\/?(?:script|style|iframe|object|embed|link|meta|base|form|noscript|frame|frameset|applet|marquee|portal)\b[^>]*>/gi,
-      "",
-    )
-    .replace(/\son[a-z][\w:-]*\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "")
-    .replace(
-      /\s(?:href|src|xlink:href|action|formaction|poster|background|data|ping)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi,
-      stripScheme,
-    )
-    .replace(/\sstyle\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, (m) =>
-      DANGEROUS_STYLE.test(m) ? "" : m,
-    );
-  if (options?.stripWireframeThemeClasses) {
-    out = out.replace(
-      /\sclass\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi,
-      (_match, doubleQuoted, singleQuoted, bare) => {
-        const next = stripWireframeThemeClasses(
-          doubleQuoted ?? singleQuoted ?? bare ?? "",
-        );
-        return next ? ` class="${next}"` : "";
-      },
-    );
-  }
-  return out;
-}
-
-export function sanitizeWireframeHtml(
-  html: string | undefined,
-  options?: { preserveThemeClasses?: boolean },
-): string {
-  if (!html) return "";
-  const stripWireframeThemeClasses = !options?.preserveThemeClasses;
-  if (typeof DOMParser === "undefined" || typeof document === "undefined") {
-    return fallbackStrip(html, { stripWireframeThemeClasses });
-  }
-  const doc = new DOMParser().parseFromString(html, "text/html");
-  doc.querySelectorAll(BLOCKED_TAGS).forEach((el) => el.remove());
-  sanitizeElementAttributes(doc.body, { stripWireframeThemeClasses });
-  return doc.body.innerHTML;
-}
-
-export function sanitizeDiagramHtml(html: string | undefined): string {
-  if (!html) return "";
-  if (typeof DOMParser === "undefined" || typeof document === "undefined") {
-    return fallbackStrip(html)
-      .replace(/<\/?\s*(?:math|foreignObject|foreignobject)\b[^>]*>/gi, "")
-      .replace(
-        /\s(?:@[\w:.-]+|x-on:[\w:.-]+|:on[\w:.-]+|x-bind:on[\w:.-]+|:style|x-bind:style)\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi,
-        "",
-      );
-  }
-  const doc = new DOMParser().parseFromString(html, "text/html");
-  doc.querySelectorAll(DIAGRAM_BLOCKED_TAGS).forEach((el) => el.remove());
-  sanitizeElementAttributes(doc.body, { stripRuntimeDirectives: true });
-  return doc.body.innerHTML;
-}
-
-export function sanitizeWireframeCss(css: string | undefined): string {
-  if (!css) return "";
-  return css
-    .split("\n")
-    .filter((line) => {
-      const decoded = decodeCssSafetyEscapes(line);
-      const compact = cssSafetyText(line);
-      return !(
-        DANGEROUS_CSS.test(line) ||
-        DANGEROUS_CSS.test(decoded) ||
-        DANGEROUS_VIEWPORT_CSS.test(decoded) ||
-        /(?:javascript|vbscript):|data:(?:text\/html|image\/svg\+xml)|expression\(|url\(['"]?(?:javascript|vbscript|data:(?:text\/html|image\/svg\+xml))/.test(
-          compact,
-        )
-      );
-    })
-    .join("\n")
-    .replace(/\bjava\s*script\s*:/gi, "")
-    .replace(/\bvb\s*script\s*:/gi, "")
-    .replace(/\bdata\s*:\s*(?:text\/html|image\/svg\+xml)/gi, "");
-}
-
-export function scopeDesignCss(css: string, scopeSelector: string): string {
-  if (!css.trim()) return "";
-  return css.replace(
-    /(^|[{}])\s*([^@{}][^{}]*)\{/g,
-    (_match, boundary: string, selectors: string) => {
-      const scoped = splitSelectorList(selectors)
-        .map((selector) => selector.trim())
-        .filter(Boolean)
-        .map((selector) => {
-          if (selector.startsWith(scopeSelector)) return selector;
-          if (
-            selector === ":root" ||
-            selector === "html" ||
-            selector === "body"
-          )
-            return scopeSelector;
-          return `${scopeSelector} ${selector}`;
-        })
-        .join(", ");
-      return `${boundary} ${scoped} {`;
-    },
-  );
-}
-
-function splitSelectorList(selectors: string): string[] {
-  const parts: string[] = [];
-  let current = "";
-  let parenDepth = 0;
-  let bracketDepth = 0;
-  let quote: '"' | "'" | null = null;
-  let escaped = false;
-
-  for (const char of selectors) {
-    current += char;
-    if (escaped) {
-      escaped = false;
-      continue;
-    }
-    if (char === "\\") {
-      escaped = true;
-      continue;
-    }
-    if (quote) {
-      if (char === quote) quote = null;
-      continue;
-    }
-    if (char === '"' || char === "'") {
-      quote = char;
-      continue;
-    }
-    if (char === "[") {
-      bracketDepth += 1;
-      continue;
-    }
-    if (char === "]") {
-      bracketDepth = Math.max(0, bracketDepth - 1);
-      continue;
-    }
-    if (char === "(") {
-      parenDepth += 1;
-      continue;
-    }
-    if (char === ")") {
-      parenDepth = Math.max(0, parenDepth - 1);
-      continue;
-    }
-    if (char === "," && parenDepth === 0 && bracketDepth === 0) {
-      parts.push(current.slice(0, -1));
-      current = "";
-    }
-  }
-
-  parts.push(current);
-  return parts;
-}
-
-function sanitizeElementAttributes(
-  root: ParentNode,
-  options?: SanitizeElementOptions,
-) {
-  root.querySelectorAll<HTMLElement>("*").forEach((el) => {
-    for (const attr of Array.from(el.attributes)) {
-      const name = attr.name.toLowerCase();
-      if (name.startsWith("on")) {
-        el.removeAttribute(attr.name);
-        continue;
-      }
-      if (
-        options?.stripRuntimeDirectives &&
-        (name.startsWith("@") ||
-          name.startsWith("x-on:") ||
-          name.startsWith(":on") ||
-          name.startsWith("x-bind:on") ||
-          name === ":style" ||
-          name === "x-bind:style")
-      ) {
-        el.removeAttribute(attr.name);
-        continue;
-      }
-      if (URL_ATTRS.has(name) && !isSafeUrl(attr.value)) {
-        el.removeAttribute(attr.name);
-        continue;
-      }
-      if (name === "style" && DANGEROUS_STYLE.test(attr.value)) {
-        el.removeAttribute(attr.name);
-        continue;
-      }
-      if (name === "class" && options?.stripWireframeThemeClasses) {
-        const next = stripWireframeThemeClasses(attr.value);
-        if (next) {
-          el.setAttribute(attr.name, next);
-        } else {
-          el.removeAttribute(attr.name);
-        }
-      }
-    }
-    if (el instanceof HTMLTemplateElement) {
-      sanitizeElementAttributes(el.content, options);
-    }
-  });
-}