@nutin/cli 2.1.0 → 3.0.0

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

@@ -0,0 +1,404 @@
+import { Component, View, html, raw, trustedRaw, SafeHtml } from '#root/dist/src/core/index.js';
+
+class TestComponent extends Component {
+  constructor(options = {}) {
+    super(options);
+  }
+
+  _remove() {
+    this.removed = true;
+  }
+}
+
+class TestView extends View {
+  constructor(template) {
+    super({ template, viewName: 'html-test' });
+  }
+}
+
+describe('html', () => {
+  let app;
+
+  beforeEach(() => {
+    app = document.getElementById('app');
+  });
+
+  afterEach(() => {
+    app.innerHTML = '';
+    app = null;
+  });
+
+  it('html returns a SafeHtml whose toString is the markup', () => {
+    const result = html`<p>hi</p>`;
+    expect(result instanceof SafeHtml).toBe(true);
+    expect(String(result)).toBe('<p>hi</p>');
+  });
+
+  it('html escapes interpolated strings', () => {
+    expect(String(html`<p>${'<b class="x">a & \'b\'</b>'}</p>`))
+      .toBe('<p>&lt;b class=&quot;x&quot;&gt;a &amp; &#039;b&#039;&lt;/b&gt;</p>');
+  });
+
+  it('html escapes quotes so a value cannot break out of an attribute', () => {
+    const value = '" autofocus onfocus="alert(1)';
+    expect(String(html`<input value="${value}">`))
+      .toBe('<input value="&quot; autofocus onfocus=&quot;alert(1)">');
+  });
+
+  it('html stringifies numbers and true, and renders null, undefined and false as empty', () => {
+    expect(String(html`${1}|${true}|${null}|${undefined}|${false}|${0}`)).toBe('1|true||||0');
+  });
+
+  it('html keeps null and undefined as literal strings in a data-optional value only', () => {
+    expect(String(html`<p data-optional="${undefined}">a</p>`)).toBe('<p data-optional="undefined">a</p>');
+    expect(String(html`<p data-optional='${null}'>a</p>`)).toBe(`<p data-optional='null'>a</p>`);
+    expect(String(html`<p data-optional=${undefined}>a</p>`)).toBe('<p data-optional="undefined">a</p>');
+    expect(String(html`<p data-optional="${'x'}" title="${undefined}">${undefined}</p>`)).toBe('<p data-optional="x" title=""></p>');
+  });
+
+  it('data-optional="${value}" removes the element when value is undefined, even with other content', () => {
+    const component = new TestComponent({
+      config: {},
+      templateFn: (cfg) => html`<div><h3 data-optional="${cfg.title}">• ${cfg.title}</h3><p data-optional="${'kept'}">• kept</p></div>`,
+    });
+
+    component.render();
+
+    expect(component.getElement().querySelector('h3')).toBe(null);
+    expect(component.getElement().querySelector('p').textContent).toBe('• kept');
+  });
+
+  it('html inserts nested html results without escaping them again', () => {
+    const inner = html`<b>${'<i>'}</b>`;
+    expect(String(html`<p>${inner}</p>`)).toBe('<p><b>&lt;i&gt;</b></p>');
+  });
+
+  it('html joins arrays item by item, escaping strings and keeping SafeHtml', () => {
+    const items = ['<a>', 'b'].map((item) => html`<li>${item}</li>`);
+    expect(String(html`<ul>${items}${['<c>']}</ul>`)).toBe('<ul><li>&lt;a&gt;</li><li>b</li>&lt;c&gt;</ul>');
+  });
+
+  it('raw inserts markup unescaped and renders null and undefined as empty', () => {
+    expect(String(html`<div>${raw('<em>x</em>')}</div>`)).toBe('<div><em>x</em></div>');
+    expect(String(raw(null))).toBe('');
+    expect(String(raw(undefined))).toBe('');
+  });
+
+  it('raw keeps a plain attribute fragment unchanged', () => {
+    expect(String(html`<a ${raw('aria-current="page"')}>x</a>`)).toBe('<a aria-current="page">x</a>');
+  });
+
+  it('raw strips binding attributes so injected markup cannot call component methods', () => {
+    const component = new TestComponent({
+      config: { body: '<button class="evil" data-event="click:_remove">x</button>' },
+      templateFn: (cfg) => html`<div>${raw(cfg.body)}</div>`,
+    });
+
+    component.render();
+    const button = component.getElement().querySelector('button.evil');
+    button.click();
+
+    expect(button.hasAttribute('data-event')).toBe(false);
+    expect(component.removed).toBe(undefined);
+  });
+
+  it('raw content is parsed in its parent context and stripped there (svg)', () => {
+    const component = new TestComponent({
+      templateFn: () => html`<svg>${raw('<style><button class="hidden" data-event="click:_remove">x</button></style>')}</svg>`,
+    });
+
+    component.render();
+    component.getElement().querySelectorAll('[class="hidden"], button').forEach((el) => el.dispatchEvent(new Event('click')));
+
+    expect(component.getElement().querySelector('[data-event]')).toBe(null);
+    expect(component.removed).toBe(undefined);
+  });
+
+  it('raw content is parsed in its parent context (table)', () => {
+    const component = new TestComponent({
+      templateFn: () => html`<table>${raw('<tr><td>cell</td></tr>')}</table>`,
+    });
+
+    component.render();
+
+    expect(component.getElement().querySelector('table td').textContent).toBe('cell');
+    expect(component.getElement().querySelector('template')).toBe(null);
+  });
+
+  it('raw content inside nested html and arrays is resolved', () => {
+    const items = ['<b>1</b>', '<b>2</b>'].map((item) => html`<li>${raw(item)}</li>`);
+    const component = new TestComponent({ templateFn: () => html`<ul>${items}</ul>` });
+
+    component.render();
+
+    expect(component.getElement().innerHTML).toBe('<ul><li><b>1</b></li><li><b>2</b></li></ul>');
+  });
+
+  it('raw content is sanitized at the component trust level', () => {
+    const component = new TestComponent({
+      templateFn: () => html`<div>${raw('<img src="x.png" onerror="x()"><script>x()</script>')}</div>`,
+    });
+
+    component.render();
+
+    expect(component.getElement().innerHTML).toBe('<div><img src="x.png"></div>');
+  });
+
+  it('String() of html with raw inlines the raw markup without bindings', () => {
+    expect(String(html`<p>${raw('<b data-event="click:_x">b</b>')}</p>`)).toBe('<p><b>b</b></p>');
+  });
+
+  it('raw at the top level and inside an HTML template is resolved', () => {
+    const component = new TestComponent({
+      templateFn: () => html`${raw('<b data-event="click:_remove">top</b>')}<template>${raw('<i>in</i>')}</template>`,
+    });
+
+    component.render();
+    const el = component.getElement();
+
+    expect(el.querySelector('b').outerHTML).toBe('<b>top</b>');
+    expect(el.querySelector('template').content.querySelector('i').textContent).toBe('in');
+  });
+
+  it('raw inside an svg template is parsed as svg', () => {
+    const component = new TestComponent({
+      templateFn: () => html`<svg><template>${raw('<text>t</text>')}</template></svg>`,
+    });
+
+    component.render();
+
+    expect(component.getElement().querySelector('svg text').namespaceURI).toBe('http://www.w3.org/2000/svg');
+  });
+
+  it('a placeholder without a matching raw source is removed', () => {
+    const component = new TestComponent({
+      templateFn: () => html`${trustedRaw('<template data-nutin-raw="missing"></template>')}<p>x</p>`,
+    });
+
+    component.render();
+
+    expect(component.getElement().innerHTML).toBe('<p>x</p>');
+  });
+
+  it('trustedRaw keeps binding attributes', () => {
+    const component = new TestComponent({
+      templateFn: () => html`<div>${trustedRaw('<button class="own" data-event="click:_remove">x</button>')}</div>`,
+    });
+
+    component.render();
+    component.getElement().querySelector('button.own').click();
+
+    expect(component.removed).toBe(true);
+  });
+
+  it('trustedRaw renders null and undefined as empty', () => {
+    expect(String(trustedRaw(null))).toBe('');
+    expect(String(trustedRaw(undefined))).toBe('');
+  });
+
+  it('html quotes a value in an unquoted attribute so it stays one attribute', () => {
+    expect(String(html`<div title=${'a data-event=click:_remove'}>t</div>`))
+      .toBe('<div title="a data-event=click:_remove">t</div>');
+    expect(String(html`<div title=${''} id="x">t</div>`)).toBe('<div title="" id="x">t</div>');
+  });
+
+  it('html encodes terminators inside an unquoted value that is already started', () => {
+    expect(String(html`<div class=a${' b=c'}>t</div>`)).toBe('<div class=a&#32;b&#61;c>t</div>');
+  });
+
+  it('html quotes nested html results in unquoted attributes too', () => {
+    expect(String(html`<div title=${html`a ${'b'}`}>t</div>`)).toBe('<div title="a b">t</div>');
+  });
+
+  it('html leaves "=" in text and quoted attributes alone', () => {
+    expect(String(html`<p>Total = ${5}</p><a title="${'x y'}">l</a>`)).toBe('<p>Total = 5</p><a title="x y">l</a>');
+  });
+
+  it('raw in attribute position keeps plain attributes and drops handlers, bindings and script URLs', () => {
+    const attrs = 'checked aria-label="ok" onclick="x()" data-event="click:_remove" href="javascript:x()" srcdoc="x"';
+    expect(String(html`<input ${raw(attrs)}>`)).toBe('<input checked="" aria-label="ok">');
+  });
+
+  it('html tracks single-quoted, spaced and empty unquoted attributes', () => {
+    expect(String(html`<a title='${"x'y"}' id=${'i d'}>t</a>`)).toBe('<a title=\'x&#039;y\' id="i d">t</a>');
+    expect(String(html`<a title= ${'v w'}>t</a>`)).toBe('<a title= "v w">t</a>');
+    expect(String(html`<a title=>${'<t>'}</a>`)).toBe('<a title=>&lt;t&gt;</a>');
+  });
+
+  it('html returns to text and tag states after an unquoted value', () => {
+    expect(String(html`<a class=x>${'a b'}</a>`)).toBe('<a class=x>a b</a>');
+    expect(String(html`<a class=x title=${'v w'}>t</a>`)).toBe('<a class=x title="v w">t</a>');
+  });
+
+  it('html keeps plain attributes interpolated in tag position', () => {
+    expect(String(html`<input ${true ? 'disabled' : ''}>`)).toBe('<input disabled="">');
+    expect(String(html`<input ${'aria-label="ok"'}>`)).toBe('<input aria-label="ok">');
+    expect(String(html`<input ${''}>`)).toBe('<input >');
+  });
+
+  it('html drops handlers, bindings and script URLs interpolated as a plain string in tag position', () => {
+    expect(String(html`<div ${'data-event=click:_remove'}>x</div>`)).toBe('<div >x</div>');
+    expect(String(html`<a ${'href=javascript:x() onclick=x()'}>x</a>`)).toBe('<a >x</a>');
+  });
+
+  it('a binding attribute injected in tag position cannot call a component method', () => {
+    const component = new TestComponent({
+      config: { attrs: 'data-event=click:_remove' },
+      templateFn: (cfg) => html`<button ${cfg.attrs}>x</button>`,
+    });
+
+    component.render();
+    component.getElement().querySelector('button').click();
+
+    expect(component.removed).toBe(undefined);
+  });
+
+  it('raw in an attribute value position is escaped as text', () => {
+    expect(String(html`<a title="${raw('<b>"q"</b>')}">t</a>`)).toBe('<a title="&lt;b&gt;&quot;q&quot;&lt;/b&gt;">t</a>');
+  });
+
+  it('raw in attribute position with an unterminated quote yields no attributes', () => {
+    expect(String(html`<b ${raw('a="x')}>t</b>`)).toBe('<b >t</b>');
+  });
+
+  it('raw in attribute position drops attributes with invalid names', () => {
+    expect(String(html`<b ${raw('a"b="1" ok="2"')}>t</b>`)).toBe('<b ok="2">t</b>');
+  });
+
+  it('html replaces a javascript: URL from data in a URL attribute and warns', () => {
+    const warnSpy = spyOn(console, 'warn').andCallFake(() => {});
+    const bad = 'javascript:alert(1)';
+    const results = [
+      String(html`<a href="${bad}">x</a>`),
+      String(html`<a href='${bad}'>x</a>`),
+      String(html`<a href=${bad}>x</a>`),
+      String(html`<a href=" ${bad}">x</a>`),
+      String(html`<a HREF="${'java\tscript:x'}">x</a>`),
+      String(html`<a href="${'JavaScript:x'}">x</a>`),
+      String(html`<button formaction="${bad}">x</button>`),
+      String(html`<svg><a xlink:href="${bad}">x</a></svg>`),
+      String(html`<a href="${html`${bad}`}">x</a>`),
+      String(html`<a href="${raw(bad)}">x</a>`),
+      String(html`<a href="${'java'}${'script:x'}">x</a>`),
+    ];
+    warnSpy.restore();
+
+    expect(results).toEqual([
+      '<a href="about:invalid#nutin-blocked">x</a>',
+      "<a href='about:invalid#nutin-blocked'>x</a>",
+      '<a href="about:invalid#nutin-blocked">x</a>',
+      '<a href=" about:invalid#nutin-blocked">x</a>',
+      '<a HREF="about:invalid#nutin-blocked">x</a>',
+      '<a href="about:invalid#nutin-blocked">x</a>',
+      '<button formaction="about:invalid#nutin-blocked">x</button>',
+      '<svg><a xlink:href="about:invalid#nutin-blocked">x</a></svg>',
+      '<a href="about:invalid#nutin-blocked">x</a>',
+      '<a href="about:invalid#nutin-blocked">x</a>',
+      '<a href="javaabout:invalid#nutin-blocked">x</a>',
+    ]);
+    expect(warnSpy.callCount).toBe(11);
+  });
+
+  it('a javascript: URL from data is blocked at the trusted level too', () => {
+    const component = new TestComponent({
+      config: { url: 'javascript:alert(1)' },
+      templateFn: (cfg) => html`<a href="${cfg.url}">x</a>`,
+      trustLevel: 'trusted',
+    });
+
+    silenceConsole('warn', () => component.render());
+
+    expect(component.getElement().querySelector('a').getAttribute('href')).toBe('about:invalid#nutin-blocked');
+  });
+
+  it('html keeps URLs whose scheme is fixed by the template, other schemes and non-URL attributes', () => {
+    const warnSpy = spyOn(console, 'warn').andCallFake(() => {});
+    const results = [
+      String(html`<a href="/p/${'javascript:x'}">x</a>`),
+      String(html`<a href="#${'javascript:x'}">x</a>`),
+      String(html`<a href="${'https://example.com/a'}">x</a>`),
+      String(html`<a title="${'javascript:x'}" data-x=${'javascript:x'}>x</a>`),
+      String(html`<a href="javascript:go(${1})">x</a>`),
+      String(html`<a title="t"href="${'/ok'}">x</a>`),
+    ];
+    warnSpy.restore();
+
+    expect(results).toEqual([
+      '<a href="/p/javascript:x">x</a>',
+      '<a href="#javascript:x">x</a>',
+      '<a href="https://example.com/a">x</a>',
+      '<a title="javascript:x" data-x="javascript:x">x</a>',
+      '<a href="javascript:go(1)">x</a>',
+      '<a title="t"href="/ok">x</a>',
+    ]);
+    expect(warnSpy.callCount).toBe(0);
+  });
+
+  it('raw in a textarea or title is inserted as text, with entities decoded', () => {
+    app.innerHTML = String(html`<textarea>${raw('<b>Tom &amp; Jerry</b>')}</textarea>`);
+    expect(app.querySelector('textarea').value).toBe('<b>Tom & Jerry</b>');
+
+    const fragment = String(html`<TITLE>${raw('<i>t</i>')}</TITLE>`);
+    expect(fragment).toBe('<TITLE>&lt;i>t&lt;/i></TITLE>');
+  });
+
+  it('raw in a textarea cannot close it, in String() and at render', () => {
+    const payload = '</textarea><img src="x" onerror="x()">';
+    expect(String(html`<textarea>${raw(payload)}</textarea>`))
+      .toBe('<textarea>&lt;/textarea>&lt;img src="x" onerror="x()"></textarea>');
+
+    const component = new TestComponent({ templateFn: () => html`<div><textarea>${raw(payload)}</textarea></div>` });
+    component.render();
+
+    expect(component.getElement().querySelector('img')).toBe(null);
+    expect(component.getElement().querySelector('textarea').value).toBe(payload);
+  });
+
+  it('nested html and trustedRaw in a textarea are kept as they are, raws inside nested html become text', () => {
+    expect(String(html`<title>${html`${'Tom & Jerry'} - Site`}</title>`)).toBe('<title>Tom &amp; Jerry - Site</title>');
+    expect(String(html`<textarea>${trustedRaw('a &amp; b')}</textarea>`)).toBe('<textarea>a &amp; b</textarea>');
+    expect(String(html`<textarea>${[html`<b>${raw('<i>$&</i>')}</b>`, 'x', null]}</textarea>`))
+      .toBe('<textarea><b>&lt;i>$&&lt;/i></b>x</textarea>');
+  });
+
+  it('html tracks the end of a textarea: tag position on it and raw after it work as usual', () => {
+    const result = html`<textarea ${raw('rows="3" onclick="x()"')}>a</textarea >${raw('<b>b</b>')}`;
+
+    expect(/^<textarea rows="3">a<\/textarea ><template data-nutin-raw="r\d+"><\/template>$/.test(result.value)).toBe(true);
+    expect(result.raws.size).toBe(1);
+  });
+
+  it('a raw after a textarea is resolved as nodes at render', () => {
+    const component = new TestComponent({
+      templateFn: () => html`<div><textarea>a < b</textarea>${raw('<b>bold</b>')}</div>`,
+    });
+    component.render();
+
+    expect(component.getElement().innerHTML).toBe('<div><textarea>a &lt; b</textarea><b>bold</b></div>');
+  });
+
+  it('String() of a raw containing $ patterns keeps them literally', () => {
+    expect(String(html`<p>${raw('cost: $& $1')}</p>`)).toBe('<p>cost: $&amp; $1</p>');
+  });
+
+  it('a component templateFn using html renders injected markup as text', () => {
+    const payload = '<button class="evil" data-event="click:_remove">x</button>';
+    const component = new TestComponent({
+      config: { name: payload },
+      templateFn: (cfg) => html`<span>${cfg.name}</span>`,
+    });
+
+    component.render();
+
+    expect(component.getElement().querySelector('button')).toBe(null);
+    expect(component.getElement().querySelector('span').textContent).toBe(payload);
+  });
+
+  it('a view accepts an html template', () => {
+    const view = new TestView(html`<h1>${'<Title>'}</h1>`);
+
+    view.render();
+
+    expect(view.getElement().querySelector('h1').textContent).toBe('<Title>');
+  });
+});

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

@@ -0,0 +1,242 @@
+import * as SecurityHelper from './security.helper.js';
+
+// Markup from html``: `value` is safe markup; `raws` maps a placeholder token to the
+// unescaped source of a raw() that sits in element position, resolved as DOM nodes at render.
+export class SafeHtml {
+  constructor(
+    public readonly value: string,
+    public readonly raws: ReadonlyMap<string, string> = new Map()
+  ) {}
+
+  public toString(): string {
+    // Fallback for String(): inline each raw with its bindings stripped.
+    // The render path (sanitizeToFragment) resolves placeholders as nodes instead.
+    let out = this.value;
+    this.raws.forEach((source, token) => {
+      // A replacer function: a string would expand `$&`, `$'`, ... found in the source.
+      out = out.replace(SafeHtml.placeholder(token), () => SecurityHelper.stripBindings(source));
+    });
+    return out;
+  }
+
+  public static placeholder(token: string): string {
+    return `<template data-nutin-raw="${token}"></template>`;
+  }
+}
+
+// raw()'s return value: carries the unescaped source so html() can place it as a node.
+class RawHtml extends SafeHtml {
+  constructor(public readonly source: string) {
+    super('');
+  }
+}
+
+type Context = 'text' | 'tag' | 'attr-doublequoted' | 'attr-singlequoted' | 'attr-unquoted-start' | 'attr-unquoted' | 'rcdata';
+
+interface ScanState {
+  ctx: Context;
+  tagName: string;      // element of the current tag, lowercased; '/'-prefixed for a closing tag
+  inTagName: boolean;
+  attrName: string;     // last attribute name in the current tag, lowercased
+  newAttrName: boolean; // whitespace seen: the next name character starts a new attribute name
+  attrStatic: string;   // the current attribute value's static text
+  attrValue: string;    // the current attribute value so far, static text and interpolations
+  rcdataTail: string;   // last characters seen in rcdata, to find its end tag
+}
+
+// Elements whose content is text: markup in them is never parsed as elements.
+const RCDATA_TAGS = new Set(['textarea', 'title']);
+
+const BLOCKED_URL = 'about:invalid#nutin-blocked';
+
+let rawCounter = 0;
+
+// Tagged template: every ${} is HTML-escaped unless it is a SafeHtml (nested html``/raw()).
+// Arrays are interpolated item by item, so `${items.map((i) => html`<li>${i}</li>`)}` needs no join.
+// The parse context is tracked over the STATIC parts only, so interpolated data can't change it.
+// `data-optional="${x}"` removes its element when x is null/undefined: DomHelper.cleanupOptionalContent
+// looks for the literal strings, so they are kept there instead of rendering as ''.
+const OPTIONAL_VALUE = /\sdata-optional=["']?$/;
+
+export function html(strings: TemplateStringsArray, ...values: unknown[]): SafeHtml {
+  const raws = new Map<string, string>();
+  const state: ScanState = {
+    ctx: 'text', tagName: '', inTagName: false, attrName: '', newAttrName: false, attrStatic: '', attrValue: '', rcdataTail: '',
+  };
+  let out = strings[0] as string;
+  scan(state, out);
+  for (let i = 0; i < values.length; i++) {
+    const value = values[i];
+    const ctx = state.ctx;
+    const inAttr = ctx.startsWith('attr');
+    const fillsOptional = (value === null || value === undefined) && inAttr && OPTIONAL_VALUE.test(out);
+    let piece = fillsOptional ? String(value) : interpolate(value, ctx, raws);
+    if (inAttr) piece = checkUrl(state, piece);
+    if (ctx === 'attr-unquoted-start') {
+      // Unquoted attribute (`title=${x}`): quote the whole value so data can't add attributes.
+      out += `"${piece.replace(/"/g, '&quot;')}"`;
+      state.ctx = 'tag';
+      state.newAttrName = true;
+    } else if (ctx === 'attr-unquoted') {
+      // Inside an unquoted value already started (`class=a${x}`): encode anything that would end it.
+      out += piece.replace(/[\s"'`=<>]/g, (c) => `&#${c.charCodeAt(0)};`);
+    } else {
+      out += piece;
+    }
+    state.rcdataTail = '';
+    const next = strings[i + 1] as string;
+    out += next;
+    scan(state, next);
+  }
+  return new SafeHtml(out, raws);
+}
+
+// Escaping can't make a URL safe: `javascript:alert(1)` has nothing to escape. A value from data that
+// turns a URL attribute into a javascript: URL is replaced, at every trust level (the render
+// sanitizer doesn't run at 'trusted'). A javascript: URL written in the template itself is kept.
+function checkUrl(state: ScanState, piece: string): string {
+  const value = state.attrValue + piece;
+  if (SecurityHelper.isScriptUrl(state.attrName, value) && !SecurityHelper.isScriptUrl(state.attrName, state.attrStatic)) {
+    console.warn(`Blocked a javascript: URL in the "${state.attrName}" attribute - validate URLs from data.`);
+    piece = BLOCKED_URL;
+  }
+  state.attrValue += piece;
+  return piece;
+}
+
+// Inserts markup unescaped, minus Nutin's binding attributes (data-event, data-component, ...),
+// so it can't call the component's methods or mount children. Sanitized at the component's trustLevel.
+export function raw(value: unknown): SafeHtml {
+  return new RawHtml(toMarkup(value));
+}
+
+// Like raw(), but keeps binding attributes: only for markup you wrote or compiled yourself
+// (e.g. Markdown pages whose links use data-event).
+export function trustedRaw(value: unknown): SafeHtml {
+  return new SafeHtml(toMarkup(value));
+}
+
+function toMarkup(value: unknown): string {
+  return value === null || value === undefined ? '' : String(value);
+}
+
+function interpolate(value: unknown, ctx: Context, raws: Map<string, string>): string {
+  if (ctx === 'rcdata') return interpolateText(value);
+  if (value instanceof RawHtml) return interpolateRaw(value.source, ctx, raws);
+  if (value instanceof SafeHtml) {
+    value.raws.forEach((source, token) => raws.set(token, source));
+    return value.value;
+  }
+  if (Array.isArray(value)) return value.map((item) => interpolate(item, ctx, raws)).join('');
+  if (value === null || value === undefined || value === false) return '';
+  // In tag position (`<input ${x}>`) escaping alone leaves `name=value` intact, so data could
+  // add attributes: it is filtered like raw() there (no handlers, bindings or script URLs).
+  if (ctx === 'tag') return SecurityHelper.sanitizeAttributes(String(value));
+  return SecurityHelper.escapeHtml(value);
+}
+
+// Inside <textarea>/<title> everything is text, so no placeholder could be resolved there. raw() is
+// inserted as innerHTML would put it (entities decode, tags show as text) with `<` escaped, so it
+// can't end the element. Nested html`` and trustedRaw() are kept as they are, as anywhere else.
+function interpolateText(value: unknown): string {
+  if (value instanceof RawHtml) return rawAsText(value.source);
+  if (value instanceof SafeHtml) {
+    let out = value.value;
+    value.raws.forEach((source, token) => {
+      out = out.replace(SafeHtml.placeholder(token), () => rawAsText(source));
+    });
+    return out;
+  }
+  if (Array.isArray(value)) return value.map(interpolateText).join('');
+  if (value === null || value === undefined || value === false) return '';
+  return SecurityHelper.escapeHtml(value);
+}
+
+function rawAsText(source: string): string {
+  return source.replace(/</g, '&lt;');
+}
+
+function interpolateRaw(source: string, ctx: Context, raws: Map<string, string>): string {
+  // In element position raw() is resolved as nodes at render; elsewhere it is inlined safely now.
+  if (ctx === 'text') {
+    const token = `r${++rawCounter}`;
+    raws.set(token, source);
+    return SafeHtml.placeholder(token);
+  }
+  if (ctx === 'tag') return SecurityHelper.sanitizeAttributes(source);
+  return SecurityHelper.escapeHtml(source);
+}
+
+// Follows the HTML tokenizer closely enough to know where each ${} lands: text, inside a tag,
+// inside an attribute value (and which attribute), or inside a <textarea>/<title>.
+function scan(state: ScanState, chunk: string): void {
+  for (const ch of chunk) {
+    switch (state.ctx) {
+      case 'text':
+        if (ch === '<') {
+          state.ctx = 'tag';
+          state.tagName = '';
+          state.inTagName = true;
+          state.attrName = '';
+        }
+        break;
+      case 'tag':
+        if (ch === '>') {
+          state.ctx = RCDATA_TAGS.has(state.tagName) ? 'rcdata' : 'text';
+          state.rcdataTail = '';
+        } else if (ch === '=') {
+          state.ctx = 'attr-unquoted-start';
+          state.attrStatic = '';
+          state.attrValue = '';
+        } else if (/\s/.test(ch) || (ch === '/' && state.tagName !== '')) {
+          state.inTagName = false;
+          state.newAttrName = true;
+        } else if (state.inTagName) {
+          state.tagName += ch.toLowerCase();
+        } else {
+          state.attrName = state.newAttrName ? ch.toLowerCase() : state.attrName + ch.toLowerCase();
+          state.newAttrName = false;
+        }
+        break;
+      case 'attr-unquoted-start':
+        if (ch === '"') state.ctx = 'attr-doublequoted';
+        else if (ch === "'") state.ctx = 'attr-singlequoted';
+        else if (ch === '>') state.ctx = 'text';
+        else if (!/\s/.test(ch)) {
+          state.ctx = 'attr-unquoted';
+          addAttrChar(state, ch);
+        }
+        break;
+      case 'attr-unquoted':
+        if (ch === '>') state.ctx = 'text';
+        else if (/\s/.test(ch)) {
+          state.ctx = 'tag';
+          state.newAttrName = true;
+        } else addAttrChar(state, ch);
+        break;
+      case 'attr-doublequoted':
+      case 'attr-singlequoted':
+        if (ch === (state.ctx === 'attr-doublequoted' ? '"' : "'")) {
+          state.ctx = 'tag';
+          state.newAttrName = true;
+        } else addAttrChar(state, ch);
+        break;
+      case 'rcdata': {
+        // Ends at `</textarea` (or `</title`) followed by whitespace, `/` or `>`.
+        const end = `</${state.tagName}`;
+        state.rcdataTail = (state.rcdataTail + ch).slice(-(end.length + 1));
+        if (state.rcdataTail.slice(0, -1).toLowerCase() === end && /[\s/>]/.test(ch)) {
+          state.ctx = ch === '>' ? 'text' : 'tag';
+          state.tagName = `/${state.tagName}`;
+          state.inTagName = false;
+        }
+        break;
+      }
+    }
+  }
+}
+
+function addAttrChar(state: ScanState, ch: string): void {
+  state.attrStatic += ch;
+  state.attrValue += ch;
+}