@flamingo-stack/openframe-frontend-core 0.0.508 → 0.0.509

package/src/components/ui/index.ts

@@ -178,7 +178,6 @@ export * from './ticket-attachments-list'
 export * from './ticket-note-card'
 export * from './ticket-notes-section'
 export * from './marquee-wall'
-export * from './simple-markdown-renderer'
-export { RichMarkdownRenderer, type RichMarkdownRendererProps } from './rich-markdown-renderer'
+export * from './markdown'
 export * from './filter-pill-row'
 

package/src/components/ui/markdown/__tests__/mermaid-security.test.ts

@@ -0,0 +1,176 @@
+/**
+ * Mermaid renders MODEL-authored diagram source on the chat path, and the
+ * result is injected with `dangerouslySetInnerHTML`. This fixture pins the
+ * hardening in ../mermaid-diagram.tsx: a hostile node label must NOT survive
+ * as live HTML.
+ *
+ * The test drives `mermaid` with the SAME security knobs the component sets,
+ * by IMPORTING them: `MERMAID_SECURITY_OPTIONS` is the single source of truth
+ * and is spread into both `mermaid.initialize` calls. There are no literals
+ * here to drift from the component — flipping `securityLevel` to `'loose'` in
+ * the constant fails this suite (verified).
+ *
+ * `secure` is part of that constant: it is the allowlist of config keys a
+ * `%%{init}%%` directive inside the diagram SOURCE may not override. mermaid's
+ * default list omits `htmlLabels`, so untrusted source could otherwise
+ * re-enable HTML labels while `securityLevel` stayed locked.
+ *
+ * jsdom NOTE (recorded, not proven): before `htmlLabels` was added to `secure`,
+ * a `%%{init: {"htmlLabels": true}}%%` directive was observed to make
+ * `mermaid.render` never settle under jsdom (>60s, against a passing
+ * two-render control). That was NOT reproduced in a real browser and may be an
+ * artifact of jsdom having no layout — it is NOT a confirmed browser DoS. The
+ * component wraps its render in a timeout regardless.
+ */
+import { beforeAll, describe, expect, it } from 'vitest'
+import { MERMAID_SECURITY_OPTIONS } from '../mermaid-diagram'
+
+// jsdom implements no SVG layout, and mermaid's dagre pass measures text.
+// These stubs are only about making the renderer RUN; they do not touch the
+// sanitization path under test.
+function installSvgLayoutStubs(): void {
+  const proto = (globalThis as unknown as { SVGElement?: { prototype: Record<string, unknown> } }).SVGElement?.prototype
+  if (!proto) return
+  proto.getBBox = function getBBox() {
+    return { x: 0, y: 0, width: 100, height: 20 }
+  }
+  proto.getComputedTextLength = function getComputedTextLength() {
+    return 100
+  }
+  proto.getScreenCTM = function getScreenCTM() {
+    return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, inverse: () => ({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }) }
+  }
+}
+
+// Second tuple slot: text that MUST be present in the rendered output — a
+// positive control proving the diagram was actually drawn, so the negative
+// assertions below can't pass on empty output. Note the two payloads are
+// neutralized differently: the `<img>` survives as ESCAPED label text, while
+// the `<script>` is dropped outright, so its control is the sibling node.
+const HOSTILE_LABELS: ReadonlyArray<readonly [chart: string, expectedText: string]> = [
+  ['graph TD\n  A["<img src=x onerror=alert(1)>"] --> B["ok"]', '<img'],
+  ['graph TD\n  A["<script>alert(1)</script>"] --> B["ok"]', 'ok'],
+  // A `%%{init}%%` directive trying to unlock the two knobs. Both keys are in
+  // `secure`, so the override is rejected and the payload stays escaped.
+  [
+    '%%{init:{"securityLevel":"loose"}}%%\ngraph TD\n  A["<img src=x onerror=alert(1)>"] --> B["ok"]',
+    '<img',
+  ],
+  [
+    '%%{init:{"htmlLabels":true}}%%\ngraph TD\n  A["<img src=x onerror=alert(1)>"] --> B["ok"]',
+    '<img',
+  ],
+  // YAML front-matter config — the other in-source config channel.
+  [
+    '---\nconfig:\n  securityLevel: loose\n---\ngraph TD\n  A["<img src=x onerror=alert(1)>"] --> B["ok"]',
+    '<img',
+  ],
+  // `click` interaction directive: disabled outright by 'strict'.
+  ['graph TD\n  A["ok"] --> B["b"]\n  click A "javascript:alert(1)"', 'ok'],
+]
+
+/** Initialize with the COMPONENT's security options — imported, never
+ *  re-typed — so the fixture cannot drift from the renderer. */
+function initializeLikeComponent(mermaid: { initialize: (c: Record<string, unknown>) => void }): void {
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'dark',
+    flowchart: { useMaxWidth: true },
+    ...MERMAID_SECURITY_OPTIONS,
+  })
+}
+
+describe('mermaid hostile-label hardening', () => {
+  beforeAll(() => {
+    installSvgLayoutStubs()
+  })
+
+  it.each(HOSTILE_LABELS)('does not emit live HTML for %j', async (chart, expectedText) => {
+    const { default: mermaid } = await import('mermaid')
+
+    initializeLikeComponent(mermaid)
+
+    const { svg } = await mermaid.render(`mermaid-security-${Math.random().toString(36).slice(2)}`, chart)
+
+    // No live element, and no event-handler attribute, anywhere in the output.
+    expect(svg).not.toMatch(/<img[\s>]/i)
+    expect(svg).not.toMatch(/<script[\s>]/i)
+    expect(svg).not.toMatch(/\son[a-z]+\s*=/i)
+    // `htmlLabels: false` means no HTML subtree is minted for labels at all.
+    expect(svg).not.toMatch(/<foreignObject/i)
+    // 'strict' drops `click` bindings, so no javascript: URL is ever emitted.
+    expect(svg).not.toMatch(/javascript:/i)
+
+    // And it stays inert once parsed as HTML: the hostile markup must appear
+    // as TEXT (escaped), never as an element node.
+    const host = document.createElement('div')
+    host.innerHTML = svg
+    expect(host.querySelector('img')).toBeNull()
+    expect(host.querySelector('script')).toBeNull()
+    const text = host.textContent ?? ''
+    expect(text).toContain(expectedText)
+    // The script payload never survives in any form.
+    expect(text).not.toContain('alert(1)')
+  })
+})
+
+/**
+ * CSS is the OTHER injection surface, and the HTML hardening above does not
+ * cover it. `themeCSS` is raw CSS that mermaid emits into a `<style>` inside
+ * the SVG the component hands to `dangerouslySetInnerHTML`, and mermaid's
+ * directive sanitizer does not defend it: it is an ordinary config key whose
+ * value only gets brace-balanced. Before `themeCSS` was added to `secure`,
+ * both payloads below reproduced against real mermaid 11.14.0 — the first
+ * emitted `#svgId{position:fixed;…;z-index:2147483647;}` (an opaque top-most
+ * viewport-filling overlay whose visible text the author writes in the node
+ * labels), the second emitted a document-global `@font-face` fetching from an
+ * attacker host, because at-rules escape the `#svgId` prefix entirely.
+ *
+ * Diagram source on the chat path is MODEL output, so this is reachable from
+ * untrusted input. These cases fail if `themeCSS` leaves `secure`.
+ */
+const HOSTILE_THEME_CSS: ReadonlyArray<readonly [label: string, chart: string]> = [
+  [
+    'viewport-overlay via bare declarations',
+    // The label is deliberately neutral: in the real attack it reads
+    // "Session expired, sign in at <attacker host>", but putting a hostname in
+    // the label would trip this suite's own `not.toContain('evil.example')`
+    // assertion on legitimate TEXT rather than on injected CSS.
+    '%%{init:{"themeCSS":"position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2147483647;background:#fff"}}%%\ngraph TD\n  A["Session expired. Sign in again."] --> B["ok"]',
+  ],
+  [
+    'document-global at-rule escaping the #svgId scope',
+    '%%{init:{"themeCSS":"@font-face { font-family: e; src: url(https://evil.example/f.woff) }"}}%%\ngraph TD\n  A["ok"] --> B["b"]',
+  ],
+  [
+    'the YAML front-matter config channel',
+    '---\nconfig:\n  themeCSS: "position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2147483647"\n---\ngraph TD\n  A["ok"] --> B["b"]',
+  ],
+]
+
+describe('mermaid themeCSS hardening', () => {
+  beforeAll(() => {
+    installSvgLayoutStubs()
+  })
+
+  it.each(HOSTILE_THEME_CSS)('rejects a themeCSS override — %s', async (_label, chart) => {
+    const { default: mermaid } = await import('mermaid')
+
+    initializeLikeComponent(mermaid)
+
+    const { svg } = await mermaid.render(
+      `mermaid-themecss-${Math.random().toString(36).slice(2)}`,
+      chart,
+    )
+
+    expect(svg).not.toMatch(/position\s*:\s*fixed/i)
+    expect(svg).not.toContain('2147483647')
+    expect(svg).not.toMatch(/@font-face/i)
+    expect(svg).not.toContain('evil.example')
+    // Positive control: the diagram still rendered, so the assertions above
+    // cannot be passing on empty output.
+    const host = document.createElement('div')
+    host.innerHTML = svg
+    expect(host.textContent ?? '').toContain('ok')
+  })
+})

package/src/components/ui/markdown/__tests__/mermaid-stale-render.test.tsx

@@ -0,0 +1,151 @@
+/**
+ * MermaidDiagram's render effect re-runs on every `chart` change, and during
+ * STREAMING the chart text grows chunk by chunk — so several renders are in
+ * flight at once. Without a per-effect cancellation guard a slower EARLIER
+ * render can resolve last and overwrite the newer output (and, on the error
+ * path, paint an error for a chart that is no longer displayed).
+ *
+ * The 15s render timeout does not close this: it rejects the race, but does
+ * not abort the underlying `mermaid.render`, so the stale write is merely
+ * bounded, not prevented. These fixtures pin the guard.
+ *
+ * `mermaid` is mocked with a hand-settled deferred so resolution ORDER is
+ * under the test's control. (The real-mermaid security fixture lives in
+ * ./mermaid-security.test.ts and must stay unmocked, hence a separate file.)
+ */
+import { render, act } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+interface Deferred {
+  chart: string
+  resolve: (value: { svg: string }) => void
+  reject: (err: Error) => void
+}
+
+const renders: Deferred[] = []
+
+vi.mock('mermaid', () => ({
+  default: {
+    initialize: vi.fn(),
+    render: vi.fn(
+      (_id: string, chart: string) =>
+        new Promise<{ svg: string }>((resolve, reject) => {
+          renders.push({ chart, resolve, reject })
+        }),
+    ),
+  },
+}))
+
+import { MermaidDiagram } from '../mermaid-diagram'
+
+/**
+ * Let the mocked dynamic import + the resolved promise chain flush.
+ *
+ * MACROTASK-based and BOUNDED-POLLING on purpose. A fixed number of
+ * `await Promise.resolve()` turns is NOT a settle condition here: the component
+ * reaches `mermaid.render` through `mount effect → setMounted → re-render →
+ * effect → await import('mermaid')`, and how many microtask turns a dynamic
+ * import takes to resolve differs across Node/vitest releases. Three turns
+ * happened to be enough on Node 22 and are NOT on Node 25, where the second
+ * `mermaid.render` had not been called yet when the assertions ran — the suite
+ * failed with `renders.length === 1` (and, once the real module leaked in, with
+ * a genuine mermaid parse error). Poll for the condition instead of guessing a
+ * tick count.
+ */
+const flushUntil = async (done: () => boolean, what: string) => {
+  for (let i = 0; i < 50; i++) {
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0))
+    })
+    if (done()) return
+  }
+  throw new Error(`timed out waiting for ${what}`)
+}
+
+/** Settle pending state updates when there is no specific condition to await. */
+const flush = async () => {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+  })
+}
+
+/** Wait until `mermaid.render` has been called exactly `n` times. */
+const flushRenders = (n: number) =>
+  flushUntil(() => renders.length >= n, `${n} mermaid.render call(s)`)
+
+const svgOf = (container: HTMLElement) =>
+  container.querySelector('.mermaid-svg-container')?.innerHTML ?? ''
+
+describe('MermaidDiagram stale-render guard', () => {
+  beforeEach(() => {
+    renders.length = 0
+  })
+
+  it('ignores an earlier render that resolves after a newer chart', async () => {
+    const view = render(<MermaidDiagram chart="graph TD\n A-->B" />)
+    await flushRenders(1)
+    view.rerender(<MermaidDiagram chart="graph TD\n A-->B\n B-->C" />)
+    await flushRenders(2)
+
+    // Newer render lands first, then the abandoned earlier one.
+    await act(async () => {
+      renders[1]!.resolve({ svg: '<svg id="new"></svg>' })
+    })
+    await act(async () => {
+      renders[0]!.resolve({ svg: '<svg id="stale"></svg>' })
+    })
+    await flush()
+
+    expect(svgOf(view.container)).toContain('id="new"')
+    expect(svgOf(view.container)).not.toContain('id="stale"')
+  })
+
+  it('ignores a late failure from an abandoned render', async () => {
+    const view = render(<MermaidDiagram chart="graph TD\n A-->B" />)
+    await flushRenders(1)
+    view.rerender(<MermaidDiagram chart="graph TD\n A-->B\n B-->C" />)
+    await flushRenders(2)
+
+    await act(async () => {
+      renders[1]!.resolve({ svg: '<svg id="new"></svg>' })
+    })
+    await act(async () => {
+      renders[0]!.reject(new Error('Diagram rendering timed out after 15000ms'))
+    })
+    await flush()
+
+    expect(view.container.textContent).not.toContain('Diagram Error')
+    expect(svgOf(view.container)).toContain('id="new"')
+  })
+
+  /**
+   * The error state must not be STICKY. This is the streaming hot path, not an
+   * exotic case: the chart text grows chunk by chunk, every intermediate
+   * prefix is an invalid diagram, and mermaid rejects each one. The render body
+   * evaluates `error` BEFORE `svg`, so an uncleared message keeps the "Diagram
+   * Error" card on screen for the component's whole lifetime — the finished
+   * diagram never appears even though its render succeeded.
+   */
+  it('recovers from a transient failure once a later render succeeds', async () => {
+    const view = render(<MermaidDiagram chart="graph TD" />)
+    await flushRenders(1)
+
+    // Partial chart → parse error, exactly what a mid-stream prefix produces.
+    await act(async () => {
+      renders[0]!.reject(new Error('Parse error on line 1'))
+    })
+    await flush()
+    expect(view.container.textContent).toContain('Diagram Error')
+
+    // The next delta completes the chart and renders cleanly.
+    view.rerender(<MermaidDiagram chart="graph TD\n A-->B" />)
+    await flushRenders(2)
+    await act(async () => {
+      renders[1]!.resolve({ svg: '<svg id="settled"></svg>' })
+    })
+    await flush()
+
+    expect(view.container.textContent).not.toContain('Diagram Error')
+    expect(svgOf(view.container)).toContain('id="settled"')
+  })
+})