@u-krupaveho-kraba/form-schemas 0.3.0 → 0.5.0

package/README.md

@@ -36,6 +36,20 @@ if (!result.success) {
 }
 ```
 
+### Types
+
+Every schema's inferred type ships alongside it. The four most-reached-for
+shapes are exported under their plain names as well as the historical
+`*SchemaOutput` ones:
+
+```ts
+import type { Form, FormTheme, Variant, CampaignItem } from "@topol/form-schemas";
+```
+
+`Variant`/`CampaignItem` here are the **wire** shapes, carrying `definition`
+(an inline form or a `{ref}` pointer). The *editor-facing* equivalents, which
+carry a resolved `form` instead, live in `@topol/form-editor-schemas`.
+
 ### Generating JSON Schema
 
 Both schema families can be serialized to standard JSON Schema (draft

package/htmlWhiteList.js

@@ -0,0 +1,137 @@
+import xss from "xss";
+// xss's CJS build attaches `whiteList` (and escapeAttrValue/safeAttrValue,
+// see sanitizeHtml.ts) as extra properties on the same object it
+// default-exports, via a runtime loop rather than a literal `exports.x =`
+// statement -- Node's native ESM interop (cjs-module-lexer) only detects
+// the latter statically, so `import { whiteList } from "xss"` type-checks
+// (xss's own hand-written .d.ts declares it) but resolves to `undefined` at
+// runtime under a plain Node ESM loader. Surfaced by testing/form-screenshot's
+// Playwright suite, which runs test files directly under Node -- every
+// Vite-bundled app sidesteps this via esbuild's more permissive interop.
+// The default import is the one thing every runtime agrees on (it IS the
+// whole module.exports object), so read the rest off of it instead.
+const xssDefaultWhiteList = xss.whiteList;
+// Extends xss's own default whitelist with extra per-tag attributes a
+// hand-authored HTML snippet plausibly needs (links, images, tables, form
+// controls) -- ported from landing-page-editor's getXssWhiteList.ts, which
+// turned out to have nothing landing-page-specific in it. Deliberately
+// drops the email/MSO-specific handling landing-page-editor and
+// email-editor layer on top of this in their own editor components (Outlook
+// conditional comments, unused/unclosed-tag repair) -- not applicable to a
+// form, which never renders in an email client.
+export function getHtmlWhiteList() {
+    const whiteList = JSON.parse(JSON.stringify(xssDefaultWhiteList));
+    whiteList["a"] = [
+        "download",
+        "href",
+        "hreflang",
+        "ping",
+        "referrerpolicy",
+        "rel",
+        "target",
+        "type",
+        "title",
+        "charset",
+        "coords",
+        "name",
+        "rev",
+        "shape",
+    ];
+    whiteList["area"] = [
+        "alt",
+        "coords",
+        "download",
+        "href",
+        "ping",
+        "referrerpolicy",
+        "rel",
+        "shape",
+        "target",
+    ];
+    // `formaction`/`formmethod`/`formtarget` are omitted deliberately: author
+    // HTML renders inside the widget's real <form>, so a pasted button
+    // carrying them re-points native submission at an arbitrary host. The
+    // widget's own submit button is type="button", which would make a pasted
+    // one the only native submit in the form. Nothing was lost by dropping
+    // them -- this list came from landing-page-editor, which never renders
+    // author HTML inside a form at all.
+    whiteList["button"] = [
+        "autofocus",
+        "disabled",
+        "form",
+        "formenctype",
+        "formnovalidate",
+        "name",
+        "type",
+        "value",
+    ];
+    whiteList["img"] = [
+        "alt",
+        "crossorigin",
+        "decoding",
+        "height",
+        "loading",
+        "referrerpolicy",
+        "sizes",
+        "src",
+        "srcset",
+        "usemap",
+        "width",
+        "align",
+        "border",
+        "hspace",
+        "vspace",
+    ];
+    whiteList["li"] = ["value"];
+    whiteList["ol"] = ["reversed", "start", "type"];
+    whiteList["style"] = [];
+    whiteList["table"] = [
+        "align",
+        "bgcolor",
+        "border",
+        "cellpadding",
+        "cellspacing",
+        "frame",
+        "rules",
+        "summary",
+        "width",
+    ];
+    whiteList["tbody"] =
+        whiteList["tfoot"] =
+            whiteList["thead"] =
+                ["align", "bgcolor", "char", "charoff", "valign"];
+    whiteList["td"] = whiteList["th"] = [
+        "abbr",
+        "align",
+        "bgcolor",
+        "char",
+        "charoff",
+        "colspan",
+        "headers",
+        "height",
+        "rowspan",
+        "scope",
+        "valign",
+        "width",
+    ];
+    whiteList["tr"] = ["align", "bgcolor", "char", "charoff", "valign"];
+    // Attributes every tag gets, regardless of what's listed above -- without
+    // this, `style`/`class`/`id` are simply absent from xss's own default
+    // whitelist (e.g. `div: []` allows no attributes at all), so any inline
+    // styling or CSS hook on a hand-typed snippet would silently vanish.
+    const globalAttributes = [
+        "class",
+        "id",
+        "style",
+        "title",
+        "dir",
+        "lang",
+        "role",
+        "tabindex",
+        "hidden",
+    ];
+    for (const tag in whiteList) {
+        whiteList[tag] = whiteList[tag].concat(globalAttributes);
+    }
+    return whiteList;
+}

package/index.js

@@ -8,12 +8,31 @@ export * from "./schemas/element.js";
 export * from "./schemas/step.js";
 export * from "./schemas/form.js";
 export * from "./schemas/campaign.js";
+export { sanitizeHtml } from "./sanitizeHtml.js";
+const JSON_TYPE_BY_ZOD_TYPE = {
+    string: "string",
+    number: "number",
+    boolean: "boolean",
+};
+const jsonSchemaParams = {
+    unrepresentable: "any",
+    override: ({ zodSchema, jsonSchema }) => {
+        const def = zodSchema._zod.def;
+        if (def.type !== "pipe")
+            return;
+        const zodType = def.in?._zod?.def?.type;
+        if (zodType && zodType in JSON_TYPE_BY_ZOD_TYPE) {
+            jsonSchema.type =
+                JSON_TYPE_BY_ZOD_TYPE[zodType];
+        }
+    },
+};
 /**
  * Serializes the full form type tree as standard JSON Schema —
  * used to tell an LLM the exact shape of valid form JSON (issue 024).
  */
 export function getFormJsonSchema() {
-    return z.toJSONSchema(FormSchema);
+    return z.toJSONSchema(FormSchema, jsonSchemaParams);
 }
 /**
  * Serializes the CampaignItem contract as standard JSON Schema — the
@@ -24,5 +43,5 @@ export function getFormJsonSchema() {
  * now the atomic authored/published unit.
  */
 export function getCampaignItemJsonSchema() {
-    return z.toJSONSchema(CampaignItemSchema);
+    return z.toJSONSchema(CampaignItemSchema, jsonSchemaParams);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@u-krupaveho-kraba/form-schemas",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Zod schemas for Topol form JSON (validation gate + AI generation)",
   "author": "Topol.io",
   "license": "ISC",
@@ -23,6 +23,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "xss": "^1.0.15"
+  },
   "peerDependencies": {
     "zod": "^4.1.11"
   }

package/sanitizeHtml.js

@@ -0,0 +1,57 @@
+import xss from "xss";
+import { getHtmlWhiteList } from "./htmlWhiteList.js";
+// See htmlWhiteList.ts's comment: escapeAttrValue and getDefaultCSSWhiteList
+// are runtime-loop-assigned CJS properties, not statically-detectable named
+// exports -- read them off the default import (the same object, guaranteed)
+// rather than `import { escapeAttrValue } from "xss"` directly.
+const { escapeAttrValue, getDefaultCSSWhiteList } = xss;
+// Every CSS property xss already knows about, all allowed. Sourced from xss
+// rather than importing `cssfilter` directly: xss owns that dependency, and
+// reaching past it into an untyped transitive package is what forced an
+// ambient `cssfilter.d.ts` shim into six separate form packages and apps,
+// most of which never referenced cssfilter at all.
+// Built from the keys rather than spread: xss types the returned whitelist as
+// carrying a `process` member, which it does not at runtime (verified -- every
+// entry is a CSS property name with a boolean value).
+const cssWhiteList = Object.fromEntries(Object.keys(getDefaultCSSWhiteList()).map((property) => [property, true]));
+function allowDataAttributes(_tag, name, value) {
+    if (name.startsWith("data-")) {
+        return `${name}="${escapeAttrValue(value)}"`;
+    }
+}
+const whiteList = getHtmlWhiteList();
+// The security control for every stored html/text property (ticket 169):
+// applied as a schema .transform() in elementProperties.ts, so it runs on
+// the READ path (migrateForm/migrateCampaignItem, both apps) rather than
+// only when content is authored. Lives here, not in the editor, because
+// the transform needs it at schema-definition time -- form-schemas has no
+// dependency on form-shared (it's the other way around), so the sanitizer
+// can't live in form-shared without a circular package dependency. It's
+// re-exported from @topol/form-shared's public API so both apps can still
+// reach it from the package the ticket named.
+export function sanitizeHtml(html) {
+    return xss(html, {
+        allowCommentTag: true,
+        whiteList,
+        // NOT `stripIgnoreTag: true`. That removed disallowed tags outright, and
+        // since xss treats any `<`...`>` run as a tag it also deleted ordinary
+        // copy: "5 < 3 & 4 > 2" became "5  2", and "Hi <FirstName>" became "Hi ".
+        // Author text is destroyed silently, on load, for every form carrying a
+        // comparison or a placeholder.
+        //
+        // Escaping instead keeps that text (it becomes `&lt;`/`&gt;`), and the
+        // reason the option was set does not apply: it was chosen so a stray
+        // <script> would not survive as garbled on-page text, but <script> is
+        // removed entirely either way by stripIgnoreTagBody below -- tag and body
+        // both. What changes is that a disallowed *real* tag (<iframe>, <object>)
+        // now renders as visible escaped text rather than vanishing, which is the
+        // better failure: the author can see that something was rejected.
+        stripIgnoreTagBody: ["script"],
+        onIgnoreTagAttr: allowDataAttributes,
+        // xss applies this to `style` attributes through its own CSS filter, which
+        // is what the hand-written safeAttrValue used to do by calling cssfilter
+        // directly -- and that call needed a `@ts-expect-error`, because xss's own
+        // signature wants a cssFilter instance it was never given.
+        css: { whiteList: cssWhiteList },
+    });
+}