@wdprlib/render 2.1.0 → 3.0.0

package/src/escape/css-style.ts

@@ -0,0 +1,78 @@
+import { isDangerousCssValue } from "./css-danger";
+import { normalizeCssValue } from "./css-normalize";
+
+/**
+ * Sanitize a `style` attribute value by removing dangerous declarations
+ * while preserving safe ones.
+ */
+export function sanitizeStyleValue(style: string): string {
+  const endsWithSemicolon = style.trimEnd().endsWith(";");
+
+  if (style.indexOf(";") === -1) {
+    return sanitizeSingleDeclaration(style.trim());
+  }
+
+  const safe: string[] = [];
+  for (const rawDecl of splitDeclarations(style)) {
+    const decl = sanitizeSingleDeclaration(rawDecl.trim());
+    if (decl) safe.push(decl);
+  }
+
+  if (safe.length === 0) return "";
+  return endsWithSemicolon ? safe.join(";") + ";" : safe.join(";");
+}
+
+function sanitizeSingleDeclaration(decl: string): string {
+  if (decl === "") return "";
+
+  const colonIdx = decl.indexOf(":");
+  if (colonIdx === -1) return "";
+
+  const property = decl.slice(0, colonIdx).trim();
+  const value = decl.slice(colonIdx + 1).trim();
+  if (isDangerousCssValue(value)) return "";
+
+  const normalisedProperty = normalizeCssValue(property);
+  if (normalisedProperty.startsWith("-moz-binding")) return "";
+  if (normalisedProperty === "behavior") return "";
+
+  return decl;
+}
+
+/**
+ * Split a CSS style attribute value into declarations, respecting
+ * parentheses and quoted strings.
+ */
+function splitDeclarations(style: string): string[] {
+  const out: string[] = [];
+  let start = 0;
+  let parenDepth = 0;
+  let quoteChar: string | null = null;
+
+  for (let i = 0; i < style.length; i++) {
+    const ch = style[i]!;
+    if (quoteChar !== null) {
+      if (ch === quoteChar) quoteChar = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quoteChar = ch;
+      continue;
+    }
+    if (ch === "(") {
+      parenDepth++;
+      continue;
+    }
+    if (ch === ")") {
+      if (parenDepth > 0) parenDepth--;
+      continue;
+    }
+    if (ch === ";" && parenDepth === 0) {
+      out.push(style.slice(start, i));
+      start = i + 1;
+      continue;
+    }
+  }
+  if (start < style.length) out.push(style.slice(start));
+  return out;
+}

package/src/escape/css-urls.ts

@@ -0,0 +1,76 @@
+export interface CssUrlToken {
+  inner: string;
+  malformed: boolean;
+}
+
+/**
+ * Allowlist check for a raw URL string extracted from a normalized `url(...)` token.
+ */
+export function isCssUrlAllowed(rawUrl: string): boolean {
+  let url = rawUrl;
+
+  if (url.length >= 2) {
+    const first = url[0];
+    const last = url[url.length - 1];
+    if ((first === '"' && last === '"') || (first === "'" && last === "'")) {
+      url = url.slice(1, -1);
+    }
+  }
+
+  if (url === "") return true;
+  if (url.startsWith("#")) return true;
+  if (url.startsWith("./") || url.startsWith("../")) return true;
+  if (url.startsWith("//")) return true;
+  if (url.startsWith("/")) return true;
+  if (url.startsWith("http://") || url.startsWith("https://")) return true;
+
+  if (url.startsWith("data:image/")) {
+    const after = url.slice("data:image/".length);
+    const sep = Math.min(
+      after.indexOf(";") === -1 ? after.length : after.indexOf(";"),
+      after.indexOf(",") === -1 ? after.length : after.indexOf(","),
+    );
+    const mime = after.slice(0, sep);
+    if (mime === "png" || mime === "jpeg" || mime === "jpg" || mime === "gif" || mime === "webp") {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Extract every `url(...)` invocation from a normalized CSS value.
+ */
+export function* iterateCssUrls(normalized: string): Generator<CssUrlToken> {
+  let searchPos = 0;
+  while (searchPos < normalized.length) {
+    const idx = normalized.indexOf("url(", searchPos);
+    if (idx === -1) return;
+
+    let depth = 1;
+    let quoteChar: string | null = null;
+    let i = idx + 4;
+    while (i < normalized.length && depth > 0) {
+      const ch = normalized[i];
+      if (quoteChar !== null) {
+        if (ch === quoteChar) quoteChar = null;
+      } else if (ch === '"' || ch === "'") {
+        quoteChar = ch;
+      } else if (ch === "(") {
+        depth++;
+      } else if (ch === ")") {
+        depth--;
+      }
+      i++;
+    }
+
+    if (depth > 0) {
+      yield { inner: normalized.slice(idx + 4), malformed: true };
+      return;
+    }
+
+    yield { inner: normalized.slice(idx + 4, i - 1), malformed: false };
+    searchPos = i;
+  }
+}

package/src/escape/css.ts

@@ -0,0 +1,4 @@
+export { isValidCssColor, sanitizeCssColor } from "./css-colors";
+export { normalizeCssValue } from "./css-normalize";
+export { isDangerousCssValue } from "./css-danger";
+export { sanitizeStyleValue } from "./css-style";

package/src/escape/email.ts

@@ -0,0 +1,22 @@
+/**
+ * Validate that a string looks like a safe email address.
+ *
+ * Uses a deliberately simple pattern that accepts the vast majority of
+ * real-world addresses while blocking characters that could enable
+ * injection attacks when the address is used in a `mailto:` link.
+ *
+ * The percent character (`%`) is intentionally disallowed because
+ * `mailto:` URLs undergo percent-decoding, allowing an attacker to
+ * inject headers (e.g. `a%0d%0abcc%3aevil@example.com` decodes to
+ * a BCC header injection).
+ *
+ * @param email - The email string to validate.
+ * @returns `true` if the email matches the safe pattern.
+ */
+export function isValidEmail(email: string): boolean {
+  // Simple email pattern: local@domain
+  // - local: alphanumeric, dots, underscores, hyphens, plus signs (NO percent)
+  // - domain: alphanumeric, dots, hyphens
+  // Does NOT allow: spaces, colons, angle brackets, percent, or other special chars
+  return /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
+}

package/src/escape/html.ts

@@ -0,0 +1,68 @@
+export function escapeHtml(text: string): string {
+  let start = 0;
+  let escaped = "";
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    let replacement: string | null = null;
+    if (char === "&") {
+      replacement = "&amp;";
+    } else if (char === "<") {
+      replacement = "&lt;";
+    } else if (char === ">") {
+      replacement = "&gt;";
+    }
+
+    if (replacement) {
+      if (start < i) {
+        escaped += text.slice(start, i);
+      }
+      escaped += replacement;
+      start = i + 1;
+    }
+  }
+
+  if (start === 0) {
+    return text;
+  }
+  return start < text.length ? escaped + text.slice(start) : escaped;
+}
+
+export function escapeAttr(value: string): string {
+  if (
+    value.indexOf("&") === -1 &&
+    value.indexOf("<") === -1 &&
+    value.indexOf(">") === -1 &&
+    value.indexOf('"') === -1 &&
+    value.indexOf("'") === -1
+  ) {
+    return value;
+  }
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function escapeStyleContent(css: string): string {
+  if (css.indexOf("</") === -1) {
+    return css;
+  }
+  return css.replace(/<\/style/gi, "<\\/style");
+}
+
+export function escapeJsString(value: string): string {
+  return value
+    .replace(/\\/g, "\\\\")
+    .replace(/'/g, "\\x27")
+    .replace(/"/g, "\\x22")
+    .replace(/</g, "\\x3c")
+    .replace(/>/g, "\\x3e")
+    .replace(/&/g, "\\x26")
+    .replace(/\n/g, "\\n")
+    .replace(/\r/g, "\\r")
+    .replace(/\u2028/g, "\\u2028")
+    .replace(/\u2029/g, "\\u2029");
+}

package/src/escape/index.ts

@@ -0,0 +1,15 @@
+/**
+ *
+ * HTML, CSS, URL, and attribute sanitization utilities for the render pipeline.
+ *
+ * Every piece of user-supplied content that flows into the HTML output must
+ * pass through one of these functions to prevent Cross-Site Scripting (XSS)
+ * and CSS injection attacks.
+ *
+ * @module
+ */
+export { escapeAttr, escapeHtml, escapeJsString, escapeStyleContent } from "./html";
+export { isDangerousUrl } from "./url";
+export { isValidCssColor, sanitizeCssColor, isDangerousCssValue, sanitizeStyleValue } from "./css";
+export { isValidEmail } from "./email";
+export { isSafeAttribute, sanitizeAttributes } from "./attributes";

package/src/escape/url.ts

@@ -0,0 +1,18 @@
+export function isDangerousUrl(value: string): boolean {
+  const normalized = stripControlAndWhitespace(value);
+  return /^(javascript|data|vbscript):/i.test(normalized);
+}
+
+const WHITESPACE = /\s/;
+
+function stripControlAndWhitespace(value: string): string {
+  let result = "";
+  for (const char of value) {
+    const code = char.charCodeAt(0);
+    if (WHITESPACE.test(char) || code <= 0x1f || (code >= 0x7f && code <= 0x9f)) {
+      continue;
+    }
+    result += char;
+  }
+  return result;
+}

package/src/libs/highlighter/engine/end-pattern.ts

@@ -0,0 +1,26 @@
+import type { LanguageDefinition } from "../types";
+import { escapeRegex, matchingBrackets } from "./utils";
+
+export function buildEndPattern(
+  def: LanguageDefinition,
+  prevState: number,
+  patternIndex: number,
+  count: number,
+  captureIndex: number,
+  match: RegExpExecArray,
+  endRe: RegExp | undefined,
+): RegExp | null {
+  if (!def.subst[prevState]?.[patternIndex] || !endRe) {
+    return endRe ?? null;
+  }
+
+  let epSource = endRe.source;
+  for (let k = 0; k <= count; k++) {
+    const subIdx = captureIndex + k;
+    if (subIdx >= match.length || match[subIdx] == null) break;
+    const quoted = escapeRegex(match[subIdx]!);
+    epSource = epSource.replace(`%${k}%`, quoted);
+    epSource = epSource.replace(`%b${k}%`, matchingBrackets(quoted));
+  }
+  return new RegExp(epSource, endRe.flags);
+}

package/src/libs/highlighter/engine/html.ts

@@ -0,0 +1,19 @@
+/**
+ * Escape HTML special characters for use inside highlighted code spans.
+ */
+export function escapeHighlightHtml(str: string): string {
+  if (
+    str.indexOf("&") === -1 &&
+    str.indexOf("<") === -1 &&
+    str.indexOf(">") === -1 &&
+    str.indexOf('"') === -1
+  ) {
+    return str;
+  }
+
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}

package/src/libs/highlighter/engine/index.ts

@@ -0,0 +1,3 @@
+export { renderTokens } from "./render";
+export { tokenize } from "./tokenizer";
+export type { HighlightToken } from "./token";

package/src/libs/highlighter/engine/keywords.ts

@@ -0,0 +1,22 @@
+import type { LanguageDefinition } from "../types";
+
+export function resolveKeywordClass(
+  def: LanguageDefinition,
+  state: number,
+  patternIndex: number,
+  matchStr: string,
+  fallback: string,
+): string {
+  let kwDef = def.keywords[state]?.[patternIndex];
+  if (!kwDef || kwDef === -1 || typeof kwDef !== "object" || Object.keys(kwDef).length === 0) {
+    kwDef = def.keywords[-1]?.[patternIndex];
+  }
+  if (kwDef && kwDef !== -1 && typeof kwDef === "object") {
+    for (const [group, re] of Object.entries(kwDef)) {
+      if ((re as RegExp).test(matchStr)) {
+        return def.kwmap[group] ?? fallback;
+      }
+    }
+  }
+  return fallback;
+}

package/src/libs/highlighter/engine/parts.ts

@@ -0,0 +1,36 @@
+import type { HighlightToken } from "./token";
+
+export function buildPartTokens(
+  str: string,
+  match: RegExpExecArray,
+  partDef: Record<number, string>,
+  captureIndex: number,
+  count: number,
+  groupStart: number,
+  matchStr: string,
+  inner: string,
+): HighlightToken[] {
+  const parts: HighlightToken[] = [];
+  let partpos = groupStart;
+  for (let j = 1; j <= count; j++) {
+    const subIdx = j + captureIndex;
+    if (subIdx >= match.length || match[subIdx] == null || match[subIdx] === "") continue;
+    const subStr = match[subIdx]!;
+    const subStart = str.indexOf(subStr, partpos);
+    if (subStart < 0) continue;
+    if (partDef[j]) {
+      if (subStart > partpos) {
+        parts.unshift({ class: inner, content: str.substring(partpos, subStart) });
+      }
+      parts.unshift({ class: partDef[j]!, content: subStr });
+    }
+    partpos = subStart + subStr.length;
+  }
+  if (partpos < groupStart + matchStr.length) {
+    parts.unshift({
+      class: inner,
+      content: str.substring(partpos, groupStart + matchStr.length),
+    });
+  }
+  return parts;
+}

package/src/libs/highlighter/engine/preprocess.ts

@@ -0,0 +1,10 @@
+/**
+ * Preprocess source code the same way Text_Highlighter's HTML renderer does.
+ */
+export function preprocessHighlightInput(input: string): string {
+  return input
+    .replace(/\r\n/g, "\n")
+    .replace(/^$/gm, " ")
+    .replace(/\t/g, "    ")
+    .replace(/\s+$/, "");
+}

package/src/libs/highlighter/engine/render.ts

@@ -0,0 +1,31 @@
+import { escapeHighlightHtml } from "./html";
+import type { HighlightToken } from "./token";
+
+/**
+ * Render an array of tokens to HTML with `hl-*` class spans.
+ */
+export function renderTokens(tokens: HighlightToken[]): string {
+  if (tokens.length === 0) return "";
+
+  let html = "";
+  let lastClass = "";
+
+  for (const token of tokens) {
+    if (token.content.length === 0) continue;
+    const escaped = escapeHighlightHtml(token.content);
+    if (token.class !== lastClass) {
+      if (lastClass) {
+        html += "</span>";
+      }
+      html += `<span class="hl-${token.class}">`;
+      lastClass = token.class;
+    }
+    html += escaped;
+  }
+
+  if (lastClass) {
+    html += "</span>";
+  }
+
+  return `<div class="hl-main"><pre>${html}</pre></div>`;
+}

package/src/libs/highlighter/engine/token.ts

@@ -0,0 +1,7 @@
+/** A single highlighted token with its CSS class and text content. */
+export interface HighlightToken {
+  /** CSS class name suffix (used as `hl-{class}`). */
+  class: string;
+  /** The literal text content of this token. */
+  content: string;
+}