@nutin/cli 2.1.1 → 3.0.0

package/templates/base/src/core/base-classes/base-component/helpers/security.helper.test.js.hbs

@@ -1,4 +1,4 @@
-import { SecurityHelper } from '#root/dist/src/core/base-classes/base-component/helpers/security.helper.js';
+import * as SecurityHelper from '#root/dist/src/core/base-classes/base-component/helpers/security.helper.js';
 
 describe('SecurityHelper', () => {
   it('sanitizeTemplate returns an empty string for null and undefined', () => {
@@ -102,28 +102,146 @@ describe('SecurityHelper', () => {
     expect(result.includes('javascript:')).toBe(false);
   });
 
-  it('sanitizeInputElement escapes the value of an input element', () => {
-    const input = document.createElement('input');
-    input.value = '<script>alert(1)</script>';
-    expect(SecurityHelper.sanitizeInputElement(input)).toBe('&lt;script&gt;alert(1)&lt;/script&gt;');
+  it('sanitizeTemplate "normal" level strips javascript: hrefs, including whitespace-obfuscated ones', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<a href="javascript:alert(1)">a</a><a href=" java\tscript:alert(1)">b</a>',
+      'normal'
+    );
+    expect(result).toBe('<a>a</a><a>b</a>');
+  });
+
+  it('sanitizeTemplate "normal" level strips javascript: from form action and formaction', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<form action="javascript:alert(1)"><button formaction="javascript:alert(1)">x</button></form>',
+      'normal'
+    );
+    expect(result.includes('javascript:')).toBe(false);
+  });
+
+  it('sanitizeTemplate "normal" level strips javascript: from svg xlink:href', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<svg><a xlink:href="javascript:alert(1)"><text>x</text></a></svg>',
+      'normal'
+    );
+    expect(result.includes('javascript:')).toBe(false);
   });
 
-  it('sanitizeInputElement escapes the value of a textarea element', () => {
-    const textarea = document.createElement('textarea');
-    textarea.value = '<b>bold</b>';
-    expect(SecurityHelper.sanitizeInputElement(textarea)).toBe('&lt;b&gt;bold&lt;/b&gt;');
+  it('sanitizeTemplate "normal" level keeps safe and data: URLs', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<a href="https://example.com">a</a><img src="data:image/png;base64,AAAA">',
+      'normal'
+    );
+    expect(result).toContain('href="https://example.com"');
+    expect(result).toContain('src="data:image/png;base64,AAAA"');
+  });
+
+  it('sanitizeTemplate "normal" and "strict" levels strip srcdoc, even when its markup is escaped', () => {
+    const template = '<iframe srcdoc="&lt;script&gt;alert(1)&lt;/script&gt;"></iframe>';
+    expect(SecurityHelper.sanitizeTemplate(template, 'normal')).toBe('<iframe></iframe>');
+    expect(SecurityHelper.sanitizeTemplate(template, 'strict')).toBe('');
+  });
+
+  it('sanitizeTemplate "trusted" level keeps javascript: URLs and srcdoc', () => {
+    const template = '<a href="javascript:void(0)">a</a><iframe srcdoc="x"></iframe>';
+    expect(SecurityHelper.sanitizeTemplate(template, 'trusted')).toBe(template);
   });
 
-  it('sanitizeInputElement escapes innerText for contenteditable elements', () => {
-    const div = document.createElement('div');
-    div.setAttribute('contenteditable', 'true');
-    div.innerText = '<i>hi</i>';
-    expect(SecurityHelper.sanitizeInputElement(div)).toBe('&lt;i&gt;hi&lt;/i&gt;');
+  it('sanitizeTemplate "normal" level strips svg <set>/<animate> that rewrite href', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<svg><a>' +
+        '<set attributeName="href" to="javascript:alert(1)"/>' +
+        '<animate attributeName=" HREF " values="javascript:alert(1)"/>' +
+        '<animate attributeName="xlink:href" from="javascript:alert(1)" to="x"/>' +
+        '<text>x</text></a></svg>',
+      'normal'
+    );
+    expect(result.includes('javascript:')).toBe(false);
+    expect(result).toContain('<text>x</text>');
+  });
+
+  it('sanitizeTemplate "normal" level keeps svg animations of non-URL attributes', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<svg><circle r="5"><animate attributeName="opacity" values="0;1" dur="1s"></animate></circle></svg>',
+      'normal'
+    );
+    expect(result).toContain('attributeName="opacity"');
+  });
+
+  it('sanitizeTemplate "normal" level keeps an svg <set> without attributeName', () => {
+    const result = SecurityHelper.sanitizeTemplate('<svg><set to="1"></set></svg>', 'normal');
+    expect(result).toContain('<set to="1">');
+  });
+
+  it('stripBindings removes Nutin binding attributes and keeps the rest', () => {
+    const result = SecurityHelper.stripBindings(
+      '<button class="b" data-event="click:_remove" data-component="x" data-catalog="y" data-bind="z" ' +
+        'data-i18n="k" data-pipe="upper" data-pipe-source="s" data-id="7">x</button>'
+    );
+    expect(result).toBe('<button class="b" data-id="7">x</button>');
+  });
+
+  it('stripBindingsFrom strips an element in place, keeping class, style, other data-* and text', () => {
+    const root = document.createElement('section');
+    root.innerHTML = '<a href="/x" class="link" style="color: red" data-event="click:_go" data-i18n="nav.x" data-card-description>X</a>'
+      + '<div data-component="child" data-catalog="items" data-bind="name" data-pipe="upper" data-pipe-source="v"></div>'
+      + '<pre><code>&lt;div data-component="hello"&gt;&lt;/div&gt;</code></pre>'
+      + '<template><i data-event="click:_x">i</i></template>';
+
+    SecurityHelper.stripBindingsFrom(root);
+
+    const link = root.querySelector('a');
+    expect(link.getAttribute('class')).toBe('link');
+    expect(link.getAttribute('style')).toBe('color: red');
+    expect(link.hasAttribute('data-card-description')).toBe(true);
+    expect(link.hasAttribute('data-event') || link.hasAttribute('data-i18n')).toBe(false);
+    expect(root.querySelector('div').attributes.length).toBe(0);
+    expect(root.querySelector('code').textContent).toBe('<div data-component="hello"></div>');
+    expect(root.querySelector('template').innerHTML).toBe('<i>i</i>');
+  });
+
+  it('stripBindings also strips nested <template> content', () => {
+    const result = SecurityHelper.stripBindings('<template><i data-event="click:_x">i</i></template>');
+    expect(result).toBe('<template><i>i</i></template>');
+  });
+
+  it('sanitizeToFragment returns sanitized nodes without re-serializing them', () => {
+    const fragment = SecurityHelper.sanitizeToFragment('<p onclick="x()">a</p><script>x()</script>', 'normal');
+    expect(fragment.childNodes.length).toBe(1);
+    expect(fragment.firstChild.outerHTML).toBe('<p>a</p>');
+  });
+
+  it('sanitizeToFragment keeps everything at "trusted" and handles null', () => {
+    const fragment = SecurityHelper.sanitizeToFragment('<p onclick="x()">a</p>', 'trusted');
+    expect(fragment.firstChild.getAttribute('onclick')).toBe('x()');
+    expect(SecurityHelper.sanitizeToFragment(null).childNodes.length).toBe(0);
+  });
+
+  it('sanitizeTemplate "normal" level strips style, link, base and meta elements', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<style>p{}</style><link rel="stylesheet" href="/x.css"><base href="/x/"><meta http-equiv="refresh" content="0"><p>ok</p>',
+      'normal'
+    );
+    expect(result).toBe('<p>ok</p>');
+  });
+
+  it('sanitizeTemplate "normal" level strips script and style inside svg', () => {
+    const result = SecurityHelper.sanitizeTemplate('<svg><script>x()</script><style>a{}</style><circle r="1"></circle></svg>', 'normal');
+    expect(result).toBe('<svg><circle r="1"></circle></svg>');
+  });
+
+  it('sanitizeTemplate "normal" level strips data: and javascript: documents from frames but keeps https ones', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<iframe src="data:text/html,x"></iframe><object data="data:text/html,x"></object>' +
+        '<embed src="javascript:x()"><iframe src="https://example.com"></iframe>',
+      'normal'
+    );
+    expect(result).toBe('<iframe></iframe><object></object><embed><iframe src="https://example.com"></iframe>');
   });
 
-  it('sanitizeInputElement returns an empty string for a plain, non-editable element', () => {
-    const div = document.createElement('div');
-    expect(SecurityHelper.sanitizeInputElement(div)).toBe('');
+  it('sanitizeTemplate and stripBindings do not throw on a <template> inside svg', () => {
+    const markup = '<svg><template><text data-event="click:_x" onclick="x()">t</text></template></svg>';
+    expect(SecurityHelper.sanitizeTemplate(markup, 'normal')).toBe('<svg><template><text data-event="click:_x">t</text></template></svg>');
+    expect(SecurityHelper.stripBindings(markup)).toBe('<svg><template><text onclick="x()">t</text></template></svg>');
   });
 
   it('escapeHtml escapes all special characters', () => {

package/templates/base/src/core/base-classes/base-component/helpers/security.helper.ts.hbs

@@ -1,101 +1,219 @@
-export type TrustLevel = 'strict' | 'normal' | 'trusted';
-
-export class SecurityHelper {
-  private static readonly STRICT_STRIPPED_TAGS = new Set(['IFRAME', 'OBJECT', 'EMBED']);
-  private static readonly URL_ATTRS = new Set([
-    'href',
-    'src',
-    'action',
-    'formaction',
-    'poster',
-    'background',
-  ]);
-  private static readonly DANGEROUS_URL_SCHEMES = /^(javascript|data):/i;
-
-  public static sanitizeTemplate(value: unknown, trustLevel: TrustLevel = 'normal'): string {
-    if (value === null || value === undefined) return '';
-    let template = String(value);
-
-    return this.sanitizeInputTemplate(template, trustLevel);
-  }
+// Compared against localName, so SVG/MathML elements of the same name are caught too.
+// style/link restyle the whole page, base moves every relative URL, meta can refresh/navigate.
+const STRIPPED_TAGS = new Set(['script', 'style', 'link', 'base', 'meta']);
+const STRICT_STRIPPED_TAGS = new Set(['iframe', 'object', 'embed', 'frame']);
 
-  public static sanitizeInputElement(
-    el: HTMLInputElement | HTMLTextAreaElement | HTMLElement
-  ): string {
-    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-      return SecurityHelper.escapeHtml(el.value);
-    }
-    if (el.hasAttribute('contenteditable')) {
-      return SecurityHelper.escapeHtml(el.innerText);
-    }
-    return '';
+// A data: document in a frame runs its own scripts (opaque origin): only allowed at 'trusted'.
+const FRAME_TAGS = new Set(['iframe', 'object', 'embed', 'frame']);
+const FRAME_URL_ATTRS = new Set(['src', 'data']);
+const URL_ATTRS = new Set([
+  'href',
+  'src',
+  'action',
+  'formaction',
+  'poster',
+  'background',
+  'xlink:href',
+]);
+
+// Attributes Nutin acts on after render: in injected markup they bind to the component's methods/children.
+const BINDING_ATTRS = [
+  'data-event',
+  'data-component',
+  'data-catalog',
+  'data-bind',
+  'data-i18n',
+  'data-pipe',
+  'data-pipe-source',
+];
+
+// SVG <animate>/<set> can rewrite an attribute after sanitization: drop those targeting a URL attribute.
+const ATTR_ANIMATION_TAGS = new Set(['animate', 'set']);
+
+// javascript: is stripped from 'normal' up; data: only under 'strict' (data: images are legitimate).
+const SCRIPT_URL_SCHEME = /^javascript:/i;
+const STRICT_URL_SCHEMES = /^(javascript|data):/i;
+
+// String form of sanitizeToFragment(). Rendering inserts the fragment instead: assigning
+// this string to innerHTML parses it a second time.
+export function sanitizeTemplate(value: unknown, trustLevel: Nutin.TrustLevel = 'normal'): string {
+  if (value === null || value === undefined) return '';
+  if (trustLevel === 'trusted' && !rawsOf(value)) return String(value);
+
+  const holder = document.createElement('template');
+  holder.content.append(sanitizeToFragment(value, trustLevel));
+  return holder.innerHTML;
+}
+
+export function escapeHtml(value: unknown): string {
+  if (value === null || value === undefined) return '';
+
+  return String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+// Parses once and returns the sanitized nodes: inserting them directly means the browser never re-parses the
+// cleaned markup, which is where mutation XSS turns inert text back into elements.
+// A SafeHtml from html`` may carry raw() sources behind placeholders: each is parsed once,
+// in its real parent context, stripped of bindings and sanitized as nodes, then put in place.
+export function sanitizeToFragment(value: unknown, trustLevel: Nutin.TrustLevel = 'normal'): DocumentFragment {
+  const holder = document.createElement('template');
+  const raws = rawsOf(value);
+  holder.innerHTML = value === null || value === undefined ? '' : raws ? (value as { value: string }).value : String(value);
+  if (trustLevel !== 'trusted') sanitizeNode(holder.content, trustLevel);
+  if (raws) resolveRaws(holder.content, raws, trustLevel);
+  return holder.content;
+}
+
+// raw() in attribute position (`<a ${raw('aria-current="page"')}>`): rebuilt from the parsed
+// attributes, minus event handlers, srcdoc, bindings and script URLs.
+export function sanitizeAttributes(source: string): string {
+  const holder = document.createElement('template');
+  holder.innerHTML = `<span ${source}></span>`;
+  // An unterminated quote makes the parser drop the whole tag: nothing to keep.
+  const el = holder.content.firstElementChild;
+  if (!el) return '';
+  return Array.from(el.attributes)
+    .filter((attr) => isAllowedRawAttribute(attr.name.toLowerCase(), attr.value))
+    .map((attr) => `${attr.name}="${escapeHtml(attr.value)}"`)
+    .join(' ');
+}
+
+// A javascript: URL in a URL attribute (name lowercased). html`` checks values from data with it at
+// every trust level, since the render sanitizer doesn't run at 'trusted'.
+export function isScriptUrl(name: string, value: string): boolean {
+  return URL_ATTRS.has(name) && isDangerousUrl(value, 'normal');
+}
+
+export function stripBindings(markup: string): string {
+  const holder = document.createElement('template');
+  holder.innerHTML = markup;
+  stripBindingsFrom(holder.content);
+  return holder.innerHTML;
+}
+
+// In place, inside <template> content too. Also used by SEO prerendering: nothing binds a
+// prerendered page (the app re-renders it), so its binding attributes are dead weight.
+export function stripBindingsFrom(root: ParentNode): void {
+  const selector = BINDING_ATTRS.map((attr) => `[${attr}]`).join(',');
+  root.querySelectorAll(selector).forEach((el) => {
+    BINDING_ATTRS.forEach((attr) => el.removeAttribute(attr));
+  });
+  root.querySelectorAll('template').forEach((el) => {
+    const content = templateContent(el);
+    if (content) stripBindingsFrom(content);
+  });
+}
+
+function rawsOf(value: unknown): ReadonlyMap<string, string> | null {
+  const raws = (value as { raws?: unknown } | null)?.raws;
+  return raws instanceof Map ? raws : null;
+}
+
+function resolveRaws(root: ParentNode, raws: ReadonlyMap<string, string>, trustLevel: Nutin.TrustLevel): void {
+  // Snapshot first: content put in place is never searched for placeholders again.
+  for (const placeholder of collectPlaceholders(root)) {
+    const source = raws.get(placeholder.getAttribute('data-nutin-raw') ?? '');
+    const parsed = parseInContext(source ?? '', placeholder.parentNode);
+    if (trustLevel !== 'trusted') sanitizeNode(parsed, trustLevel);
+    stripBindingsFrom(parsed);
+    placeholder.replaceWith(...Array.from(parsed.childNodes));
   }
+}
 
-  public static escapeHtml(value: unknown): string {
-    if (value === null || value === undefined) return '';
+function collectPlaceholders(root: ParentNode): Element[] {
+  const found: Element[] = [];
+  root.querySelectorAll('template').forEach((el) => {
+    if (el.hasAttribute('data-nutin-raw')) found.push(el);
+    const content = templateContent(el);
+    if (content) found.push(...collectPlaceholders(content));
+  });
+  return found;
+}
 
-    return String(value)
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;');
+// Parses inside the inert document behind <template> (nothing loads or runs there), using an
+// element like the placeholder's parent as context so <svg>/<math>/<table> content parses as
+// it will once inserted.
+function parseInContext(source: string, parent: Node | null): ParentNode {
+  const holder = document.createElement('template');
+  const parentEl = parent && parent.nodeType === 1 ? (parent as Element) : null;
+  if (parentEl && !templateContent(parentEl)) {
+    const context = holder.content.ownerDocument.createElementNS(parentEl.namespaceURI, parentEl.localName);
+    context.innerHTML = source;
+    return context;
   }
+  holder.innerHTML = source;
+  return holder.content;
+}
 
-  private static sanitizeInputTemplate(template: string, trustLevel: TrustLevel): string {
-    // Trusted: no template sanitization
-    if (trustLevel === 'trusted') {
-      return template;
-    }
+function isAllowedRawAttribute(name: string, value: string): boolean {
+  if (!/^[a-z_:][-a-z0-9_:.]*$/.test(name)) return false;
+  if (name.startsWith('on') || name === 'srcdoc' || BINDING_ATTRS.includes(name)) return false;
+  return !isScriptUrl(name, value);
+}
 
-    const holder = document.createElement('template');
-    holder.innerHTML = template;
-    this.sanitizeNode(holder.content, trustLevel);
+// Only an HTML <template> has a content fragment; <svg><template> is a plain element.
+function templateContent(el: Element): DocumentFragment | null {
+  const content = (el as HTMLTemplateElement).content;
+  return content && typeof content.querySelectorAll === 'function' ? content : null;
+}
 
-    return holder.innerHTML;
-  }
+function sanitizeNode(root: ParentNode, trustLevel: Nutin.TrustLevel): void {
+  // Snapshot children before mutating — removing an element from a live
+  // collection while iterating it would skip its next sibling.
+  const children = Array.from(root.children);
 
-  private static sanitizeNode(root: ParentNode, trustLevel: TrustLevel): void {
-    // Snapshot children before mutating — removing an element from a live
-    // collection while iterating it would skip its next sibling.
-    const children = Array.from(root.children);
+  for (const el of children) {
+    const tag = el.localName.toLowerCase();
 
-    for (const el of children) {
-      const tag = el.tagName;
+    if (STRIPPED_TAGS.has(tag)) {
+      el.remove();
+      continue;
+    }
+    if (trustLevel === 'strict' && STRICT_STRIPPED_TAGS.has(tag)) {
+      el.remove();
+      continue;
+    }
+    if (animatesUrlAttribute(el)) {
+      el.remove();
+      continue;
+    }
 
-      if (tag === 'SCRIPT') {
-        el.remove();
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      // srcdoc is parsed as a same-origin document: escaped markup in it is decoded and runs.
+      if (name.startsWith('on') || name === 'srcdoc') {
+        el.removeAttribute(attr.name);
         continue;
       }
-      if (trustLevel === 'strict' && this.STRICT_STRIPPED_TAGS.has(tag)) {
-        el.remove();
+      if (URL_ATTRS.has(name) && isDangerousUrl(attr.value, trustLevel)) {
+        el.removeAttribute(attr.name);
         continue;
       }
-
-      for (const attr of Array.from(el.attributes)) {
-        const name = attr.name.toLowerCase();
-        if (name.startsWith('on')) {
-          el.removeAttribute(attr.name);
-          continue;
-        }
-        if (trustLevel === 'strict' && this.URL_ATTRS.has(name) && this.isDangerousUrl(attr.value)) {
-          el.removeAttribute(attr.name);
-        }
-      }
-
-      if (tag === 'TEMPLATE') {
-        this.sanitizeNode((el as HTMLTemplateElement).content, trustLevel);
-      } else {
-        this.sanitizeNode(el, trustLevel);
+      if (FRAME_TAGS.has(tag) && FRAME_URL_ATTRS.has(name) && isDangerousUrl(attr.value, 'strict')) {
+        el.removeAttribute(attr.name);
       }
     }
-  }
 
-  private static isDangerousUrl(value: string): boolean {
-    // Browsers strip ASCII tab/newline/CR from a URL (and trim leading C0
-    // control/space) before scheme-sniffing, so "java\tscript:" still runs
-    // as javascript: — normalize the same way before checking the scheme.
-    const normalized = value.replace(/[\t\n\r]/g, '').replace(/^[\x00-\x20]+/, '');
-    return this.DANGEROUS_URL_SCHEMES.test(normalized);
+    sanitizeNode(templateContent(el) ?? el, trustLevel);
   }
 }
+
+function animatesUrlAttribute(el: Element): boolean {
+  if (!ATTR_ANIMATION_TAGS.has(el.localName.toLowerCase())) return false;
+  const target = (el.getAttribute('attributeName') ?? '').trim().toLowerCase();
+  return URL_ATTRS.has(target) || URL_ATTRS.has(target.replace(/^xlink:/, ''));
+}
+
+function isDangerousUrl(value: string, trustLevel: Nutin.TrustLevel): boolean {
+  // Browsers strip ASCII tab/newline/CR from a URL (and trim leading C0
+  // control/space) before scheme-sniffing, so "java\tscript:" still runs
+  // as javascript: — normalize the same way before checking the scheme.
+  const normalized = value.replace(/[\t\n\r]/g, '').replace(/^[\x00-\x20]+/, '');
+  const schemes = trustLevel === 'strict' ? STRICT_URL_SCHEMES : SCRIPT_URL_SCHEME;
+  return schemes.test(normalized);
+}

package/templates/base/src/core/base-classes/base-component/helpers/token.helper.test.js.hbs

@@ -1,4 +1,4 @@
-import { TokenHelper } from '#root/dist/src/core/base-classes/base-component/helpers/token.helper.js';
+import * as TokenHelper from '#root/dist/src/core/base-classes/base-component/helpers/token.helper.js';
 
 describe('TokenHelper', () => {
   const makeEvent = (overrides = {}) => ({
@@ -11,26 +11,26 @@ describe('TokenHelper', () => {
     ...overrides,
   });
 
-  it('resolve always calls event.preventDefault()', () => {
+  it('resolve leaves the event default alone', () => {
     let called = false;
     const ev = makeEvent({ preventDefault: () => { called = true; } });
     TokenHelper.resolve('@id', document.createElement('div'), ev);
-    expect(called).toBe(true);
+    expect(called).toBe(false);
   });
 
-  it('@id resolves and escapes the element id', () => {
+  it('@id resolves the raw element id', () => {
     const el = document.createElement('div');
     el.id = '<x>';
-    expect(TokenHelper.resolve('@id', el, makeEvent())).toBe('&lt;x&gt;');
+    expect(TokenHelper.resolve('@id', el, makeEvent())).toBe('<x>');
   });
 
-  it('@class resolves the escaped className', () => {
+  it('@class resolves the className', () => {
     const el = document.createElement('div');
     el.className = 'a b';
     expect(TokenHelper.resolve('@class', el, makeEvent())).toBe('a b');
   });
 
-  it('@name resolves the escaped name attribute', () => {
+  it('@name resolves the name attribute', () => {
     const el = document.createElement('input');
     el.name = 'field';
     expect(TokenHelper.resolve('@name', el, makeEvent())).toBe('field');
@@ -41,15 +41,32 @@ describe('TokenHelper', () => {
     expect(TokenHelper.resolve('@name', el, makeEvent())).toBe('');
   });
 
-  it('@tag resolves the escaped tag name', () => {
+  it('@tag resolves the tag name', () => {
     const el = document.createElement('div');
     expect(TokenHelper.resolve('@tag', el, makeEvent())).toBe('DIV');
   });
 
-  it('@value resolves the sanitized input value', () => {
+  it('@value resolves the raw input value', () => {
     const el = document.createElement('input');
-    el.value = '<b>';
-    expect(TokenHelper.resolve('@value', el, makeEvent())).toBe('&lt;b&gt;');
+    el.value = '<b> & "c"';
+    expect(TokenHelper.resolve('@value', el, makeEvent())).toBe('<b> & "c"');
+  });
+
+  it('@value resolves the raw value of a textarea', () => {
+    const el = document.createElement('textarea');
+    el.value = '<b>bold</b>';
+    expect(TokenHelper.resolve('@value', el, makeEvent())).toBe('<b>bold</b>');
+  });
+
+  it('@value resolves innerText for contenteditable elements', () => {
+    const el = document.createElement('div');
+    el.setAttribute('contenteditable', 'true');
+    el.innerText = '<i>hi</i>';
+    expect(TokenHelper.resolve('@value', el, makeEvent())).toBe('<i>hi</i>');
+  });
+
+  it('@value resolves an empty string for a plain, non-editable element', () => {
+    expect(TokenHelper.resolve('@value', document.createElement('div'), makeEvent())).toBe('');
   });
 
   it('@checked resolves the checked state', () => {
@@ -67,30 +84,30 @@ describe('TokenHelper', () => {
     expect(TokenHelper.resolve('@selected', option, makeEvent())).toBe(true);
   });
 
-  it('@textContent resolves escaped textContent', () => {
+  it('@textContent resolves raw textContent', () => {
     const el = document.createElement('div');
     el.textContent = '<i>';
-    expect(TokenHelper.resolve('@textContent', el, makeEvent())).toBe('&lt;i&gt;');
+    expect(TokenHelper.resolve('@textContent', el, makeEvent())).toBe('<i>');
   });
 
   it('@textContent falls back to an empty string when el has no textContent', () => {
     expect(TokenHelper.resolve('@textContent', {}, makeEvent())).toBe('');
   });
 
-  it('@innerText resolves escaped innerText', () => {
+  it('@innerText resolves raw innerText', () => {
     const el = document.createElement('div');
     el.innerText = '<i>';
-    expect(TokenHelper.resolve('@innerText', el, makeEvent())).toBe('&lt;i&gt;');
+    expect(TokenHelper.resolve('@innerText', el, makeEvent())).toBe('<i>');
   });
 
   it('@innerText falls back to an empty string when el has no innerText', () => {
     expect(TokenHelper.resolve('@innerText', {}, makeEvent())).toBe('');
   });
 
-  it('@html resolves escaped innerHTML', () => {
+  it('@html resolves raw innerHTML', () => {
     const el = document.createElement('div');
     el.innerHTML = '<i>x</i>';
-    expect(TokenHelper.resolve('@html', el, makeEvent())).toBe('&lt;i&gt;x&lt;/i&gt;');
+    expect(TokenHelper.resolve('@html', el, makeEvent())).toBe('<i>x</i>');
   });
 
   it('@html falls back to an empty string when el has no innerHTML', () => {
@@ -120,9 +137,9 @@ describe('TokenHelper', () => {
     expect(TokenHelper.resolve('@y', document.createElement('div'), ev)).toBe(0);
   });
 
-  it('@key and @code resolve to escaped keyboard event properties', () => {
+  it('@key and @code resolve to raw keyboard event properties', () => {
     const ev = makeEvent({ key: '<', code: 'KeyA' });
-    expect(TokenHelper.resolve('@key', document.createElement('div'), ev)).toBe('&lt;');
+    expect(TokenHelper.resolve('@key', document.createElement('div'), ev)).toBe('<');
     expect(TokenHelper.resolve('@code', document.createElement('div'), ev)).toBe('KeyA');
   });
 
@@ -132,10 +149,10 @@ describe('TokenHelper', () => {
     expect(TokenHelper.resolve('@code', document.createElement('div'), ev)).toBe('');
   });
 
-  it('@attr: resolves an escaped attribute value', () => {
+  it('@attr: resolves the raw attribute value', () => {
     const el = document.createElement('div');
     el.setAttribute('title', '<t>');
-    expect(TokenHelper.resolve('@attr:title', el, makeEvent())).toBe('&lt;t&gt;');
+    expect(TokenHelper.resolve('@attr:title', el, makeEvent())).toBe('<t>');
   });
 
   it('@attr: falls back to an empty string when the attribute is missing', () => {
@@ -143,10 +160,10 @@ describe('TokenHelper', () => {
     expect(TokenHelper.resolve('@attr:title', el, makeEvent())).toBe('');
   });
 
-  it('@dataset: resolves an escaped dataset value', () => {
+  it('@dataset: resolves the raw dataset value', () => {
     const el = document.createElement('div');
     el.dataset.foo = '<f>';
-    expect(TokenHelper.resolve('@dataset:foo', el, makeEvent())).toBe('&lt;f&gt;');
+    expect(TokenHelper.resolve('@dataset:foo', el, makeEvent())).toBe('<f>');
   });
 
   it('@dataset: falls back to an empty string when the dataset key is missing', () => {