@kubex/zinc 1.1.171 → 1.1.173

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.171",
+  "version": "1.1.173",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

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

@@ -2,8 +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 {looksLikeHtml, sanitizeHtml} from './sanitize-html';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync, state} from 'lit/decorators.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
 import type {PropertyValues} from 'lit';
 import type ZnTile from "../tile";
@@ -13,6 +15,8 @@ import styles from './content-block.scss';
 interface TextRow {
   lines: string[];
   type: 'reply' | 'text';
+  /** `lines` holds a single sanitized HTML string. */
+  html?: boolean;
 }
 
 /**
@@ -264,7 +268,9 @@ export default class ContentBlock extends ZincElement {
                 'text-section--text': section.type === 'text',
                 'hidden': section.type === 'reply'
               })}>
-                ${section.lines.map((line) => html`${line}<br>`)}
+                ${section.html
+                  ? unsafeHTML(section.lines[0])
+                  : section.lines.map((line) => html`${line}<br>`)}
               </div>
             `)}
           </div>
@@ -358,6 +364,11 @@ export default class ContentBlock extends ZincElement {
     const textContent = this.querySelector('[slot="text"]') as HTMLDivElement | null;
     const textRows: TextRow[] = [];
 
+    if (textContent && looksLikeHtml(textContent.innerText)) {
+      this._textRows = [{lines: [sanitizeHtml(textContent.innerText)], type: 'text', html: true}];
+      return this._textRows;
+    }
+
     if (textContent) {
       const text = textContent.innerText.replace(/<br\s*\/?>/gi, '\n');
       const rows = text.split('\n');

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

@@ -17,11 +17,43 @@ describe('<zn-content-block>', () => {
     expect(el).to.exist;
   });
 
-  it('should render markup in the text body as text', async () => {
+  it('should render plain text in the text body as text', async () => {
+    const content = await textSection('1 &lt; 2 &amp;&amp; 3 &gt; 2');
+
+    expect(content.textContent).to.contain('1 < 2 && 3 > 2');
+  });
+
+  it('should drop images and handlers from markup in the text body', async () => {
     const content = await textSection('&lt;img src="x" onerror="window.__xss = true"&gt; hello');
 
     expect(content.querySelector('img')).to.be.null;
-    expect(content.textContent).to.contain('<img src="x" onerror="window.__xss = true"> hello');
+    expect(content.textContent).to.contain('hello');
+    expect((window as unknown as Record<string, unknown>).__xss).to.be.undefined;
+  });
+
+  it('should render allowed formatting from markup in the text body', async () => {
+    const content = await textSection(
+      '&lt;p&gt;&lt;em&gt;&lt;strong&gt;Need help?&lt;/strong&gt; Visit our '
+      + '&lt;a href="http://help.example.com" onclick="x()"&gt;Help Center&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;'
+    );
+
+    expect(content.querySelector('p em strong')?.textContent).to.equal('Need help?');
+    const link = content.querySelector('a')!;
+    expect(link.getAttribute('href')).to.equal('http://help.example.com/');
+    expect(link.getAttribute('rel')).to.equal('noopener noreferrer');
+    expect(link.hasAttribute('onclick')).to.be.false;
+    expect(content.textContent).to.not.contain('<p>');
+  });
+
+  it('should strip unsafe links and dropped elements from markup in the text body', async () => {
+    const content = await textSection(
+      '&lt;p&gt;&lt;a href="JavaScript:alert(1)"&gt;click&lt;/a&gt;&lt;/p&gt;'
+      + '&lt;style&gt;p{color:red}&lt;/style&gt;&lt;script&gt;window.__xss = true&lt;/script&gt;'
+    );
+
+    expect(content.querySelector('a')!.hasAttribute('href')).to.be.false;
+    expect(content.querySelector('style, script')).to.be.null;
+    expect(content.textContent).to.not.contain('color:red');
     expect((window as unknown as Record<string, unknown>).__xss).to.be.undefined;
   });
 

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

@@ -0,0 +1,85 @@
+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;
+}

package/src/components/split-pane/split-pane.scss

@@ -6,14 +6,18 @@
   gap: 0 calc(var(--zn-base-gap) / 2);
 }
 
+// Slotted panes are light DOM, which ::-webkit-scrollbar rules here cannot reach, so they take the standard properties.
 ::slotted(*) {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: mixins.$scrollbar-thumb transparent;
 }
 
 :host {
+  @include wc.scrollbars;
   display: flex;
   height: 100%;
   max-height: 100%;