npm - @cosmicdrift/kumiko-headless - Versions diffs - 0.122.5 → 0.123.0 - Mend

@cosmicdrift/kumiko-headless 0.122.5 → 0.123.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/package.json +2 -2
package/src/apex/index.ts +12 -5
package/src/format/__tests__/html-template.test.ts +47 -0
package/src/format/html-template.ts +49 -0
package/src/format/index.ts +1 -0
package/src/index.ts +10 -1

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-headless",
-  "version": "0.122.5",
+  "version": "0.123.0",
   "description": "Headless UI logic for Kumiko — Dispatcher contract, Form-Controller, View-Model, Nav-Resolver. Plattform- und React-frei; jeder Renderer (renderer, renderer-web, renderer-native, …) komponiert darauf.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -32,7 +32,7 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.122.5",
+    "@cosmicdrift/kumiko-framework": "0.123.0",
     "zod": "^4.4.3"
   },
   "publishConfig": {

package/src/apex/index.ts CHANGED Viewed

@@ -203,12 +203,18 @@ export type ApexPage = {
   readonly footer: ApexFooter;
 };
+// JSON in <script>-Kontext: `<` als < serialisieren, damit weder
+// `</script>` noch `<!--` aus dem Block ausbrechen kann (JSON bleibt valide).
+function scriptSafeJsonHtml(value: unknown): string {
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
 function dim(img: ApexImage): string {
   return `${img.width !== undefined ? ` width="${img.width}"` : ""}${img.height !== undefined ? ` height="${img.height}"` : ""}`;
 }
-function svgIcon(inner: string): string {
-  return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
+function svgIcon(innerHtml: string): string {
+  return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${innerHtml}</svg>`;
 }
 function renderCta(cta: ApexCta): string {
@@ -446,7 +452,8 @@ function renderFooter(f: ApexFooter): string {
 export function renderApexPage(page: ApexPage): string {
   const { head, brand } = page;
   const theme = page.theme ?? "light";
-  const css = (brand.fontFaceCss ?? "") + brand.tokensCss + APEX_STRUCTURAL_CSS;
+  // Brand-CSS ist app-authored (Trust-Boundary siehe Datei-Header), kein Tenant-Input.
+  const cssHtml = (brand.fontFaceCss ?? "") + brand.tokensCss + APEX_STRUCTURAL_CSS;
   const sections = page.sections.map(renderSection).join("\n\n    ");
   const ogUrl =
     head.canonicalUrl !== undefined
@@ -495,7 +502,7 @@ export function renderApexPage(page: ApexPage): string {
     .join("");
   const schema =
     head.schemaJson !== undefined
-      ? `\n    <script type="application/ld+json">${JSON.stringify(head.schemaJson)}</script>`
+      ? `\n    <script type="application/ld+json">${scriptSafeJsonHtml(head.schemaJson)}</script>`
       : "";
   return `<!doctype html>
 <html lang="${escapeHtml(head.lang)}">
@@ -507,7 +514,7 @@ export function renderApexPage(page: ApexPage): string {
     <meta property="og:title" content="${escapeHtml(head.title)}" />
     <meta property="og:description" content="${escapeHtml(head.description)}" />
     <meta property="og:type" content="website" />${ogUrl}${ogImage}${siteName}${locale}${twitterCard}${twitterSite}${favicon}${canonical}${alternates}${robots}${preconnects}${schema}
-    <style>${css}</style>
+    <style>${cssHtml}</style>
   </head>
   <body${theme === "dark" ? ` class="apex-dark"` : ""}>
     ${renderApexHeader(page.header)}

package/src/format/__tests__/html-template.test.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import { describe, expect, test } from "bun:test";
+import { html, RawHtml, raw } from "../html-template";
+const XSS = `<script>alert("1")</script>`;
+describe("html tagged template", () => {
+  test("escapes string interpolations", () => {
+    expect(html`<p>${XSS}</p>`.toString()).toBe(
+      "<p>&lt;script&gt;alert(&quot;1&quot;)&lt;/script&gt;</p>",
+    );
+  });
+  test("escapes attribute breakouts (double quotes)", () => {
+    const href = `"><img src=x onerror=alert(1)>`;
+    const out = html`<a href="${href}">x</a>`.toString();
+    expect(out).not.toContain('"><img');
+    expect(out).toContain("&quot;&gt;&lt;img");
+  });
+  test("raw() passes prerendered markup through unchanged", () => {
+    expect(html`<div>${raw("<b>ok</b>")}</div>`.toString()).toBe("<div><b>ok</b></div>");
+  });
+  test("nested html`...` fragments are not double-escaped", () => {
+    const item = html`<li>${"a & b"}</li>`;
+    expect(html`<ul>${item}</ul>`.toString()).toBe("<ul><li>a &amp; b</li></ul>");
+  });
+  test("arrays are joined with each element escaped", () => {
+    const items = ["<x>", "y"].map((v) => html`<li>${v}</li>`);
+    expect(html`<ul>${items}</ul>`.toString()).toBe("<ul><li>&lt;x&gt;</li><li>y</li></ul>");
+  });
+  test("null and undefined render as empty string", () => {
+    expect(html`<p>${null}${undefined}</p>`.toString()).toBe("<p></p>");
+  });
+  test("numbers and booleans render via String()", () => {
+    expect(html`<td>${42}${false}</td>`.toString()).toBe("<td>42false</td>");
+  });
+  test("toString() makes fragments usable in plain string contexts", () => {
+    const fragment = html`<p>${"<i>"}</p>`;
+    expect(`${fragment}`).toBe("<p>&lt;i&gt;</p>");
+    expect(fragment).toBeInstanceOf(RawHtml);
+  });
+});

package/src/format/html-template.ts ADDED Viewed

@@ -0,0 +1,49 @@
+// html`...` — Tagged-Template, das jede Interpolation automatisch HTML-escaped.
+// Macht Escaping strukturell statt per-Callsite-Konvention: vergessen ist
+// unmöglich, bewusst rohes HTML braucht ein explizites raw(). Der
+// HTML-Escape-Guard (kumiko-guards) akzeptiert html`...` als safe.
+import { escapeHtml } from "./escape";
+export class RawHtml {
+  readonly html: string;
+  constructor(html: string) {
+    this.html = html;
+  }
+  toString(): string {
+    return this.html;
+  }
+}
+/** Markiert bereits escaptes/vertrauenswürdiges Markup für html`...`. */
+export function raw(html: string): RawHtml {
+  return new RawHtml(html);
+}
+export type HtmlValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | RawHtml
+  | ReadonlyArray<HtmlValue>;
+function renderValue(value: HtmlValue): string {
+  if (value === null || value === undefined) return "";
+  if (value instanceof RawHtml) return value.html;
+  if (Array.isArray(value)) return value.map(renderValue).join("");
+  if (typeof value === "string") return escapeHtml(value);
+  return String(value);
+}
+// Rückgabe ist RawHtml, damit Fragmente verschachtelbar sind ohne doppelt zu
+// escapen: `html`<div>${item}</div>`` innerhalb eines äußeren html`...`
+// passiert unverändert durch. toString() liefert das fertige Markup.
+export function html(strings: TemplateStringsArray, ...values: ReadonlyArray<HtmlValue>): RawHtml {
+  let out = strings[0] ?? "";
+  values.forEach((value, i) => {
+    out += renderValue(value) + (strings[i + 1] ?? "");
+  });
+  return new RawHtml(out);
+}

package/src/format/index.ts CHANGED Viewed

@@ -35,6 +35,7 @@ function formatDateCell(
 }
 export { escapeHtml, escapeHtmlAttr, escapeXml } from "./escape";
+export { type HtmlValue, html, RawHtml, raw } from "./html-template";
 export function applyFormatSpec(
   spec: { format: string } & Record<string, unknown>,
   value: unknown,

package/src/index.ts CHANGED Viewed

@@ -51,7 +51,16 @@ export type {
   SubmitResult,
 } from "./form";
 export { createFormController } from "./form";
-export { applyFormatSpec, escapeHtml, escapeHtmlAttr, escapeXml } from "./format";
+export {
+  applyFormatSpec,
+  escapeHtml,
+  escapeHtmlAttr,
+  escapeXml,
+  type HtmlValue,
+  html,
+  RawHtml,
+  raw,
+} from "./format";
 export type {
   NavDefinition,
   NavNode,