@aquera/nile-elements 1.9.7 → 1.9.9

package/src/nile-wysiwyg-editor/engine/plugins/math-view.ts

@@ -5,15 +5,34 @@ import { NodeView } from 'prosemirror-view';
 export type MathRenderer = (latex: string, display: 'inline' | 'block') => string;
 
 /**
- * Inline atom rendering a math formula. When the host supplies a renderer the
- * formula is drawn with it; otherwise the raw LaTeX is shown in a math chip so
- * the content is still visible and editable without a math engine.
+ * Lazy-loaded KaTeX module (loaded once, only when the first formula renders,
+ * so editors without math pay nothing). Resolves to the katex default export.
+ */
+let katexPromise: Promise<{ renderToString(tex: string, opts?: Record<string, unknown>): string }> | null =
+  null;
+function loadKatex() {
+  if (!katexPromise) {
+    katexPromise = import('katex').then(m => m.default);
+  }
+  return katexPromise;
+}
+
+/**
+ * Inline atom rendering a math formula. Precedence:
+ *   1. A host-supplied `mathRenderer` (full control — e.g. KaTeX HTML, MathJax).
+ *   2. The built-in default: KaTeX compiled to **MathML**, which browsers render
+ *      natively with no stylesheet or web fonts (works cleanly inside the
+ *      editor's shadow root).
+ *   3. If KaTeX can't load / parse, the raw LaTeX stays visible.
  */
 export class MathView implements NodeView {
   dom: HTMLSpanElement;
 
   private renderer?: MathRenderer;
 
+  /** Bumps on every render so a slow async KaTeX result for a stale node is dropped. */
+  private token = 0;
+
   constructor(node: PMNode, renderer?: MathRenderer) {
     this.renderer = renderer;
     this.dom = document.createElement('span');
@@ -31,16 +50,38 @@ export class MathView implements NodeView {
     this.dom.setAttribute('data-math', latex);
     this.dom.setAttribute('data-math-display', display);
     this.dom.title = latex;
+
+    const token = ++this.token;
+
+    // 1. Host renderer wins.
     if (this.renderer) {
       try {
         // Host renderer output is trusted (same trust level as uploadHandler).
         this.dom.innerHTML = this.renderer(latex, display);
         return;
       } catch {
-        // Fall back to raw LaTeX if the renderer throws.
+        // Fall through to the built-in renderer.
       }
     }
+
+    // 2. Built-in KaTeX → MathML. Show raw LaTeX until the (lazy) engine loads.
     this.dom.textContent = latex;
+    loadKatex()
+      .then(katex => {
+        if (token !== this.token) return; // node changed while loading
+        try {
+          this.dom.innerHTML = katex.renderToString(latex, {
+            output: 'mathml',
+            displayMode: display === 'block',
+            throwOnError: false,
+          });
+        } catch {
+          this.dom.textContent = latex;
+        }
+      })
+      .catch(() => {
+        /* KaTeX unavailable — keep the raw LaTeX already shown. */
+      });
   }
 
   update(node: PMNode): boolean {

package/src/nile-wysiwyg-editor/engine/plugins/style-block-view.ts

@@ -0,0 +1,178 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { NodeView } from 'prosemirror-view';
+
+/** Content root the editor mounts the document under. Author CSS is scoped to
+ * it so a rule such as `div { background: green }` styles the content only and
+ * can never paint the editor chrome (toolbar, panels, surface) that shares the
+ * same shadow root. */
+const CONTENT_SCOPE = '.ProseMirror';
+
+/** Advances past a quoted string starting at `i` (the opening quote), honoring
+ * backslash escapes; returns the index just after the closing quote. */
+function skipString(css: string, i: number): number {
+  const quote = css[i];
+  i += 1;
+  while (i < css.length) {
+    if (css[i] === '\\') {
+      i += 2;
+      continue;
+    }
+    if (css[i] === quote) return i + 1;
+    i += 1;
+  }
+  return i;
+}
+
+/** Splits on a top-level separator, ignoring ones inside (), [] or strings. */
+function splitTopLevel(str: string, sep: string): string[] {
+  const parts: string[] = [];
+  let depth = 0;
+  let buf = '';
+  for (let i = 0; i < str.length; i += 1) {
+    const c = str[i];
+    if (c === '"' || c === "'") {
+      const end = skipString(str, i);
+      buf += str.slice(i, end);
+      i = end - 1;
+      continue;
+    }
+    if (c === '(' || c === '[') depth += 1;
+    else if (c === ')' || c === ']') depth -= 1;
+    if (c === sep && depth === 0) {
+      parts.push(buf);
+      buf = '';
+      continue;
+    }
+    buf += c;
+  }
+  parts.push(buf);
+  return parts;
+}
+
+/** Confines one complex selector to the content root. `html`/`body`/`:root`
+ * map onto the root itself. */
+function scopeSelector(selector: string, scope: string): string {
+  const sel = selector.trim();
+  if (!sel) return sel;
+  if (/^(?:html|body|:root)$/i.test(sel)) return scope;
+  const root = sel.match(/^(?:html|body|:root)\b\s*/i);
+  return root ? `${scope} ${sel.slice(root[0].length)}`.trim() : `${scope} ${sel}`;
+}
+
+/** Confines a comma-separated selector list to the content root. */
+function scopeSelectorList(list: string, scope: string): string {
+  return splitTopLevel(list, ',')
+    .map(part => scopeSelector(part, scope))
+    .filter(Boolean)
+    .join(', ');
+}
+
+const NESTED_AT_RULES = new Set(['media', 'supports', 'container', 'layer', 'scope']);
+
+/**
+ * Scopes every rule in a CSS block to the content root by prefixing selectors,
+ * keeping each declaration block **verbatim**. Declarations are never re-parsed
+ * (a CSSOM round-trip drops `var()` inside shorthands, e.g. gradient text), and
+ * strings/nested braces are tracked so `content: "}"` can't derail it. Nested
+ * conditionals (`@media`, `@supports`, …) recurse; other at-rules
+ * (`@keyframes`, `@font-face`, …) pass through untouched.
+ */
+function scopeBlock(css: string, scope: string): string {
+  let out = '';
+  let i = 0;
+  const n = css.length;
+  while (i < n) {
+    let j = i;
+    while (j < n) {
+      const c = css[j];
+      if (c === '"' || c === "'") {
+        j = skipString(css, j);
+        continue;
+      }
+      if (c === '{' || c === ';') break;
+      j += 1;
+    }
+    if (j >= n) {
+      out += css.slice(i);
+      break;
+    }
+    if (css[j] === ';') {
+      // A statement at-rule (e.g. a stray @charset) — keep verbatim.
+      out += css.slice(i, j + 1);
+      i = j + 1;
+      continue;
+    }
+    const prelude = css.slice(i, j).trim();
+    let depth = 1;
+    let k = j + 1;
+    while (k < n && depth > 0) {
+      const c = css[k];
+      if (c === '"' || c === "'") {
+        k = skipString(css, k);
+        continue;
+      }
+      if (c === '{') depth += 1;
+      else if (c === '}') depth -= 1;
+      k += 1;
+    }
+    const body = css.slice(j + 1, k - 1);
+    if (prelude.startsWith('@')) {
+      const name = (prelude.match(/^@([a-z-]+)/i)?.[1] ?? '').toLowerCase();
+      out += NESTED_AT_RULES.has(name)
+        ? `${prelude} {${scopeBlock(body, scope)}}`
+        : `${prelude} {${body}}`;
+    } else if (prelude) {
+      out += `${scopeSelectorList(prelude, scope)} {${body}}`;
+    }
+    i = k;
+  }
+  return out;
+}
+
+/** Returns author CSS confined to the content root. */
+function scopeCss(css: string, scope: string): string {
+  if (!css.trim()) return '';
+  try {
+    return scopeBlock(css, scope);
+  } catch {
+    return css;
+  }
+}
+
+/**
+ * Node view for an author `<style>` block. It injects the CSS live — scoped to
+ * the content root — so the styles apply to the document as authored, with no
+ * visible chip. The block itself renders nothing (a hidden `<style>` host); it
+ * round-trips to `<style>` in the output via the schema's toDOM, and the same
+ * raw CSS is what the HTML-source preview renders.
+ */
+export class StyleBlockView implements NodeView {
+  dom: HTMLElement;
+
+  private styleEl: HTMLStyleElement;
+
+  constructor(private node: PMNode) {
+    this.dom = document.createElement('div');
+    this.dom.className = 'nile-wysiwyg__style-block';
+    this.dom.contentEditable = 'false';
+
+    // A <style> applies regardless of its (display:none) host, so the block is
+    // invisible yet its rules take effect on the content.
+    this.styleEl = document.createElement('style');
+    this.styleEl.textContent = scopeCss(node.attrs.css, CONTENT_SCOPE);
+    this.dom.append(this.styleEl);
+  }
+
+  update(node: PMNode): boolean {
+    if (node.type !== this.node.type) return false;
+    if (node.attrs.css !== this.node.attrs.css) {
+      this.styleEl.textContent = scopeCss(node.attrs.css, CONTENT_SCOPE);
+    }
+    this.node = node;
+    return true;
+  }
+
+  ignoreMutation(): boolean {
+    return true;
+  }
+}

package/src/nile-wysiwyg-editor/engine/plugins/tables.ts

@@ -1,5 +1,34 @@
 import { Plugin } from 'prosemirror-state';
-import { tableEditing, columnResizing } from 'prosemirror-tables';
+import { Node as PMNode } from 'prosemirror-model';
+import { tableEditing, columnResizing, TableView } from 'prosemirror-tables';
+
+/**
+ * TableView that also reflects the author's `class`/`id` onto the inner
+ * `<table>` element (the base TableView leaves it bare and puts its own class on
+ * the wrapper div). The attributes round-trip via the schema's toDOM on export;
+ * this makes `table.grid …` style rules match in the live editor too. Passed to
+ * `columnResizing` as its `View`, so column resizing keeps working.
+ */
+class HtmlAttrTableView extends TableView {
+  constructor(node: PMNode, defaultCellMinWidth: number) {
+    super(node, defaultCellMinWidth);
+    this.applyHtmlAttrs(node);
+  }
+
+  private applyHtmlAttrs(node: PMNode): void {
+    const htmlClass = node.attrs.htmlClass as string | null;
+    const htmlId = node.attrs.htmlId as string | null;
+    this.table.className = htmlClass ?? '';
+    if (htmlId) this.table.id = htmlId;
+    else this.table.removeAttribute('id');
+  }
+
+  update(node: PMNode): boolean {
+    const updated = super.update(node);
+    if (updated) this.applyHtmlAttrs(node);
+    return updated;
+  }
+}
 
 /**
  * prosemirror-tables wiring: cell selections, fix-tables normalization, and
@@ -8,5 +37,8 @@ import { tableEditing, columnResizing } from 'prosemirror-tables';
  * is inlined in nile-wysiwyg-editor.css.ts.
  */
 export function tablePlugins(): Plugin[] {
-  return [columnResizing(), tableEditing({ allowTableNodeSelection: true })];
+  return [
+    columnResizing({ View: HtmlAttrTableView }),
+    tableEditing({ allowTableNodeSelection: true }),
+  ];
 }

package/src/nile-wysiwyg-editor/engine/pm.test.ts

@@ -68,12 +68,34 @@ describe('sanitizeHtml', () => {
     expect(sanitizeHtml('<article><p>kept</p></article>')).to.equal('<p>kept</p>');
   });
 
-  it('drops iframes, styles and forms with content', () => {
+  it('drops non-https iframes and forms with content', () => {
     const out = sanitizeHtml(
-      '<iframe src="x"></iframe><style>p{}</style><form><input></form><p>ok</p>'
+      '<iframe src="x"></iframe><form><input></form><p>ok</p>'
     );
     expect(out).to.equal('<p>ok</p>');
   });
+
+  it('keeps <style> blocks and sanitizes their CSS', () => {
+    const out = sanitizeHtml(
+      '<style>@import url("http://evil/x.css"); p{color:red} a{behavior:url(x.htc)} ' +
+        'b{width:expression(alert(1))} c{background:url(http://evil/x.png)}</style><p>ok</p>'
+    );
+    expect(out).to.include('<style>');
+    expect(out).to.include('color:red');
+    expect(out).to.include('<p>ok</p>');
+    expect(out).to.not.match(/@import/i);
+    expect(out).to.not.match(/expression\s*\(/i);
+    expect(out).to.not.match(/behavior\s*:/i);
+    expect(out).to.not.match(/url\(\s*['"]?http/i);
+  });
+
+  it('keeps safe data-image and #fragment url() in <style>', () => {
+    const out = sanitizeHtml(
+      '<style>a{background:url(data:image/png;base64,AAAA)} b{clip-path:url(#f)}</style>'
+    );
+    expect(out).to.include('url(data:image/png');
+    expect(out).to.include('url(#f)');
+  });
 });
 
 describe('serializer round-trip', () => {
@@ -105,6 +127,21 @@ describe('serializer round-trip', () => {
     expect(docToHtml(doc)).to.include('<strong>');
   });
 
+  it('round-trips an author <style> block through the schema', () => {
+    const doc = htmlToDoc(defaultSchema, '<style>p{color:red}</style><p>hi</p>');
+    expect(doc.firstChild!.type.name).to.equal('styleBlock');
+    const out = docToHtml(doc);
+    expect(out).to.include('<style>');
+    expect(out).to.match(/color:\s*red/i);
+    expect(out).to.include('<p>hi</p>');
+    // Malicious CSS is neutralized on the round-trip, not just at the surface.
+    const evil = docToHtml(
+      htmlToDoc(defaultSchema, '<style>@import url(http://evil);x{color:blue}</style><p>ok</p>')
+    );
+    expect(evil).to.include('<style>');
+    expect(evil).to.not.match(/@import/i);
+  });
+
   it('detects empty documents', () => {
     expect(isDocEmpty(htmlToDoc(defaultSchema, ''))).to.equal(true);
     expect(isDocEmpty(htmlToDoc(defaultSchema, '<p></p>'))).to.equal(true);
@@ -482,20 +519,33 @@ describe('embeds', () => {
     ).to.equal('loom');
   });
 
-  it('rejects non-provider and non-https URLs', () => {
-    expect(toEmbedUrl('https://evil.example.com/embed/x')).to.equal(null);
+  it('accepts any https URL as a generic embed, rejects non-https', () => {
+    expect(toEmbedUrl('https://example.com/player/x')).to.deep.equal({
+      src: 'https://example.com/player/x',
+      provider: 'generic',
+    });
+    // Lookalike hosts are no longer canonicalized as a provider, just generic.
+    expect(toEmbedUrl('https://youtube.com.evil.com/watch?v=x')!.provider).to.equal('generic');
+    // Non-https is still refused.
     expect(toEmbedUrl('http://www.youtube.com/watch?v=dQw4w9WgXcQ')).to.equal(null);
     expect(toEmbedUrl('javascript:alert(1)')).to.equal(null);
-    expect(toEmbedUrl('https://youtube.com.evil.com/watch?v=x')).to.equal(null);
-    expect(isAllowedEmbedSrc('https://evil.com/embed/x')).to.equal(false);
+    expect(isAllowedEmbedSrc('https://example.com/player/x')).to.equal(true);
+    expect(isAllowedEmbedSrc('http://example.com/x')).to.equal(false);
   });
 
-  it('keeps allowlisted iframes through sanitization, drops the rest', () => {
+  it('keeps any https iframe through sanitization but force-sandboxes it', () => {
     const good = sanitizeHtml(
       '<div data-embed-provider="youtube"><iframe src="https://www.youtube-nocookie.com/embed/abc123xyz"></iframe></div>'
     );
     expect(good).to.include('youtube-nocookie.com/embed');
-    const evil = sanitizeHtml('<iframe src="https://evil.example.com/steal"></iframe><p>ok</p>');
+    expect(good).to.include('sandbox=');
+    // A non-provider https iframe is kept, but sandboxed and cannot navigate the top.
+    const generic = sanitizeHtml('<iframe src="https://example.com/player"></iframe><p>ok</p>');
+    expect(generic).to.include('example.com/player');
+    expect(generic).to.include('sandbox=');
+    expect(generic).to.not.include('allow-top-navigation');
+    // Non-https iframes are still dropped entirely.
+    const evil = sanitizeHtml('<iframe src="http://evil.example.com/steal"></iframe><p>ok</p>');
     expect(evil).to.equal('<p>ok</p>');
   });
 

package/src/nile-wysiwyg-editor/engine/sanitize.ts

@@ -6,11 +6,11 @@
  * set the schema understands.
  */
 
-import { isAllowedEmbedSrc } from './plugins/embeds';
+import { isAllowedEmbedSrc, EMBED_SANDBOX, EMBED_REFERRER_POLICY } from './plugins/embeds';
 
 /** Elements removed together with their content. */
 const DROP_WITH_CONTENT = new Set([
-  'script', 'style', 'frame', 'frameset', 'object', 'embed',
+  'script', 'frame', 'frameset', 'object', 'embed',
   'applet', 'form', 'input', 'textarea', 'select', 'button', 'meta', 'link',
   'base', 'title', 'noscript', 'template', 'svg', 'math', 'canvas', 'audio',
   'video', 'dialog', 'slot',
@@ -43,10 +43,24 @@ const TAG_ATTRS: Record<string, Set<string>> = {
   th: new Set(['colspan', 'rowspan', 'data-colwidth']),
   col: new Set(['span', 'width']),
   div: new Set(['data-embed-provider', 'data-width', 'data-align']),
-  iframe: new Set(['src', 'title', 'frameborder', 'allowfullscreen', 'allow']),
+  iframe: new Set([
+    'src', 'title', 'frameborder', 'allowfullscreen', 'allow', 'sandbox', 'referrerpolicy',
+  ]),
 };
 
-const GLOBAL_ATTRS = new Set(['style', 'align']);
+const GLOBAL_ATTRS = new Set(['style', 'align', 'class', 'id']);
+
+/** Author class/id names starting with these are the editor's own; drop them so
+ * content can't impersonate or restyle the chrome. */
+const RESERVED_NAME = /^(?:nile-wysiwyg|ProseMirror)/;
+
+/** Filtered `class`: reserved-prefixed tokens removed. Empty → drop attribute. */
+function cleanClassAttr(value: string): string {
+  return value
+    .split(/\s+/)
+    .filter(token => token && !RESERVED_NAME.test(token))
+    .join(' ');
+}
 
 /** Style declarations the schema can represent. Everything else is noise. */
 const ALLOWED_STYLES = new Set([
@@ -95,6 +109,33 @@ function filterStyle(value: string, tag: string): string {
     .join('; ');
 }
 
+/**
+ * Sanitizes the CSS inside a <style> block. Neutralizes the vectors that make
+ * a raw stylesheet dangerous while leaving ordinary rules intact:
+ *  - `@import` (external fetch / data exfiltration) — removed,
+ *  - `expression()`, `behavior:`, `-moz-binding:` (script execution) — broken,
+ *  - `url(...)` pointing anywhere other than a safe data: image or a local
+ *    `#fragment` — replaced with `url(#)`,
+ *  - any `</style` sequence — stripped so the text can't break out of the
+ *    element when the document is re-serialized.
+ * CSS comments are dropped first so none of the above can hide inside one.
+ */
+export function sanitizeCss(css: string): string {
+  return css
+    .replace(/<\/style/gi, '')
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/@import[^;]*;?/gi, '')
+    .replace(/expression\s*\(/gi, 'blocked(')
+    .replace(/(behavior|-moz-binding)(\s*):/gi, 'blocked-prop$2:')
+    .replace(/url\(\s*(['"]?)([^)]*?)\1\s*\)/gi, (full, _quote, raw) => {
+      const url = String(raw).trim();
+      if (/^#/.test(url)) return full;
+      if (/^data:image\/(png|gif|jpe?g|webp|avif|bmp);/i.test(url)) return full;
+      return 'url(#)';
+    })
+    .trim();
+}
+
 function sanitizeElement(el: Element): void {
   const tag = el.tagName.toLowerCase();
   const allowed = TAG_ATTRS[tag];
@@ -111,6 +152,12 @@ function sanitizeElement(el: Element): void {
       const filtered = filterStyle(attr.value, tag);
       if (filtered) el.setAttribute('style', filtered);
       else el.removeAttribute('style');
+    } else if (name === 'class') {
+      const cleaned = cleanClassAttr(attr.value);
+      if (cleaned) el.setAttribute('class', cleaned);
+      else el.removeAttribute('class');
+    } else if (name === 'id') {
+      if (RESERVED_NAME.test(attr.value)) el.removeAttribute('id');
     } else if (name === 'href' || name === 'src') {
       // Raster data: URLs are allowed on images only.
       if (!isSafeUrl(attr.value, tag === 'img')) el.removeAttribute(attr.name);
@@ -128,9 +175,22 @@ function walk(node: Element): void {
       child.remove();
       continue;
     }
-    // iframes are allowed ONLY for allowlisted embed providers.
-    if (tag === 'iframe' && !isAllowedEmbedSrc(child.getAttribute('src') ?? '')) {
-      child.remove();
+    // iframes are allowed for any https src, but always force-sandboxed so an
+    // untrusted embed can never navigate the top window or run unrestricted.
+    if (tag === 'iframe') {
+      if (!isAllowedEmbedSrc(child.getAttribute('src') ?? '')) {
+        child.remove();
+        continue;
+      }
+      child.setAttribute('sandbox', EMBED_SANDBOX);
+      child.setAttribute('referrerpolicy', EMBED_REFERRER_POLICY);
+    }
+    // <style> blocks are kept, but their CSS is sanitized and any attributes
+    // (media, nonce, …) dropped. Handled before the unwrap branch below so the
+    // raw CSS is never spilled into the document as visible text.
+    if (tag === 'style') {
+      child.textContent = sanitizeCss(child.textContent ?? '');
+      for (const attr of Array.from(child.attributes)) child.removeAttribute(attr.name);
       continue;
     }
     if (!ALLOWED_TAGS.has(tag)) {
@@ -150,7 +210,10 @@ function walk(node: Element): void {
  * DOMParser, so embedded scripts never execute and images never load.
  */
 export function sanitizeHtml(html: string): string {
-  const doc = new DOMParser().parseFromString(html, 'text/html');
+  // Wrap in an explicit <body> so metadata-like tags (notably <style>) stay in
+  // the body instead of being hoisted into <head> by the HTML parser — which
+  // would drop them before walk() ever sees them. Mirrors htmlToDoc's parse.
+  const doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html');
   walk(doc.body);
   return doc.body.innerHTML;
 }