@kubex/zinc 1.1.176 → 1.1.177

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.176",
+  "version": "1.1.177",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",
@@ -50,6 +50,7 @@
     "@shoelace-style/localize": "^3.2.1",
     "air-datepicker": "^3.5.3",
     "composed-offset-position": "^0.0.6",
+    "dompurify": "^3.4.16",
     "echarts": "^6.0.0",
     "emoji-mart": "^5.6.0",
     "lit": "^3.3.3",

package/src/components/chat-message/chat-message.component.ts

@@ -59,8 +59,8 @@ export default class ZnChatMessage extends ZincElement {
   @property() sender: string = '';
 
   /**
-   * The message body as an HTML string. When set, it is sanitized (scripts and event
-   * handlers stripped), newlines become line breaks and bare URLs become links. When
+   * The message body as an HTML string. When set, it is sanitized down to formatting tags and
+   * http(s) or mailto links, newlines become line breaks and bare URLs become links. When
    * omitted the default slot is rendered instead.
    */
   @property() message: string = '';
@@ -217,11 +217,7 @@ export default class ZnChatMessage extends ZincElement {
         <slot></slot>`;
     }
 
-    let content = cleanHTML(this.message);
-    content = content.replace(/\r\n|\r|\n/g, '<br>');
-    content = content.replace(/\b(((https?|ftp|dict):\/\/|www\.)[^'">\s]+\.[^'">\s]+)(?=\s|$)(?!["<>])/g,
-      '<a href="$1" target="_blank">$1</a>');
-    return unsafeHTML(content);
+    return unsafeHTML(cleanHTML(this.message));
   }
 
   /** HH:MM only — used on the system card. */

package/src/components/chat-message/chat-message.test.ts

@@ -0,0 +1,72 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture } from '@open-wc/testing';
+import type { LitElement } from 'lit';
+
+const messageContent = async (message: string) => {
+  const el = await fixture<LitElement>('<zn-chat-message sender="Sam"></zn-chat-message>');
+  el.setAttribute('message', message);
+  await el.updateComplete;
+  return el.shadowRoot!.querySelector<HTMLDivElement>('.message__content')!;
+};
+
+describe('<zn-chat-message>', () => {
+  it('should render a component', async () => {
+    const el = await fixture('<zn-chat-message></zn-chat-message>');
+
+    expect(el).to.exist;
+  });
+
+  it('should render formatting and blocks chat styles', async () => {
+    const content = await messageContent('<p><strong>Hi</strong></p><pre>code</pre><blockquote>quoted</blockquote>');
+
+    expect(content.querySelector('p strong')?.textContent).to.equal('Hi');
+    expect(content.querySelector('pre')?.textContent).to.equal('code');
+    expect(content.querySelector('blockquote')?.textContent).to.equal('quoted');
+  });
+
+  it('should strip scripts, handlers and links to unsafe schemes in any case', async () => {
+    const content = await messageContent(
+      '<a href="JAVASCRIPT:window.__xss = true">a</a><a href="data:text/html,x">b</a>'
+      + '<span onclick="window.__xss = true">c</span><script>window.__xss = true</script>'
+    );
+
+    content.querySelectorAll('a').forEach(link => expect(link.hasAttribute('href')).to.be.false);
+    expect(content.querySelector('[onclick], script')).to.be.null;
+    expect((window as unknown as Record<string, unknown>).__xss).to.be.undefined;
+  });
+
+  it('should drop embedded content and styles with their contents', async () => {
+    const content = await messageContent(
+      '<iframe src="https://example.com"></iframe><object data="x"></object><embed src="x">'
+      + '<style>p{color:red}</style><img src="https://tracker.example.com/pixel.gif"><form><input></form>ok'
+    );
+
+    expect(content.querySelector('iframe, object, embed, style, img, form, input')).to.be.null;
+    expect(content.textContent).to.equal('ok');
+  });
+
+  it('should open links in a new tab without the opener', async () => {
+    const content = await messageContent('<a href="https://example.com/help">help</a>');
+    const link = content.querySelector('a')!;
+
+    expect(link.getAttribute('href')).to.equal('https://example.com/help');
+    expect(link.getAttribute('target')).to.equal('_blank');
+    expect(link.getAttribute('rel')).to.equal('noopener noreferrer');
+  });
+
+  it('should turn newlines into breaks and bare URLs into links', async () => {
+    const content = await messageContent('See https://example.com/a\nor www.example.com');
+    const links = content.querySelectorAll('a');
+
+    expect(content.querySelectorAll('br').length).to.equal(1);
+    expect(links[0].getAttribute('href')).to.equal('https://example.com/a');
+    expect(links[1].getAttribute('href')).to.equal('https://www.example.com/');
+    expect(links[1].textContent).to.equal('www.example.com');
+  });
+
+  it('should show plain text as text', async () => {
+    const content = await messageContent('1 &lt; 2 &amp;&amp; 3 &gt; 2');
+
+    expect(content.textContent).to.equal('1 < 2 && 3 > 2');
+  });
+});

package/src/components/chat-message/clean-message.ts

@@ -1,46 +1,14 @@
-function stringToHTML(str: string): HTMLElement {
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(str, 'text/html');
-  return doc.body;
-}
-
-function removeScripts(node: HTMLElement) {
-  node.querySelectorAll('script').forEach((script) => {
-    script.remove();
-  });
-}
+import {sanitizeHtml} from '../../utilities/sanitize-html';
 
-function isPossiblyDangerousAttribute(name: string, value: string): boolean {
-  if (['src', 'href', 'xlink:href'].includes(name)) {
-    // eslint-disable-next-line no-script-url -- defensively matching the scheme we want to strip
-    if (value.includes('javascript:') || value.includes('data:text/html')) return true;
-  }
-
-  return name.startsWith('on');
-}
-
-function removeAttributes(elem: Element) {
-  const attributes = elem.attributes;
-  for (let i = attributes.length - 1; i >= 0; i--) {
-    if (isPossiblyDangerousAttribute(attributes[i].name, attributes[i].value)) {
-      elem.removeAttributeNode(attributes[i]);
-    }
-  }
-}
-
-function clean(html: Element) {
-  const nodes = html.children;
-  for (let i = nodes.length - 1; i >= 0; i--) {
-    const node = nodes[i];
-    removeAttributes(node);
-    clean(node);
-  }
-}
+const BARE_URL = /\b((https?:\/\/|www\.)[^'">\s]+\.[^'">\s]+)(?=\s|$)(?!["<>])/g;
 
-/** Strip scripts and event/handler attributes from an untrusted HTML string. */
+/**
+ * Sanitizes an untrusted chat message, turning newlines into breaks and bare URLs into links first so the
+ * links are vetted too.
+ */
 export function cleanHTML(message: string): string {
-  const html = stringToHTML(message);
-  removeScripts(html);
-  clean(html);
-  return html.innerHTML;
+  const linked = message
+    .replace(BARE_URL, url => `<a href="${url.startsWith('www.') ? 'https://' + url : url}">${url}</a>`)
+    .replace(/\r\n|\r|\n/g, '<br>');
+  return sanitizeHtml(linked, ['pre', 'code', 'blockquote']);
 }

package/src/components/content-block/content-block.component.ts

@@ -2,9 +2,10 @@ import {classMap} from "lit/directives/class-map.js";
 import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import {html, unsafeCSS} from 'lit';
-import {htmlToText, looksLikeHtml, sanitizeHtml} from './sanitize-html';
+import {htmlToText, looksLikeHtml} from './html-text';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync, state} from 'lit/decorators.js';
+import {sanitizeHtml} from '../../utilities/sanitize-html';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
 import type {PropertyValues} from 'lit';

package/src/components/content-block/html-text.ts

@@ -0,0 +1,19 @@
+import {sanitizeHtml} from '../../utilities/sanitize-html';
+
+const HTML_TAG = /<\/?(p|div|span|strong|b|em|i|u|a|img|ul|ol|li|table|tr|td|h[1-6]|blockquote|font|center)\b[^>]*>/i;
+
+/** Whether a plain-text body is really HTML source. `<br>` alone doesn't count. */
+export function looksLikeHtml(text: string): boolean {
+  return HTML_TAG.test(text);
+}
+
+/** Plain text of a body that may be HTML source or text holding encoded entities like `&nbsp;`. */
+export function htmlToText(source: string): string {
+  // Plain text is escaped so an address like `<bob@example.com>` isn't parsed as a tag
+  const markup = looksLikeHtml(source)
+    ? sanitizeHtml(source)
+    : source.replace(/<br\s*\/?>/gi, ' ').replace(/</g, '&lt;');
+  const parsed = new DOMParser().parseFromString(markup, 'text/html');
+  parsed.body.querySelectorAll('br, p, li').forEach((el) => el.after(' '));
+  return (parsed.body.textContent ?? '').replace(/\s+/g, ' ').trim();
+}

package/src/utilities/sanitize-html.ts

@@ -0,0 +1,52 @@
+import DOMPurify from 'dompurify';
+
+const FORMATTING = ['p', 'br', 'strong', 'b', 'em', 'i', 'u', 'ul', 'ol', 'li', 'a'];
+
+// Allowed through so their text doesn't run together, then turned into paragraphs
+const BLOCKS = ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'table', 'tr', 'center', 'section'];
+
+// Removed with their contents; any other disallowed element is unwrapped to its children.
+// img is dropped because a remote src in an email is a tracking pixel.
+const DROPPED = [
+  'script', 'style', 'template', 'iframe', 'frame', 'object', 'embed', 'noscript', 'noembed', 'noframes', 'xmp',
+  'plaintext', 'title', 'head', 'meta', 'link', 'base', 'svg', 'math', 'img', 'picture', 'video', 'audio', 'form',
+  'input', 'button', 'select', 'textarea',
+];
+
+/**
+ * Sanitizes untrusted HTML down to formatting tags, keeping only a link's href when it is http(s) or mailto.
+ * Tags in `keep` are allowed as they are, so a block such as `pre` isn't turned into a paragraph.
+ */
+export function sanitizeHtml(source: string, keep: string[] = []): string {
+  const fragment = DOMPurify.sanitize(source, {
+    ALLOWED_TAGS: [...FORMATTING, ...BLOCKS, ...keep],
+    ALLOWED_ATTR: ['href'],
+    ALLOWED_URI_REGEXP: /^(?:https?|mailto):/i,
+    FORBID_CONTENTS: DROPPED,
+    RETURN_DOM_FRAGMENT: true,
+  });
+
+  const blocks = BLOCKS.filter(tag => !keep.includes(tag));
+  fragment.querySelectorAll(blocks.join(',')).forEach(block => {
+    const p = document.createElement('p');
+    p.append(...block.childNodes);
+    block.replaceWith(p);
+  });
+  // Spacer paragraphs, and ones that only held an image, would leave gaps
+  fragment.querySelectorAll('p').forEach(p => {
+    if (!p.textContent?.trim()) p.remove();
+  });
+  fragment.querySelectorAll('a[href]').forEach(link => {
+    try {
+      link.setAttribute('href', new URL(link.getAttribute('href')!.trim()).href);
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener noreferrer');
+    } catch {
+      link.removeAttribute('href');
+    }
+  });
+
+  const container = document.createElement('div');
+  container.append(fragment);
+  return container.innerHTML;
+}

package/src/components/content-block/sanitize-html.ts

@@ -1,96 +0,0 @@
-const ALLOWED = new Set(['p', 'br', 'strong', 'b', 'em', 'i', 'u', 'ul', 'ol', 'li', 'a']);
-
-// Removed with their contents; any other disallowed element is unwrapped to its children.
-// img is dropped because a remote src in an email is a tracking pixel.
-const DROPPED = new Set([
-  'script', 'style', 'template', 'iframe', 'frame', 'object', 'embed', 'noscript', 'title', 'head',
-  'meta', 'link', 'base', 'svg', 'math', 'img', 'picture', 'video', 'audio', 'form', 'input', 'button',
-  'select', 'textarea',
-]);
-
-// Unwrapped like any disallowed element, but kept as a paragraph so their text doesn't run together
-const BLOCKS = new Set(['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'table', 'tr', 'center', 'section']);
-
-const SAFE_PROTOCOLS = new Set(['http:', 'https:', 'mailto:']);
-
-const HTML_TAG = /<\/?(p|div|span|strong|b|em|i|u|a|img|ul|ol|li|table|tr|td|h[1-6]|blockquote|font|center)\b[^>]*>/i;
-
-/** Whether a plain-text body is really HTML source. `<br>` alone doesn't count. */
-export function looksLikeHtml(text: string): boolean {
-  return HTML_TAG.test(text);
-}
-
-function safeHref(href: string | null): string | null {
-  if (!href) return null;
-  try {
-    const url = new URL(href.trim());
-    return SAFE_PROTOCOLS.has(url.protocol) ? url.href : null;
-  } catch {
-    return null;
-  }
-}
-
-function copyChildren(from: Node, to: Node, doc: Document) {
-  from.childNodes.forEach((child) => {
-    if (child.nodeType === Node.TEXT_NODE) {
-      to.appendChild(doc.createTextNode(child.textContent ?? ''));
-      return;
-    }
-    if (child.nodeType !== Node.ELEMENT_NODE) return;
-
-    const tag = (child as Element).localName;
-    if (DROPPED.has(tag)) return;
-    if (tag === 'p' || BLOCKS.has(tag)) {
-      appendParagraph(child, to, doc);
-      return;
-    }
-    if (!ALLOWED.has(tag)) {
-      copyChildren(child, to, doc);
-      return;
-    }
-
-    const el = doc.createElement(tag);
-    if (tag === 'a') {
-      const href = safeHref((child as Element).getAttribute('href'));
-      if (href) {
-        el.setAttribute('href', href);
-        el.setAttribute('target', '_blank');
-        el.setAttribute('rel', 'noopener noreferrer');
-      }
-    }
-    copyChildren(child, el, doc);
-    to.appendChild(el);
-  });
-}
-
-// Skips paragraphs left empty, e.g. spacer paragraphs or ones that only held an image
-function appendParagraph(from: Node, to: Node, doc: Document) {
-  const p = doc.createElement('p');
-  copyChildren(from, p, doc);
-  if (p.textContent?.trim()) {
-    to.appendChild(p);
-  }
-}
-
-/**
- * Rebuilds untrusted HTML from an allowlist of formatting tags. Attributes are never copied,
- * except a link's href when it is http(s) or mailto.
- */
-export function sanitizeHtml(source: string): string {
-  const parsed = new DOMParser().parseFromString(source, 'text/html');
-  const out = document.implementation.createHTMLDocument('');
-  const root = out.createElement('div');
-  copyChildren(parsed.body, root, out);
-  return root.innerHTML;
-}
-
-/** Plain text of a body that may be HTML source or text holding encoded entities like `&nbsp;`. */
-export function htmlToText(source: string): string {
-  // Plain text is escaped so an address like `<bob@example.com>` isn't parsed as a tag
-  const markup = looksLikeHtml(source)
-    ? sanitizeHtml(source)
-    : source.replace(/<br\s*\/?>/gi, ' ').replace(/</g, '&lt;');
-  const parsed = new DOMParser().parseFromString(markup, 'text/html');
-  parsed.body.querySelectorAll('br, p, li').forEach((el) => el.after(' '));
-  return (parsed.body.textContent ?? '').replace(/\s+/g, ' ').trim();
-}