@marianmeres/safe-html 0.2.0 → 0.3.0

package/AGENTS.md

@@ -18,11 +18,14 @@ src/types.ts     public types (Trusted, Renderable, SlotContext, HtmlKit, …)
 src/trusted.ts   TrustedValue (brand via Symbol.for keys, private fields), isTrusted
 src/escape.ts    escapeHtml
 src/url.ts       URL policy: urlScheme (URL-parser-accurate), vetUrl, createPolicy
-src/scanner.ts   context analysis: tokenizer model, slot rules, neutrality, WeakMap cache
+src/scanner.ts   context analysis: tokenizer model, slot rules, neutrality, <noscript>,
+                 <select>, cache
 src/render.ts    value × context rules (renderValue)
 src/helpers.ts   policy-free helpers: jsonScript, scriptText, styleText, unsafeRaw, join
 src/kit.ts       createHtml (html, attrs, url, srcset bound to a policy) + default kit
-tests/           golden scanner tests, render table, helpers, SVG/MathML, parse5 invariance
+tests/           golden scanner tests, render table, helpers, SVG/MathML, <noscript>, <select>,
+                 parse5
+                 invariance (parsed with scripting enabled and disabled)
 bench/           deno bench vs hand-written concatenation
 docs/design.md   normative rules (read before changing scanner or render behavior)
 ```
@@ -66,10 +69,19 @@ docs/design.md   normative rules (read before changing scanner or render behavio
 1. Read docs/design.md §3; locate the state in `Scanner.chunk()`, the slot rule in
    `Scanner.slot()` / `valueSlot()`, tag effects in `emitTag()` / `endTag()`.
 2. Add golden tests (context or exact error substring), and a corpus template in
-   `tests/invariance.test.ts` if a new context shape is involved.
+   `tests/invariance.test.ts` if a new context shape is involved. Check the fuzz alphabet
+   (`PIECES`, `VECTORS` in `tests/_util.ts`) can spell the breakout, and that the vector is in
+   the nesting test's sample: break the rule on purpose and see the suite fail.
 3. Consider the neutrality scan (`new Scanner(strings, true)`): a rule that differs between
-   HTML and foreign content must make the two scans disagree, not silently match.
-4. Update docs/design.md (and §8 if it departs from earlier behavior).
+   HTML and foreign content must make the two scans disagree, not silently match. Consider
+   `<noscript>` too: its content must be safe both as markup and as raw text up to the first
+   `</noscript` (design §3.7). And tree-construction modes that ignore start tags (older
+   `<select>` parsing, design §3.8): parse5 parses that way, newer browsers don't.
+4. A fragment property that a nested fragment can break (neutral, noscript-safe, select-safe)
+   is a flag on the trusted value, computed per template in `compute()` and propagated
+   through `RenderState` in `kit.ts` and `join()`. A new flag gets a new `Symbol.for` key; a
+   value from an older copy of the package must read as the refusing default.
+5. Update docs/design.md (and §8 if it departs from earlier behavior).
 
 ### Change the value × context table
 

package/API.md

@@ -39,6 +39,13 @@ for the context its slot sits in, as worked out once per call site from the stat
 Everywhere: `null`, `undefined`, `false` and `true` render nothing; `unsafeRaw()` is inserted
 verbatim. Anything else throws `HtmlValueError`.
 
+Three places restrict which `html` fragments a `text` slot accepts: inside `<svg>`/`<math>`
+only fragments that parse the same there; inside `<noscript>` only fragments without `script`
+or `style` slots or a `</noscript`; inside `<select>` only fragments without the tags that older
+parsers ignore there (`<title>`, `<style>`, `<svg>`, …) (design.md §3.6–§3.8). The property
+carries through nesting and `join()`. `<noscript>` content also refuses `script` and `style`
+slots of its own, and `<select>` content those tags.
+
 **Throws:** `HtmlTemplateError` if the template is refused (slot in an unquoted attribute,
 event handler, tag name, comment, …) or `html` is not called as a tagged template;
 `HtmlValueError` if a value has no rendering in its context.

package/README.md

@@ -23,6 +23,9 @@ deno add jsr:@marianmeres/safe-html
 npm install @marianmeres/safe-html
 ```
 
+`deno fmt` reformats the contents of `html`-tagged templates, which changes your output. Start
+template files with `// deno-fmt-ignore-file` (see [Notes](#notes)).
+
 ## Usage
 
 <!-- deno-fmt-ignore-start -->
@@ -93,6 +96,8 @@ html`<a href="javascript:go('${id}')">`;   // HtmlTemplateError: static scheme n
 html`<!-- ${note} -->`;                    // HtmlTemplateError: slot in comment
 html`<div class="x">${a}<b title="`;       // HtmlTemplateError: template ends inside a tag
 html`<svg><style>${styleText(css)}</style></svg>`; // HtmlTemplateError: not raw text inside SVG
+html`<noscript><script>${jsonScript(d)}</script></noscript>`; // HtmlTemplateError: script slot in <noscript>
+html`<select><style>…</style></select>`;   // HtmlTemplateError: older parsers ignore <style> there
 html`<script>let n = ${n};</script>`;      // HtmlValueError: script takes jsonScript()/scriptText()
 html`<p title="${html`<b>x</b>`}">`;       // HtmlValueError: html fragment in an attribute value
 html`<p>${new Date()}</p>`;                // HtmlValueError (and a type error)
@@ -113,7 +118,7 @@ include values.
 - inject script through an event-handler attribute (those slots are rejected);
 - put a URL with a scheme outside the allowlist into a URL attribute (default: `http`,
   `https`, `mailto`, `tel`), including through `srcset` or `attrs()`;
-- break out of `<script>`, `<style>`, `<title>` or `<textarea>` content;
+- break out of `<script>`, `<style>`, `<title>`, `<textarea>` or `<noscript>` content;
 - change how SVG/MathML content parses.
 
 This is tested against [parse5](https://github.com/inikulin/parse5), a spec-compliant HTML
@@ -174,6 +179,18 @@ export const { html, attrs, url, srcset } = createHtml({
 | `{@html anythingElse}`         | `${unsafeRaw(s)}` (review every one)               |
 | `{#await}`                     | not supported; await the data before rendering     |
 
+Differences in the output:
+
+- **HTML comments are emitted.** Svelte strips `<!-- … -->` from SSR output; `html` keeps
+  them, so a comment in a template ships to every visitor. Move rationale into a JS comment
+  (e.g. the docblock of the function that returns the fragment).
+- **Boolean attributes**: Svelte writes `selected=""`, `attrs({ selected: true })` writes
+  `selected`. Same DOM, different bytes.
+- **Quotes in text**: Svelte writes `'` and `"` in element text as is; here they are `&#39;`
+  and `&quot;` in every context (see [docs/design.md](docs/design.md) §5.1). Same DOM.
+
+Tests that pin markup bytes need adjusting for these; tests that compare parsed text don't.
+
 ## Notes
 
 - **Booleans render nothing, `true` included** (as in JSX). Numbers render, so
@@ -181,6 +198,12 @@ export const { html, attrs, url, srcset } = createHtml({
 - An **untagged** template literal around a fragment (`` `<p>${frag}</p>` ``) makes a plain
   string, which `html` escapes: visibly double-escaped, never an injection.
 - Every attribute value that contains a slot must be quoted.
+- **`<noscript>`** content works like any other markup, except that it can't hold `<script>`
+  or `<style>` slots, or `html` fragments that have them (with scripting enabled, the element
+  ends at the first `</noscript`, even one inside a script string).
+- **`<select>`** can't contain `<title>`, `<style>`, `<svg>`, `<math>`, `<template>` or the
+  other tags that older parsers ignore there (their content would be parsed as markup), nor
+  `html` fragments that have them. Options, optgroups, text and `<script>` are fine.
 - `attrs()` output starts with a space. When an attribute appears both statically and in
   `attrs()`, the first one in the tag wins (HTML parsing rules).
 - Whitespace is preserved exactly; nothing is minified.

package/dist/helpers.js

@@ -5,7 +5,7 @@ import { describe, HtmlValueError } from "./errors.js";
 import { escapeHtml } from "./escape.js";
 import { renderValue } from "./render.js";
 import { slotInfo } from "./scanner.js";
-import { isNeutral, isTrusted, makeTrusted, trustedString } from "./trusted.js";
+import { isNeutral, isNoscriptSafe, isSelectSafe, isTrusted, makeTrusted, trustedString, } from "./trusted.js";
 const JSON_ESCAPES = {
     "<": "\\u003c",
     ">": "\\u003e",
@@ -96,7 +96,7 @@ export function join(values, separator = "") {
     if (!Array.isArray(values)) {
         throw new HtmlValueError("join() takes an array", { received: describe(values) });
     }
-    const st = { neutral: true };
+    const st = { neutral: true, noscript: true, select: true };
     let sep;
     if (typeof separator === "string")
         sep = escapeHtml(separator);
@@ -104,6 +104,10 @@ export function join(values, separator = "") {
         sep = trustedString(separator);
         if (!isNeutral(separator))
             st.neutral = false;
+        if (!isNoscriptSafe(separator))
+            st.noscript = false;
+        if (!isSelectSafe(separator))
+            st.select = false;
     }
     else {
         throw new HtmlValueError("join(): the separator must be a string or html``", {
@@ -120,5 +124,5 @@ export function join(values, separator = "") {
         out += first ? r : sep + r;
         first = false;
     }
-    return makeTrusted("html", out, st.neutral);
+    return makeTrusted("html", out, st.neutral, st.noscript, st.select);
 }

package/dist/kit.js

@@ -29,7 +29,11 @@ export function createHtml(options = {}) {
         if (values.length !== slots.length) {
             throw templateError(strings, "html must be called as a tagged template: html`…`");
         }
-        const st = { neutral: a.neutral };
+        const st = {
+            neutral: a.neutral,
+            noscript: a.noscript,
+            select: a.select,
+        };
         let out = strings[0];
         for (let i = 0; i < slots.length; i++) {
             const slot = slots[i];
@@ -38,7 +42,7 @@ export function createHtml(options = {}) {
             }
             out += renderValue(values[i], slot, i, policy, st) + strings[i + 1];
         }
-        return makeTrusted("html", out, st.neutral);
+        return makeTrusted("html", out, st.neutral, st.noscript, st.select);
     }
     function attrValue(lower, value, n) {
         if (lower === "srcset" || lower === "imagesrcset") {

package/dist/render.d.ts

@@ -4,6 +4,10 @@ import { type UrlPolicy } from "./url.js";
 export interface RenderState {
     /** Stays true while every HTML fragment placed in a text slot is neutral. */
     neutral: boolean;
+    /** Stays true while every HTML fragment placed in a text slot is noscript-safe. */
+    noscript: boolean;
+    /** Stays true while every HTML fragment placed in a text slot is select-safe. */
+    select: boolean;
 }
 /** Renders one interpolated value for a slot. */
 export declare function renderValue(v: unknown, slot: SlotInfo, index: number | undefined, policy: UrlPolicy | undefined, st: RenderState, depth?: number): string;

package/dist/render.js

@@ -4,7 +4,7 @@
  */
 import { describe, HtmlValueError } from "./errors.js";
 import { escapeHtml } from "./escape.js";
-import { isNeutral, isTrusted, trustedString } from "./trusted.js";
+import { isNeutral, isNoscriptSafe, isSelectSafe, isTrusted, trustedString, } from "./trusted.js";
 import { vetUrl } from "./url.js";
 /** Guards against cyclic arrays. */
 const MAX_DEPTH = 100;
@@ -75,6 +75,16 @@ function renderTrusted(v, slot, st) {
                     return undefined;
                 st.neutral = false;
             }
+            if (!isNoscriptSafe(v)) {
+                if (slot.noscript)
+                    return undefined;
+                st.noscript = false;
+            }
+            if (!isSelectSafe(v)) {
+                if (slot.select)
+                    return undefined;
+                st.select = false;
+            }
             return s;
         case "attrs":
             return ctx === "attr-list" ? s : undefined;
@@ -107,8 +117,11 @@ function refuse(v, slot, index) {
     }
     else if (isTrusted(v)) {
         if (v.kind === "html" && ctx === "text") {
-            msg =
-                "this HTML fragment can't go inside <svg>/<math>: it contains markup that parses differently there (e.g. <style>, <p>)";
+            msg = slot.foreign && !isNeutral(v)
+                ? "this HTML fragment can't go inside <svg>/<math>: it contains markup that parses differently there (e.g. <style>, <p>)"
+                : slot.noscript && !isNoscriptSafe(v)
+                    ? 'this HTML fragment can\'t go inside <noscript>: it has a <script>/<style> slot or a "</noscript" that would end the element'
+                    : "this HTML fragment can't go inside <select>: it contains a tag that older parsers ignore there (e.g. <style>, <title>, <svg>)";
         }
         else if (v.kind === "html" && (ctx === "attr-value" || ctx === "url")) {
             msg = "an html fragment can't be an attribute value";

package/dist/scanner.d.ts

@@ -13,6 +13,12 @@
  *   content. That makes a fragment safe to drop into another template's text slot.
  * - Foreign content: a fragment is "neutral" when a second scan that starts inside SVG/MathML
  *   agrees with the HTML scan; only neutral fragments may go into SVG/MathML text slots.
+ * - `<noscript>` content is scanned as markup (scripting disabled) and must end where the
+ *   raw-text reading (scripting enabled) ends it: at its first `</noscript`. Only fragments
+ *   that can't produce a `</noscript` may go into its text slots.
+ * - Inside `<select>`, older parsers ignore the start tags in `SELECT_REFUSED` and parse their
+ *   content as markup, so those are refused there, and only fragments without them may go
+ *   into its text slots.
  */
 import { HtmlTemplateError } from "./errors.js";
 import type { SlotContext } from "./types.js";
@@ -27,14 +33,22 @@ export interface SlotInfo {
     readonly scheme: string;
     /** A `text` slot inside SVG/MathML: HTML fragments must be neutral. */
     readonly foreign: boolean;
+    /** A `text` slot inside `<noscript>`: HTML fragments must be noscript-safe. */
+    readonly noscript: boolean;
+    /** A `text` slot inside `<select>`: HTML fragments must be select-safe. */
+    readonly select: boolean;
 }
 /** Creates a slot description (always the same shape, which keeps rendering monomorphic). */
-export declare function slotInfo(context: SlotContext, tag?: string, attr?: string, scheme?: string, foreign?: boolean): SlotInfo;
+export declare function slotInfo(context: SlotContext, tag?: string, attr?: string, scheme?: string, foreign?: boolean, noscript?: boolean, select?: boolean): SlotInfo;
 /** The cached result for one call site. */
 export interface Analysis {
     readonly slots: readonly SlotInfo[];
     /** Parses the same inside SVG/MathML as in HTML (see module doc). */
     readonly neutral: boolean;
+    /** May go inside `<noscript>`: can't produce a `</noscript` (see `noscriptSafe`). */
+    readonly noscript: boolean;
+    /** May go inside `<select>`: has no start tag from `SELECT_REFUSED`. */
+    readonly select: boolean;
 }
 /** Attributes whose value is a URL (plus `data` on `<object>`). */
 export declare const URL_ATTRIBUTES: ReadonlySet<string>;

package/dist/scanner.js

@@ -13,19 +13,28 @@
  *   content. That makes a fragment safe to drop into another template's text slot.
  * - Foreign content: a fragment is "neutral" when a second scan that starts inside SVG/MathML
  *   agrees with the HTML scan; only neutral fragments may go into SVG/MathML text slots.
+ * - `<noscript>` content is scanned as markup (scripting disabled) and must end where the
+ *   raw-text reading (scripting enabled) ends it: at its first `</noscript`. Only fragments
+ *   that can't produce a `</noscript` may go into its text slots.
+ * - Inside `<select>`, older parsers ignore the start tags in `SELECT_REFUSED` and parse their
+ *   content as markup, so those are refused there, and only fragments without them may go
+ *   into its text slots.
  */
 import { HtmlTemplateError } from "./errors.js";
 import { LEADING_C0_SPACE, ONLY_C0_SPACE } from "./url.js";
 /** Creates a slot description (always the same shape, which keeps rendering monomorphic). */
-export function slotInfo(context, tag = "", attr = "", scheme = "", foreign = false) {
-    return Object.freeze({ context, tag, attr, scheme, foreign });
+export function slotInfo(context, tag = "", attr = "", scheme = "", foreign = false, noscript = false, select = false) {
+    return Object.freeze({ context, tag, attr, scheme, foreign, noscript, select });
 }
 // ---- character classes ------------------------------------------------------------------
 const isWs = (c) => c === " " || c === "\t" || c === "\n" || c === "\f" || c === "\r";
 const isAlpha = (c) => (c >= "a" && c <= "z") || (c >= "A" && c <= "Z");
 const isSchemeChar = (c) => isAlpha(c) || (c >= "0" && c <= "9") || c === "+" || c === "." || c === "-";
 const WS_ONLY = /^[\t\n\f\r ]*$/;
-/** Elements whose start tag switches the tokenizer (HTML mode only). */
+/**
+ * Elements whose start tag switches the tokenizer (HTML mode only). `<noscript>` is not here:
+ * it is handled on its own (see `Scanner.noscript`).
+ */
 const RAW_KIND = new Map([
     ["script", "script"],
     ["style", "style"],
@@ -34,10 +43,28 @@ const RAW_KIND = new Map([
     ["iframe", "unsupported"],
     ["noembed", "unsupported"],
     ["noframes", "unsupported"],
-    ["noscript", "unsupported"],
     ["xmp", "unsupported"],
     ["plaintext", "plaintext"],
 ]);
+/**
+ * Start tags that older parsers ("in select" insertion mode) ignore inside `<select>`, parsing
+ * their content as markup: raw text, RCDATA and foreign content that the scanner would model
+ * otherwise. `<template>` is processed there, but a `</select>` inside it is ignored, so the
+ * scanner would leave the `<select>` too early. (`<script>` and `<textarea>` parse the same.)
+ */
+const SELECT_REFUSED = new Set([
+    "title",
+    "style",
+    "xmp",
+    "iframe",
+    "noembed",
+    "noframes",
+    "noscript",
+    "plaintext",
+    "svg",
+    "math",
+    "template",
+]);
 /** Start tags that end SVG/MathML foreign content (`font` only with some attributes; always here). */
 const BREAKOUT = new Set(("b big blockquote body br center code dd div dl dt em embed font h1 h2 h3 h4 h5 h6 head " +
     "hr i img li listing menu meta nobr ol p pre ruby s small span strong strike sub sup " +
@@ -124,6 +151,13 @@ function endsWithPartial(text, seq) {
     const lt = text.lastIndexOf("<");
     return lt !== -1 && seq.startsWith(text.slice(lt).toLowerCase());
 }
+/** Index of the first `</noscript` end tag in `s` at or after `from`, else `Infinity`. */
+function noscriptEnd(s, from) {
+    const re = closerRe("noscript");
+    re.lastIndex = from;
+    const m = re.exec(s);
+    return m ? m.index : Infinity;
+}
 /**
  * The static text before the first slot of a URL attribute (normalized, non-empty):
  * returns the lowercased scheme it writes, `""` if it settles the URL as relative, or `false`
@@ -163,6 +197,15 @@ class Scanner {
     raw = "";
     rawKind = "script";
     rawStart = 0;
+    // <noscript> (HTML mode). Its content is scanned as markup, which is how it parses with
+    // scripting disabled. With scripting enabled it is raw text up to the first "</noscript",
+    // so that must be where the markup reading ends it too: nsEnd is the index of that
+    // "</noscript" in the current chunk, and the scan must reach it in text.
+    noscript = false;
+    nsEnd = Infinity;
+    // <select> (HTML mode), and whether the template has a start tag refused inside it
+    select = false;
+    selectUnsafe = false;
     // foreign content: ns is the namespace of the outermost <svg>/<math> ("generic" for the
     // virtual one a neutrality scan starts inside); stack holds the open svg/math elements
     ns = "";
@@ -192,6 +235,8 @@ class Scanner {
     }
     chunk(s) {
         this.rawStart = 0;
+        if (this.noscript)
+            this.nsEnd = noscriptEnd(s, 0);
         const len = s.length;
         let i = 0;
         while (i < len) {
@@ -202,6 +247,8 @@ class Scanner {
                     if (j === -1)
                         i = len;
                     else {
+                        if (j === this.nsEnd)
+                            this.nsEnd = Infinity; // reached in text: the end tag
                         this.state = TAG_OPEN;
                         i = j + 1;
                     }
@@ -369,6 +416,9 @@ class Scanner {
                 default: // COMMENT, MARKUP_DECL: unterminated in this chunk
                     i = len;
             }
+            if (i > this.nsEnd) {
+                this.fail('"</noscript" inside <noscript> that is not its end tag: with scripting enabled, it would end the element there', this.nsEnd);
+            }
         }
     }
     startTag(c, isEnd) {
@@ -459,6 +509,12 @@ class Scanner {
             }
             return i + 1;
         }
+        if (SELECT_REFUSED.has(tag)) {
+            if (this.select) {
+                this.fail(`<${tag}> inside <select> is not supported: older parsers ignore it there and parse its content as markup`, i);
+            }
+            this.selectUnsafe = true;
+        }
         if (tag === "svg" || tag === "math") {
             if (!this.selfClosing) {
                 this.ns = tag;
@@ -466,7 +522,18 @@ class Scanner {
             }
             return i + 1;
         }
-        const kind = RAW_KIND.get(tag); // the self-closing flag is ignored here, as in HTML
+        // the self-closing flag is ignored below, as in HTML
+        if (tag === "select")
+            this.select = true;
+        if (tag === "noscript") {
+            if (this.noscript) {
+                this.fail("<noscript> inside <noscript> is not supported", i);
+            }
+            this.noscript = true;
+            this.nsEnd = noscriptEnd(this.strings[this.k], i + 1);
+            return i + 1;
+        }
+        const kind = RAW_KIND.get(tag);
         if (kind) {
             this.raw = tag;
             this.rawKind = kind;
@@ -487,8 +554,15 @@ class Scanner {
             if (tag === "svg" || tag === "math") {
                 this.fail(`</${tag}> without a matching <${tag}> in the same template`, i);
             }
+            if (tag === "noscript")
+                this.noscript = false;
+            else if (tag === "select")
+                this.select = false;
             return;
         }
+        if (tag === "noscript" && this.noscript) {
+            this.fail("</noscript> inside <svg>/<math>: close the <svg>/<math> first", i);
+        }
         if (tag === "br" || tag === "p") {
             this.fail(`</${tag}> inside <svg>/<math> ends the foreign content`, i);
         }
@@ -515,16 +589,21 @@ class Scanner {
                 if (this.foreignRaw) {
                     fail(`slot inside <${this.foreignRaw}> within <svg>/<math> is not supported`);
                 }
-                this.slots.push(slotInfo("text", "", "", "", this.integration ? !this.integrationHtml : this.ns !== ""));
+                this.slots.push(slotInfo("text", "", "", "", this.integration ? !this.integrationHtml : this.ns !== "", this.noscript, this.select));
                 return;
             case RAW: {
                 const kind = this.rawKind;
                 if (kind === "unsupported" || kind === "plaintext") {
                     fail(`slot inside <${this.raw}> is not supported`);
                 }
+                if (this.noscript && (kind === "script" || kind === "style")) {
+                    // scriptText()/styleText() may emit "</noscript", which ends the <noscript>
+                    fail(`slot inside <${this.raw}> within <noscript> is not supported`);
+                }
                 const before = this.strings[k].slice(this.rawStart);
                 if (endsWithPartial(before, "</" + this.raw) ||
-                    (kind === "script" && endsWithPartial(before, "<!--"))) {
+                    (kind === "script" && endsWithPartial(before, "<!--")) ||
+                    (this.noscript && endsWithPartial(before, "</noscript"))) {
                     fail(`slot right after "<" inside <${this.raw}>: add a space between them`);
                 }
                 this.slots.push(slotInfo(kind, this.raw));
@@ -583,6 +662,9 @@ class Scanner {
         if (SVG_ANIMATION.has(tag) && SVG_ANIMATION_ATTRS.has(attr)) {
             fail(`slot in "${attr}" on <${tag}> is not supported (SVG animation can set href)`);
         }
+        if (this.noscript && endsWithPartial(this.valueStatic, "</noscript")) {
+            fail('slot right after "<" inside <noscript>: add a space between them');
+        }
         const q = next.indexOf(this.quote);
         const after = q === -1 ? null : next.slice(0, q); // null: another slot comes first
         let info;
@@ -642,6 +724,12 @@ class Scanner {
         }
         if (this.integration)
             fail(`template ends inside <${this.integration}>`);
+        if (this.noscript) {
+            fail("template ends inside <noscript>: close it in the same template");
+        }
+        if (this.select) {
+            fail("template ends inside <select>: close it in the same template");
+        }
         if (this.foreignRaw)
             fail(`template ends inside <${this.foreignRaw}>`);
         if (this.stack.length) {
@@ -656,6 +744,24 @@ let analyses = 0;
 export function analysisCount() {
     return analyses;
 }
+/**
+ * May the template's markup go inside `<noscript>`? With scripting enabled, everything there up
+ * to the first `</noscript` is text, so the template must not contain one (a nested
+ * `<noscript>` included), must not be able to form one with a value (a chunk ending with a
+ * prefix of it before a slot), and must not have script or style slots (`scriptText()` and
+ * `styleText()` may emit one). Other slots render no `<`.
+ */
+function noscriptSafe(strings, slots) {
+    const re = closerRe("noscript");
+    for (let k = 0; k < strings.length; k++) {
+        re.lastIndex = 0;
+        if (re.test(strings[k]))
+            return false;
+        if (k < slots.length && endsWithPartial(strings[k], "</noscript"))
+            return false;
+    }
+    return slots.every((s) => s.context !== "script" && s.context !== "style");
+}
 function compute(strings) {
     for (let i = 0; i < strings.length; i++) {
         if (typeof strings[i] !== "string") {
@@ -663,7 +769,8 @@ function compute(strings) {
         }
     }
     try {
-        const slots = new Scanner(strings, false).run();
+        const scan = new Scanner(strings, false);
+        const slots = scan.run();
         let neutral = false;
         try {
             const f = new Scanner(strings, true).run();
@@ -680,7 +787,12 @@ function compute(strings) {
             if (!(e instanceof ScanError))
                 throw e;
         }
-        return { slots, neutral };
+        return {
+            slots,
+            neutral,
+            noscript: noscriptSafe(strings, slots),
+            select: !scan.selectUnsafe,
+        };
     }
     catch (e) {
         if (e instanceof ScanError)

package/dist/trusted.d.ts

@@ -5,6 +5,8 @@
 import type { Trusted, TrustedKind } from "./types.js";
 declare const VALUE: unique symbol;
 declare const NEUTRAL: unique symbol;
+declare const NOSCRIPT: unique symbol;
+declare const SELECT: unique symbol;
 /**
  * The implementation. State lives in private fields behind getters, so a value is immutable
  * without the cost of `Object.freeze` (there is no setter, and nothing outside this class can
@@ -13,23 +15,33 @@ declare const NEUTRAL: unique symbol;
  */
 export declare class TrustedValue<K extends TrustedKind = TrustedKind> implements Trusted<K> {
     #private;
-    constructor(kind: K, value: string, neutral: boolean);
+    constructor(kind: K, value: string, neutral: boolean, noscript: boolean, select: boolean);
     get kind(): K;
     get [VALUE](): string;
     get [NEUTRAL](): boolean;
+    get [NOSCRIPT](): boolean;
+    get [SELECT](): boolean;
     toString(): string;
     toJSON(): string;
     [Symbol.toPrimitive](): string;
 }
 /**
- * Creates a trusted value. `neutral` (html only) marks markup that parses the same inside
- * `<svg>`/`<math>` as in HTML (see scanner.ts).
+ * Creates a trusted value. For html only: `neutral` marks markup that parses the same inside
+ * `<svg>`/`<math>` as in HTML, `noscript` markup that may go inside `<noscript>`, `select`
+ * markup that may go inside `<select>` (see scanner.ts).
  */
-export declare function makeTrusted<K extends TrustedKind>(kind: K, value: string, neutral?: boolean): Trusted<K>;
+export declare function makeTrusted<K extends TrustedKind>(kind: K, value: string, neutral?: boolean, noscript?: boolean, select?: boolean): Trusted<K>;
 /** Is `v` a value produced by this package (optionally, of the given kind)? */
 export declare function isTrusted<K extends TrustedKind>(v: unknown, kind?: K): v is Trusted<K>;
 /** The string of a value already known to be trusted. */
 export declare function trustedString(v: Trusted): string;
 /** Whether trusted markup may be placed into SVG/MathML text. */
 export declare function isNeutral(v: Trusted): boolean;
+/**
+ * Whether trusted markup may be placed into `<noscript>` text. Values from a copy of the
+ * package that predates the flag read as `false` (refused there).
+ */
+export declare function isNoscriptSafe(v: Trusted): boolean;
+/** Whether trusted markup may be placed into `<select>` text (older copies: `false`). */
+export declare function isSelectSafe(v: Trusted): boolean;
 export {};

package/dist/trusted.js

@@ -1,6 +1,8 @@
 const BRAND = Symbol.for("@marianmeres/safe-html/brand");
 const VALUE = Symbol.for("@marianmeres/safe-html/value");
 const NEUTRAL = Symbol.for("@marianmeres/safe-html/neutral");
+const NOSCRIPT = Symbol.for("@marianmeres/safe-html/noscript");
+const SELECT = Symbol.for("@marianmeres/safe-html/select");
 /**
  * The implementation. State lives in private fields behind getters, so a value is immutable
  * without the cost of `Object.freeze` (there is no setter, and nothing outside this class can
@@ -11,10 +13,14 @@ export class TrustedValue {
     #kind;
     #value;
     #neutral;
-    constructor(kind, value, neutral) {
+    #noscript;
+    #select;
+    constructor(kind, value, neutral, noscript, select) {
         this.#kind = kind;
         this.#value = value;
         this.#neutral = neutral;
+        this.#noscript = noscript;
+        this.#select = select;
     }
     get kind() {
         return this.#kind;
@@ -25,6 +31,12 @@ export class TrustedValue {
     get [NEUTRAL]() {
         return this.#neutral;
     }
+    get [NOSCRIPT]() {
+        return this.#noscript;
+    }
+    get [SELECT]() {
+        return this.#select;
+    }
     toString() {
         return this.#value;
     }
@@ -38,11 +50,12 @@ export class TrustedValue {
 Object.defineProperty(TrustedValue.prototype, BRAND, { value: true });
 Object.freeze(TrustedValue.prototype);
 /**
- * Creates a trusted value. `neutral` (html only) marks markup that parses the same inside
- * `<svg>`/`<math>` as in HTML (see scanner.ts).
+ * Creates a trusted value. For html only: `neutral` marks markup that parses the same inside
+ * `<svg>`/`<math>` as in HTML, `noscript` markup that may go inside `<noscript>`, `select`
+ * markup that may go inside `<select>` (see scanner.ts).
  */
-export function makeTrusted(kind, value, neutral = false) {
-    return new TrustedValue(kind, value, neutral);
+export function makeTrusted(kind, value, neutral = false, noscript = false, select = false) {
+    return new TrustedValue(kind, value, neutral, noscript, select);
 }
 /** Is `v` a value produced by this package (optionally, of the given kind)? */
 export function isTrusted(v, kind) {
@@ -66,3 +79,16 @@ export function isNeutral(v) {
     // deno-lint-ignore no-explicit-any
     return v[NEUTRAL] === true;
 }
+/**
+ * Whether trusted markup may be placed into `<noscript>` text. Values from a copy of the
+ * package that predates the flag read as `false` (refused there).
+ */
+export function isNoscriptSafe(v) {
+    // deno-lint-ignore no-explicit-any
+    return v[NOSCRIPT] === true;
+}
+/** Whether trusted markup may be placed into `<select>` text (older copies: `false`). */
+export function isSelectSafe(v) {
+    // deno-lint-ignore no-explicit-any
+    return v[SELECT] === true;
+}

package/docs/design.md

@@ -40,7 +40,7 @@ Two phases:
 - inject script through an event-handler attribute (those slots are rejected);
 - put a URL with a scheme outside the allowlist into a URL attribute (default: `http`,
   `https`, `mailto`, `tel`), including through `srcset` or `attrs()`;
-- break out of `<script>`, `<style>`, `<title>` or `<textarea>` content;
+- break out of `<script>`, `<style>`, `<title>`, `<textarea>` or `<noscript>` content;
 - change how SVG/MathML content parses.
 
 **Not guaranteed:**
@@ -69,21 +69,22 @@ scan then continues from the same state, because §4 guarantees no value can cha
 
 ### 3.1 States → contexts
 
-| Scanner state at the slot                                               | Example                                | Context              |
-| ----------------------------------------------------------------------- | -------------------------------------- | -------------------- |
-| Text content                                                            | `<p>${…}</p>`                          | `text`               |
-| `<title>`, `<textarea>` content (RCDATA)                                | `<title>${…}</title>`                  | `rcdata`             |
-| In a start tag where an attribute may begin                             | `<div ${…}>`, `<a href="x"${…}>`       | `attr-list`          |
-| Just after `<` or `</`, or in a tag name                                | `<${…}>`, `<h${…}>`                    | error                |
-| In an attribute name, or right after one with no whitespace             | `<div data-${…}="1">`, `<input a${…}>` | error                |
-| After `=`, or in an unquoted value                                      | `<a href=${…}>`, `<a href=x${…}>`      | error                |
-| In a `"…"` or `'…'` value                                               | `<p title="${…}">`                     | per attribute (§3.3) |
-| `<script>` raw text                                                     | `<script>${…}</script>`                | `script`             |
-| `<style>` raw text                                                      | `<style>${…}</style>`                  | `style`              |
-| `iframe`, `noembed`, `noframes`, `noscript`, `xmp`, `plaintext` content | `<noscript>${…}</noscript>`            | error                |
-| Comment, doctype, `<!…>`, `<?…>`, `</ …>`                               | `<!-- ${…} -->`                        | error                |
-| Inside an end tag                                                       | `</div ${…}>`                          | error                |
-| Right after `/` in a tag                                                | `<br/${…}>`                            | error                |
+| Scanner state at the slot                                   | Example                                | Context              |
+| ----------------------------------------------------------- | -------------------------------------- | -------------------- |
+| Text content                                                | `<p>${…}</p>`                          | `text`               |
+| `<title>`, `<textarea>` content (RCDATA)                    | `<title>${…}</title>`                  | `rcdata`             |
+| In a start tag where an attribute may begin                 | `<div ${…}>`, `<a href="x"${…}>`       | `attr-list`          |
+| Just after `<` or `</`, or in a tag name                    | `<${…}>`, `<h${…}>`                    | error                |
+| In an attribute name, or right after one with no whitespace | `<div data-${…}="1">`, `<input a${…}>` | error                |
+| After `=`, or in an unquoted value                          | `<a href=${…}>`, `<a href=x${…}>`      | error                |
+| In a `"…"` or `'…'` value                                   | `<p title="${…}">`                     | per attribute (§3.3) |
+| `<script>` raw text                                         | `<script>${…}</script>`                | `script`             |
+| `<style>` raw text                                          | `<style>${…}</style>`                  | `style`              |
+| `<noscript>` content                                        | `<noscript>${…}</noscript>`            | as outside (§3.7)    |
+| `iframe`, `noembed`, `noframes`, `xmp`, `plaintext` content | `<iframe>${…}</iframe>`                | error                |
+| Comment, doctype, `<!…>`, `<?…>`, `</ …>`                   | `<!-- ${…} -->`                        | error                |
+| Inside an end tag                                           | `</div ${…}>`                          | error                |
+| Right after `/` in a tag                                    | `<br/${…}>`                            | error                |
 
 Tokenizer details:
 
@@ -91,6 +92,8 @@ Tokenizer details:
 - `<script>`, `<style>`, `<title>`, `<textarea>` and the unsupported raw-text elements are
   scanned to their end tag (`</name` followed by whitespace, `/` or `>`, case-insensitive),
   including after `<script/>` (the self-closing flag is ignored on non-void elements).
+  `<noscript>` content is scanned as markup (§3.7). Inside `<select>`, some start tags are
+  refused (§3.8).
 - A comment runs from `<!--` to `-->` or `--!>`; `<!-->` and `<!--->` are complete comments.
   `<!doctype …>`, other `<!…>`, `<?…>` and `</` + non-letter run to the next `>`.
 - `<![CDATA[` anywhere is an error.
@@ -161,8 +164,8 @@ stripped (what the URL parser ignores).
 ### 3.5 End of template
 
 After the last static chunk the scanner must be back in text: outside any tag, comment,
-declaration, raw text, RCDATA, and outside `<svg>`/`<math>`. Unclosed normal elements are
-fine. A stray `</svg>` or `</math>` is an error.
+declaration, raw text, RCDATA, `<noscript>`, `<select>`, and outside `<svg>`/`<math>`.
+Unclosed normal elements are fine. A stray `</svg>` or `</math>` is an error.
 
 This makes a `SafeHtml` fragment safe to drop into another template's `text` slot: it starts
 and ends in text and every value inside was rendered for its own context.
@@ -198,13 +201,61 @@ neutral if its template is and every fragment rendered into its text slots is. `
 r="${r}"/>`, `<g>…</g>`, `<title>${t}</title>` and static `<style>` are neutral; `<p>`,
 `<style>${styleText(…)}</style>` and `<textarea><a href="${u}"></textarea>` are not.
 
-### 3.7 Strictness
+### 3.7 `<noscript>`
+
+`<noscript>` parses two ways. With scripting enabled (every browser, by default) its content
+is raw text up to the first `</noscript` (followed by whitespace, `/` or `>`,
+case-insensitive). With scripting disabled it is ordinary markup. A template must be safe
+under both, so:
+
+- The content is scanned as markup, and slots get the contexts they would get outside.
+- The first `</noscript` after the start tag must be the element's end tag in the markup
+  reading too: reached in text, outside any tag, comment, raw text or RCDATA, and outside
+  `<svg>`/`<math>`. A `</noscript` in an attribute value, comment, `<textarea>` or static
+  script is an error, with or without slots.
+- `script` and `style` slots are errors: `scriptText()` and `styleText()` may emit
+  `</noscript`, which would end the element in the raw-text reading.
+- Static text before a slot must not end with a non-empty prefix of `</noscript` (§3.2):
+  `title="a <${x}"` is refused inside it.
+- `<noscript>` inside `<noscript>` is an error. Inside SVG/MathML, `<noscript>` is an ordinary
+  foreign element and none of this applies.
+
+Every other value renders without a `<`, so in the raw-text reading everything up to the real
+end tag stays text, and in the markup reading the usual rules hold.
+
+**Fragments.** An `html` fragment in a `text` slot inside `<noscript>` must be
+**noscript-safe**: its template has no `script` or `style` slot, contains no `</noscript`, and
+has no chunk ending with a prefix of it before a slot; and every fragment rendered into its text
+slots is noscript-safe (as for neutrality, §3.6). `join()` propagates the property. A fragment
+can't end with such a prefix, since it ends in text (§3.5).
+
+The two readings also build different trees: with scripting enabled, `<noscript>` holds one
+text node. That is the template's static choice, not something a value can change.
+
+### 3.8 `<select>`
+
+Older parsers (and parse5) parse `<select>` content in the "in select" insertion mode, which
+ignores most start tags. An ignored `<title>` or `<style>` does not switch the tokenizer, so
+its content is markup there: `<select><title><script>${x}</script></title></select>` runs
+`x`, and `styleText()` inside `<select><style>` can create elements. Newer parsers switch the
+tokenizer as usual. A template must be safe under both, so inside `<select>` (HTML mode,
+until the first `</select>`) these start tags are errors: `title`, `style`, `xmp`, `iframe`,
+`noembed`, `noframes`, `noscript`, `plaintext`, `svg`, `math`, and `template` (processed
+there, but a `</select>` inside it is ignored, so the scanner would leave the `<select>` too
+early). `<script>`, `<textarea>`, `<option>`, `<optgroup>` and other elements parse the same
+in both.
+
+**Fragments.** An `html` fragment in a `text` slot inside `<select>` must be **select-safe**:
+its template has none of these start tags (anywhere, in HTML mode), and every fragment
+rendered into its text slots is select-safe. `join()` propagates the property.
+
+### 3.9 Strictness
 
 Anything the scanner does not model is an error, never a guess. Analysis errors depend on the
 template only, so a test that renders every template once surfaces them all. Relaxing a rule
 later is a minor release; tightening one breaks templates.
 
-### 3.8 Excerpts
+### 3.10 Excerpts
 
 `HtmlTemplateError.excerpt` is the static text with slots shown as `${…}`, the failing slot
 as `${⟨here⟩}` (or `⟨here⟩` at an offset for errors in static text), whitespace collapsed,
@@ -230,7 +281,8 @@ trimmed to about 90 characters. It never contains a value.
 | `unsafe`                                | verbatim  | verbatim | verbatim  | verbatim   | verbatim | verbatim | verbatim | verbatim |
 | object, function, symbol, date, promise | ✗         | ✗        | ✗         | ✗          | ✗        | ✗        | ✗        | ✗        |
 
-¹ In SVG/MathML text slots only neutral fragments (§3.6).
+¹ In SVG/MathML text slots only neutral fragments (§3.6); in `<noscript>` text slots only
+noscript-safe ones (§3.7); in `<select>` text slots only select-safe ones (§3.8).
 
 - **Booleans render nothing, `true` included** (as in JSX), so ``${cond && html`…`}`` works.
   Numbers render, so ``${count && html`…`}`` prints `0` when the count is zero: write
@@ -256,6 +308,11 @@ trimmed to about 90 characters. It never contains a value.
 RCDATA and both quoted attribute forms (not in unquoted values, which are analysis errors).
 Strings with none of these are returned unchanged.
 
+Quotes are escaped in text and RCDATA too, where only `&` and `<` are needed. It costs a few
+bytes (and differs from Svelte's output) but is a second line of defense: should a parser ever
+read a text slot as part of a quoted attribute value, in disagreement with the scanner's model,
+the value still can't close it.
+
 ### 5.2 URL policy
 
 1. Detect the scheme as the URL parser would: skip leading C0 controls and space, ignore
@@ -344,3 +401,15 @@ The first draft of this design was revised during implementation:
     rest of a small render.
 11. **Tests** use a seeded generator instead of `fast-check` (one dev dependency, `parse5`,
     and deterministic runs), plus value round-trips through `parse5`.
+
+Changes after the first release:
+
+12. **`<noscript>` content is modeled** (§3.7), after a port hit it with a localized
+    fallback button. It was an unsupported raw-text element: no slots, content scanned as raw
+    text only. That also accepted a static `</noscript` in an attribute value or comment inside
+    it, where the two readings disagree; that is now an error. The invariance tests parse
+    every template with scripting enabled and disabled.
+13. **`<select>` is modeled** (§3.8). Earlier versions accepted `<title>`, `<style>` and
+    `<svg>` inside it, where older parsers ignore the tag and parse its content as markup:
+    `<select><title><script>${x}</script></title></select>` ran `x`. Those tags are now
+    errors inside `<select>`, and a template must close its `<select>`.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/safe-html",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"type": "module",
 	"main": "dist/mod.js",
 	"types": "dist/mod.d.ts",