@nutin/cli 1.3.1 → 2.0.0

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

@@ -0,0 +1,145 @@
+import { DomHelper } from '#root/dist/src/core/base-classes/base-component/helpers/dom.helper.js';
+
+describe('DomHelper', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    container.id = 'mount-target';
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+    container = null;
+  });
+
+  it('mountElement appends the element into a string selector target', () => {
+    const el = document.createElement('span');
+    DomHelper.mountElement(el, '#mount-target');
+    expect(container.contains(el)).toBe(true);
+  });
+
+  it('mountElement does nothing when the string selector target is not found', () => {
+    const el = document.createElement('span');
+    DomHelper.mountElement(el, '#does-not-exist');
+    expect(el.parentElement).toBe(null);
+  });
+
+  it('mountElement replaces an HTMLElement target with the element', () => {
+    const placeholder = document.createElement('div');
+    placeholder.className = 'placeholder';
+    container.appendChild(placeholder);
+
+    const el = document.createElement('span');
+    el.className = 'replacement';
+    DomHelper.mountElement(el, placeholder);
+
+    expect(container.contains(placeholder)).toBe(false);
+    expect(container.contains(el)).toBe(true);
+  });
+
+  it('createElement creates an element with the given tag name', () => {
+    const el = DomHelper.createElement('section');
+    expect(el.tagName).toBe('SECTION');
+  });
+
+  it('createElement sets sanitized innerHTML from the template', () => {
+    const el = DomHelper.createElement('div', '<p>hi</p><script>alert(1)</script>');
+    expect(el.innerHTML).toBe('<p>hi</p>');
+  });
+
+  it('createElement respects the trustLevel when sanitizing', () => {
+    const template = '<script>alert(1)</script>';
+    const el = DomHelper.createElement('div', template, 'trusted');
+    expect(el.innerHTML).toBe(template);
+  });
+
+  it('cleanupOptionalContent removes an optional img with no src', () => {
+    container.innerHTML = '<img data-optional>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('img')).toBe(null);
+  });
+
+  it('cleanupOptionalContent keeps an optional img that has a src', () => {
+    container.innerHTML = '<img data-optional src="pic.png">';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('img')).toBeDefined();
+  });
+
+  it('cleanupOptionalContent removes an optional input with no value', () => {
+    container.innerHTML = '<input data-optional>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('input')).toBe(null);
+  });
+
+  it('cleanupOptionalContent keeps an optional input that has a value', () => {
+    container.innerHTML = '<input data-optional value="hi">';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('input')).toBeDefined();
+  });
+
+  it('cleanupOptionalContent removes an optional textarea with no value', () => {
+    container.innerHTML = '<textarea data-optional></textarea>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('textarea')).toBe(null);
+  });
+
+  it('cleanupOptionalContent removes an optional source element with no src', () => {
+    container.innerHTML = '<video><source data-optional></video>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('source')).toBe(null);
+  });
+
+  it('cleanupOptionalContent keeps an optional source element that has a src', () => {
+    container.innerHTML = '<video><source data-optional src="movie.mp4"></video>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('source')).toBeDefined();
+  });
+
+  it('cleanupOptionalContent removes an optional element with empty textContent', () => {
+    container.innerHTML = '<span data-optional>   </span>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('span')).toBe(null);
+  });
+
+  it('cleanupOptionalContent removes an optional element whose textContent is the literal string "undefined"', () => {
+    container.innerHTML = '<span data-optional>undefined</span>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('span')).toBe(null);
+  });
+
+  it('cleanupOptionalContent keeps an optional element with real textContent', () => {
+    container.innerHTML = '<span data-optional>hello</span>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelector('span')).toBeDefined();
+  });
+
+  it('cleanupOptionalContent removes an element whose data-optional value is the literal string "undefined" or "null"', () => {
+    container.innerHTML = `
+      <span data-optional="undefined">has content</span>
+      <span data-optional="null">has content</span>
+    `;
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelectorAll('span').length).toBe(0);
+  });
+
+  it('cleanupOptionalContent keeps an element with data-optional="" and non-empty content — a bare/empty data-optional is a plain marker deferred to isEmpty(el), not a forced-removal signal', () => {
+    container.innerHTML = '<span data-optional="">has content</span>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelectorAll('span').length).toBe(1);
+  });
+
+  it('cleanupOptionalContent removes an element whose data-optional value is whitespace-only, even with real content', () => {
+    container.innerHTML = '<span data-optional="   ">has content</span>';
+    DomHelper.cleanupOptionalContent();
+    expect(container.querySelectorAll('span').length).toBe(0);
+  });
+
+  it('cleanupOptionalContent always strips the data-optional attribute from surviving elements', () => {
+    container.innerHTML = '<span data-optional>hello</span>';
+    DomHelper.cleanupOptionalContent();
+    const span = container.querySelector('span');
+    expect(span.hasAttribute('data-optional')).toBe(false);
+  });
+});

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

@@ -45,6 +45,12 @@ export class DomHelper {
 
     const isValueUndefined = (el: HTMLElement): boolean => {
       const value = el.getAttribute("data-optional");
+      /*
+      A bare/empty data-optional (getAttribute returns "") is a plain marker and
+      defers entirely to isEmpty(el) below rather than forcing removal itself.
+      Only a present-but-blank value (whitespace) or the literal string produced
+      by interpolating an undefined/null expression counts as "value undefined".
+      */
       if (!value) return false;
       return (
         value.trim() === '' ||
@@ -69,7 +75,7 @@ export class DomHelper {
         config.target.replaceWith(config.element);
       }
     } else {
-      console.warn('Mount target not found:', config.mountTarget);
+      return;
     }
   }
 }

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

@@ -0,0 +1,88 @@
+import { EventHelper } from '#root/dist/src/core/base-classes/base-component/helpers/event.helper.js';
+
+describe('EventHelper', () => {
+  let container;
+  let eventListeners;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    eventListeners = [];
+  });
+
+  afterEach(() => {
+    container.remove();
+    container = null;
+  });
+
+  it('binds a handler resolved from data-event and calls it with `this` set to the component', () => {
+    container.innerHTML = '<button data-event="click:handleClick"></button>';
+    const button = container.querySelector('button');
+
+    let calledWith = null;
+    const component = {
+      handleClick(...args) {
+        calledWith = { self: this, args };
+      },
+    };
+
+    EventHelper.bindEvents(component, container, eventListeners);
+    click(button);
+
+    expect(calledWith.self).toBe(component);
+    expect(calledWith.args.length).toBe(0);
+  });
+
+  it('resolves comma-separated raw args via TokenHelper before invoking the handler', () => {
+    container.innerHTML = '<button data-event="click:handleClick:1,\'hi\'" id="btn"></button>';
+    const button = container.querySelector('button');
+
+    let received = null;
+    const component = {
+      handleClick(...args) { received = args; },
+    };
+
+    EventHelper.bindEvents(component, container, eventListeners);
+    click(button);
+
+    expect(received[0]).toBe(1);
+    expect(received[1]).toBe('hi');
+  });
+
+  it('does nothing when the handler name is missing', () => {
+    container.innerHTML = '<button data-event="click:"></button>';
+    const component = {};
+    EventHelper.bindEvents(component, container, eventListeners);
+    expect(eventListeners.length).toBe(0);
+  });
+
+  it('does nothing when the referenced handler does not exist or is not a function', () => {
+    container.innerHTML = '<button data-event="click:missingHandler"></button>';
+    const component = { missingHandler: 'not-a-function' };
+    EventHelper.bindEvents(component, container, eventListeners);
+    expect(eventListeners.length).toBe(0);
+  });
+
+  it('tracks each bound listener in the eventListeners array', () => {
+    container.innerHTML = '<button data-event="click:handleClick"></button>';
+    const component = { handleClick() {} };
+
+    EventHelper.bindEvents(component, container, eventListeners);
+
+    expect(eventListeners.length).toBe(1);
+    expect(eventListeners[0][1]).toBe('click');
+  });
+
+  it('destroyEvents removes every tracked listener', () => {
+    container.innerHTML = '<button data-event="click:handleClick"></button>';
+    const button = container.querySelector('button');
+    let callCount = 0;
+    const component = { handleClick() { callCount++; } };
+
+    EventHelper.bindEvents(component, container, eventListeners);
+    EventHelper.destroyEvents(eventListeners);
+
+    click(button);
+    expect(callCount).toBe(0);
+  });
+});

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

@@ -8,8 +8,8 @@ export class EventHelper {
     eventListeners: Array<[EventTarget, string, EventListener]>
   ): void {
     element.querySelectorAll('[data-event]').forEach(el => {
-      const parts = el.getAttribute('data-event')!.split(':');
-      const [eventName, handlerName, argsString] = parts;
+      const [eventName, handlerName, ...argParts] = el.getAttribute('data-event')!.split(':');
+      const argsString = argParts.length ? argParts.join(':') : '';
 
       if (!handlerName || !eventName) return;
 

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

@@ -0,0 +1,62 @@
+import { I18nHelper } from '#root/dist/src/core/base-classes/base-component/helpers/i18n.helper.js';
+import { I18nService } from '#root/dist/src/core/services/index.js';
+
+describe('I18nHelper', () => {
+  let container;
+  let originalTranslate;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    originalTranslate = I18nService.translate;
+  });
+
+  afterEach(() => {
+    I18nService.translate = originalTranslate;
+    container.remove();
+    container = null;
+  });
+
+  it('sets the placeholder of an input element to the translated value', () => {
+    I18nService.translate = (key) => key === 'greeting' ? 'Hello' : key;
+    container.innerHTML = '<input data-i18n="greeting">';
+
+    I18nHelper.parseI18nAttributes(container);
+
+    const input = container.querySelector('input');
+    expect(input.placeholder).toBe('Hello');
+  });
+
+  it('sets the textContent of a non-input element to the translated value', () => {
+    I18nService.translate = (key) => key === 'greeting' ? 'Hello' : key;
+    container.innerHTML = '<span data-i18n="greeting"></span>';
+
+    I18nHelper.parseI18nAttributes(container);
+
+    const span = container.querySelector('span');
+    expect(span.textContent).toBe('Hello');
+  });
+
+  it('passes the element textContent as the fallback to translate', () => {
+    const calls = [];
+    I18nService.translate = (key, fallback) => { calls.push({ key, fallback }); return fallback; };
+    container.innerHTML = '<span data-i18n="missing.key">fallback text</span>';
+
+    I18nHelper.parseI18nAttributes(container);
+
+    expect(calls[0].key).toBe('missing.key');
+    expect(calls[0].fallback).toBe('fallback text');
+    expect(container.querySelector('span').textContent).toBe('fallback text');
+  });
+
+  it('processes every element with a data-i18n attribute', () => {
+    I18nService.translate = (key) => `[${key}]`;
+    container.innerHTML = '<span data-i18n="a"></span><span data-i18n="b"></span>';
+
+    I18nHelper.parseI18nAttributes(container);
+
+    const spans = container.querySelectorAll('span');
+    expect(spans[0].textContent).toBe('[a]');
+    expect(spans[1].textContent).toBe('[b]');
+  });
+});

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

@@ -0,0 +1,82 @@
+import { PipeHelper } from '#root/dist/src/core/base-classes/base-component/helpers/pipe.helper.js';
+import { AppPipeRegistry } from '#root/dist/src/core/services/index.js';
+
+describe('PipeHelper', () => {
+  let container;
+
+  beforeAll(() => {
+    AppPipeRegistry.register('upper', (value) => String(value).toUpperCase());
+    AppPipeRegistry.register('suffix', (value, suffix) => `${value}${suffix}`);
+    AppPipeRegistry.register('join', (value, a, b) => `${value}-${a}-${b}`);
+  });
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+    container = null;
+  });
+
+  it('reads from textContent and writes the piped result back to textContent for a plain element', () => {
+    container.innerHTML = '<span data-pipe="upper">hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('HI');
+  });
+
+  it('reads from .value and writes the piped result back to .value for an input element', () => {
+    container.innerHTML = '<input data-pipe="upper" value="hi">';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('input').value).toBe('HI');
+  });
+
+  it('reads from .value for a textarea element', () => {
+    container.innerHTML = '<textarea data-pipe="upper">hi</textarea>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('textarea').value).toBe('HI');
+  });
+
+  it('prefers data-pipe-source over the element value when present', () => {
+    container.innerHTML = '<span data-pipe="upper" data-pipe-source="from source">ignored</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('FROM SOURCE');
+  });
+
+  it('chains multiple pipes separated by |', () => {
+    container.innerHTML = '<span data-pipe="upper|suffix:!">hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('HI!');
+  });
+
+  it('passes comma-separated arguments to the pipe function', () => {
+    container.innerHTML = '<span data-pipe="join:x,y">hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('hi-x-y');
+  });
+
+  it('does nothing when the element has no data-pipe attribute', () => {
+    container.innerHTML = '<span>hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('hi');
+  });
+
+  it('does nothing when the data-pipe attribute is empty', () => {
+    container.innerHTML = '<span data-pipe="">hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('hi');
+  });
+
+  it('prefers data-pipe-source over .value for an input element', () => {
+    container.innerHTML = '<input data-pipe="upper" data-pipe-source="from source" value="ignored">';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('input').value).toBe('FROM SOURCE');
+  });
+
+  it('stops processing pipes when a pipe segment resolves to an empty name', () => {
+    container.innerHTML = '<span data-pipe=":arg">hi</span>';
+    PipeHelper.parsePipeAttributes(container);
+    expect(container.querySelector('span').textContent).toBe('hi');
+  });
+});

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

@@ -0,0 +1,142 @@
+import { 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', () => {
+    expect(SecurityHelper.sanitizeTemplate(null)).toBe('');
+    expect(SecurityHelper.sanitizeTemplate(undefined)).toBe('');
+  });
+
+  it('sanitizeTemplate stringifies non-string values before sanitizing', () => {
+    expect(SecurityHelper.sanitizeTemplate(42)).toBe('42');
+    expect(SecurityHelper.sanitizeTemplate(true)).toBe('true');
+  });
+
+  it('sanitizeTemplate defaults to the "normal" trust level', () => {
+    const result = SecurityHelper.sanitizeTemplate('<div><script>alert(1)</script></div>');
+    expect(result).toBe('<div></div>');
+  });
+
+  it('sanitizeTemplate "trusted" level leaves the template completely unchanged', () => {
+    const template = '<script>alert(1)</script><div onclick="x()">hi</div>';
+    expect(SecurityHelper.sanitizeTemplate(template, 'trusted')).toBe(template);
+  });
+
+  it('sanitizeTemplate "normal" level strips <script> tags', () => {
+    const result = SecurityHelper.sanitizeTemplate('<p>hi</p><script>alert(1)</script>', 'normal');
+    expect(result).toBe('<p>hi</p>');
+  });
+
+  it('sanitizeTemplate "normal" level strips inline on* event handlers', () => {
+    const result = SecurityHelper.sanitizeTemplate('<button onclick="doBad()">Click</button>', 'normal');
+    expect(result).toContain('<button');
+    expect(result.includes('onclick')).toBe(false);
+  });
+
+  it('sanitizeTemplate "normal" level keeps iframes (only "strict" removes them)', () => {
+    const result = SecurityHelper.sanitizeTemplate('<iframe src="https://example.com"></iframe>', 'normal');
+    expect(result).toContain('<iframe');
+  });
+
+  it('sanitizeTemplate "strict" level also strips iframe, object and embed tags', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<iframe src="x"></iframe><object data="x"></object><embed src="x">',
+      'strict'
+    );
+    expect(result.includes('<iframe')).toBe(false);
+    expect(result.includes('<object')).toBe(false);
+    expect(result.includes('<embed')).toBe(false);
+  });
+
+  it('sanitizeTemplate "strict" level strips javascript: hrefs and data: srcs', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<a href="javascript:alert(1)">link</a><img src="data:text/html,evil">',
+      'strict'
+    );
+    expect(result.includes('javascript:')).toBe(false);
+    expect(result.includes('src="data:')).toBe(false);
+  });
+
+  it('sanitizeTemplate "strict" level still strips scripts and inline handlers like normal', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<script>bad()</script><div onmouseover="bad()">hi</div>',
+      'strict'
+    );
+    expect(result.includes('<script>')).toBe(false);
+    expect(result.includes('onmouseover')).toBe(false);
+  });
+
+  it('sanitizeTemplate "normal" level strips unquoted event handler attributes', () => {
+    const result = SecurityHelper.sanitizeTemplate('<img src=x onerror=alert(1)>', 'normal');
+    expect(result.includes('onerror')).toBe(false);
+  });
+
+  it('sanitizeTemplate "normal" level is not fooled by nested-tag script reassembly', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<scr<script></script>ipt>alert(document.domain)</scr<script></script>ipt>',
+      'normal'
+    );
+    // A naive substring check is misleading here: the sanitized output can still
+    // contain the literal text "<script>" as part of an inert malformed tag name
+    // (e.g. "SCR<SCRIPT"), which HTML parsers never re-interpret as a real <script>
+    // element. Re-parse the result and assert no live <script> element exists.
+    const reparsed = document.createElement('template');
+    reparsed.innerHTML = result;
+    expect(reparsed.content.querySelector('script')).toBe(null);
+  });
+
+  it('sanitizeTemplate "normal" level is not fooled by nested-tag event handler reassembly', () => {
+    const result = SecurityHelper.sanitizeTemplate(
+      '<img src=x onerr<script>x</script>or=alert(1)>',
+      'normal'
+    );
+    expect(result.includes('onerror')).toBe(false);
+  });
+
+  it('sanitizeTemplate "strict" level strips whitespace-obfuscated javascript: URLs', () => {
+    const result = SecurityHelper.sanitizeTemplate('<a href="java\tscript:alert(1)">x</a>', 'strict');
+    expect(result.includes('javascript:')).toBe(false);
+  });
+
+  it('sanitizeTemplate "strict" level strips javascript: from action/formaction/poster/background too', () => {
+    const result = SecurityHelper.sanitizeTemplate('<form action="javascript:alert(1)">x</form>', 'strict');
+    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('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('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('sanitizeInputElement returns an empty string for a plain, non-editable element', () => {
+    const div = document.createElement('div');
+    expect(SecurityHelper.sanitizeInputElement(div)).toBe('');
+  });
+
+  it('escapeHtml escapes all special characters', () => {
+    expect(SecurityHelper.escapeHtml(`<div class="a" data='b'>&</div>`))
+      .toBe('&lt;div class=&quot;a&quot; data=&#039;b&#039;&gt;&amp;&lt;/div&gt;');
+  });
+
+  it('escapeHtml returns an empty string for null and undefined', () => {
+    expect(SecurityHelper.escapeHtml(null)).toBe('');
+    expect(SecurityHelper.escapeHtml(undefined)).toBe('');
+  });
+
+  it('escapeHtml stringifies non-string values before escaping', () => {
+    expect(SecurityHelper.escapeHtml(123)).toBe('123');
+  });
+});

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

@@ -1,6 +1,17 @@
 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);
@@ -22,35 +33,69 @@ export class SecurityHelper {
 
   public static escapeHtml(value: unknown): string {
     if (value === null || value === undefined) return '';
-    const str = String(value);
-    return str
-      .replace(/&/g, "&")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;")
-      .replace(/'/g, "&#039;");
+
+    return String(value)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
   }
 
   private static sanitizeInputTemplate(template: string, trustLevel: TrustLevel): string {
-    // Trusted: no tamplate sanitization
+    // Trusted: no template sanitization
     if (trustLevel === 'trusted') {
       return template;
     }
 
-    // Always remove scripts and inline event handlers
-    template = template
-      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
-      .replace(/\son\w+\s*=\s*["'][^"']*["']/gi, '');
-    
-    // Strict: remove iframe, object, embed, href, data: protocol
-    if (trustLevel === 'strict') {
-      template = template
-        .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
-        .replace(/<object\b[^<]*(?:(?!<\/object>)<[^<]*)*<\/object>/gi, '')
-        .replace(/<embed\b[^>]*>/gi, '')
-        .replace(/href\s*=\s*["']javascript:[^"']*["']/gi, '')
-        .replace(/src\s*=\s*["']data:[^"']*["']/gi, '');
+    const holder = document.createElement('template');
+    holder.innerHTML = template;
+    this.sanitizeNode(holder.content, trustLevel);
+
+    return holder.innerHTML;
+  }
+
+  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.tagName;
+
+      if (tag === 'SCRIPT') {
+        el.remove();
+        continue;
+      }
+      if (trustLevel === 'strict' && this.STRICT_STRIPPED_TAGS.has(tag)) {
+        el.remove();
+        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);
+      }
     }
-    return template;
+  }
+
+  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);
   }
 }