Files
apes-sidebar/tests/bundle-route.spec.ts
T
Atlas Zeng 5e416eccef feat(mermaid): Markdown 预览安全渲染 Mermaid 图表(strict 清洗 + 懒加载 chunk + 点击放大) (#164)
* feat(mermaid): 新增 mermaid 懒加载 chunk(构建链四处同步 + mermaid 依赖)

tsdown CHUNKS / bundle-route CHUNK_NAMES / chunk-loader ChunkName /
package.json files 同步注册 mermaid chunk;mermaid ^11.16.1 进依赖与
lockfile;chunk 构建注入 uuid 浏览器入口别名,绕开 node:crypto 纯度门。

* feat(mermaid): Markdown 预览安全渲染 mermaid 图表 + 点击放大弹窗

- splitMermaidBlocks 纯函数按 fence 切块,无 mermaid 文件零行为变化;
- mermaid.initialize 走 securityLevel strict + htmlLabels:false,不应用
  bindFunctions(静态图);渲染 SVG 经 mermaid-sanitize 二次清洗:
  删 foreignObject/script/外来 HTML 元素、剥 @*/on* 属性、移除全部
  href/xlink:href,仅接受 SVG 根,解析失败返回空串;
- 点击图表弹出放大弹窗(滚轮缩放/拖拽平移/快捷键,借鉴 PR #75 交互,
  基于已清洗 SVG 克隆重写,不新增攻击面);
- 深浅色跟随重渲、失败回退错误条 + 原码、CodeBlock 同款 chrome。

* test(mermaid): splitter/sanitize 单测 + chunk 清单同步 + 挂载冒烟 diagram.md

- mermaid-blocks.spec 10 例 fence 切块语义;
- mermaid-sanitize.spec 8 例 XSS(foreignObject/on*/@*/href/xlink:href/
  script/外来元素/畸形 XML/非 SVG 根);
- bundle-route / chunk-artifact / manifest-consistency 清单加入 mermaid
  (chunk-artifact 补 addEventListener stub);
- 挂载冒烟新增 diagram.md:client-mermaid.js 往返、SVG 节点文字、
  点击弹窗 Esc 关闭、preview 模式编辑器隐藏。

* docs(mermaid): 安全渲染设计文档 + lazy-chunks 表 + README 双语更新

设计文档记录基线决策(PR #99 架构 + PR #75 点击放大)、安全模型
(strict/htmlLabels/清洗/href 剥离/无 bindFunctions)、验证与取舍。

* fix(mermaid): sanitizer 属性名大小写归一,堵住混合大小写属性绕过(CR P1)

XML 属性名保留大小写,而输出会经 HTML 解析归一化(dangerouslySetInnerHTML),
oNload/HREF/xlink:HREF 这类混合大小写属性此前会漏过清洗。比较前先
toLowerCase(),按原名删除;新增混合大小写事件/链接属性回归用例。

* fix(mermaid): sanitizer 元素黑名单大小写归一,堵住混合大小写元素绕过(CR P1)

XML 元素名保留大小写,querySelectorAll('script') 等选择器匹配不到
<sCrIpT>/<foreignobject>,而输出经 HTML 解析会被归一化为 SVG
script/foreignObject(可执行/可注入 HTML)。改为遍历全部元素按
localName.toLowerCase() 命中小写黑名单后整节点删除;新增混合大小写
script/foreignObject/外来 HTML 元素回归用例(jsdom 实证:旧选择器
命中 0,新逻辑命中 2)。

* fix(mermaid): 单次 Markdown 解析 + 占位交换(CR P1)+ CommonMark fence 规则(CR P2)

P1(跨 fence 语义):弃用逐块 MarkdownText 拆分,改为整篇文档单次
MarkdownText 渲染,布局后把 language-mermaid 代码块交换为 MermaidDiagram
(React 管理的 .md-code-block 宿主保留在树中、display:contents 抑制盒子,
协调安全;块不再 mermaid 时还原原 children)。新增
tests/mermaid-markdown.spec.tsx 与 e2e 跨 fence 引用链接断言。

P2(fence 匹配):支持 3+ 反引号与波浪号开 fence;闭 fence 须同字符且
长度不小于开 fence;反引号 info string 含反引号不视为开 fence;修复
带缩进开 fence 的 info 提取。blocks 单测 +3 例。
2026-08-18 01:22:28 +08:00

151 lines
5.5 KiB
TypeScript

/**
* Lazy chunk route tests (src/bundle-route.ts): the /sidebar/bundle handler
* that serves the client's split bundles. Pins the trust fence, the name
* allowlist (no traversal), method gating, and the caching contract — ETag
* + If-None-Match 304 so multi-MB chunks revalidate cheaply instead of
* re-downloading.
*/
import { describe, expect, it } from 'vitest'
import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
import { tmpdir } from 'node:os'
import { join } from 'node:path'
import type { IncomingMessage, ServerResponse } from 'node:http'
import { CHUNK_NAMES, createBundleRouteHandler } from '../src/bundle-route.ts'
interface FakeRes {
status: number
headers: Record<string, string>
body: string
writeHead(status: number, headers?: Record<string, string>): void
end(body?: string | Buffer): void
}
function fakeRes(): FakeRes {
return {
status: 0,
headers: {},
body: '',
writeHead(status, headers = {}) {
this.status = status
this.headers = headers
},
end(body) {
if (body !== undefined) this.body = body.toString()
},
} as FakeRes
}
function req(method: string, url: string, headers: Record<string, string> = {}): IncomingMessage {
return { method, url, headers } as unknown as IncomingMessage
}
/** One handler instance over a scratch dir with a fake chunk file. */
function setup(): { handler: (req: IncomingMessage, res: ServerResponse) => Promise<void>; dir: string; cleanup: () => void } {
const dir = mkdtempSync(join(tmpdir(), 'bundle-route-'))
writeFileSync(join(dir, 'client-editor.js'), 'window.__ModuleLoader__ && 0;')
const handler = createBundleRouteHandler(() => true, dir)
return { handler, dir, cleanup: () => { rmSync(dir, { recursive: true, force: true }) } }
}
describe('/sidebar/bundle route', () => {
it('serves an allowlisted chunk with the JS content type and an ETag', async () => {
const { handler, cleanup } = setup()
try {
const res = fakeRes()
await handler(req('GET', '/sidebar/bundle/editor.js'), res as unknown as ServerResponse)
expect(res.status).toBe(200)
expect(res.headers['content-type']).toBe('text/javascript; charset=utf-8')
expect(res.headers['cache-control']).toBe('no-cache')
expect(res.headers.etag).toMatch(/^"[0-9a-f]{12}"$/)
expect(res.body).toContain('window.__ModuleLoader__')
} finally {
cleanup()
}
})
it('revalidates with a 304 when If-None-Match matches (no re-download)', async () => {
const { handler, cleanup } = setup()
try {
const first = fakeRes()
await handler(req('GET', '/sidebar/bundle/editor.js'), first as unknown as ServerResponse)
const etag = first.headers.etag!
const second = fakeRes()
await handler(req('GET', '/sidebar/bundle/editor.js', { 'if-none-match': etag }), second as unknown as ServerResponse)
expect(second.status).toBe(304)
expect(second.body).toBe('')
expect(second.headers.etag).toBe(etag)
} finally {
cleanup()
}
})
it('serves the new body after the file changed (ETag rotates)', async () => {
const { handler, dir, cleanup } = setup()
try {
const first = fakeRes()
await handler(req('GET', '/sidebar/bundle/editor.js'), first as unknown as ServerResponse)
writeFileSync(join(dir, 'client-editor.js'), 'window.__ModuleLoader__ && 1;')
const second = fakeRes()
await handler(req('GET', '/sidebar/bundle/editor.js', { 'if-none-match': first.headers.etag! }), second as unknown as ServerResponse)
expect(second.status).toBe(200)
expect(second.headers.etag).not.toBe(first.headers.etag)
expect(second.body).toContain('&& 1')
} finally {
cleanup()
}
})
it('rejects unknown chunk names (including traversal attempts) with 404', async () => {
const { handler, cleanup } = setup()
try {
for (const url of ['/sidebar/bundle/evil.js', '/sidebar/bundle/xlsx', '/sidebar/bundle/../secret.js', '/sidebar/bundle/xlsx.js/extra']) {
const res = fakeRes()
await handler(req('GET', url), res as unknown as ServerResponse)
expect(res.status, url).toBe(404)
}
} finally {
cleanup()
}
})
it('404s an allowlisted name whose built file is missing', async () => {
const { handler, cleanup } = setup()
try {
const res = fakeRes()
// 'terminal' is allowlisted but the scratch fixture only ships
// client-editor.js — the built file is missing → 404.
await handler(req('GET', '/sidebar/bundle/terminal.js'), res as unknown as ServerResponse)
expect(res.status).toBe(404)
} finally {
cleanup()
}
})
it('gates non-GET/HEAD methods with 405', async () => {
const { handler, cleanup } = setup()
try {
const res = fakeRes()
await handler(req('POST', '/sidebar/bundle/editor.js'), res as unknown as ServerResponse)
expect(res.status).toBe(405)
} finally {
cleanup()
}
})
it('enforces the browser-trust fence with 403 before any lookup', async () => {
const dir = mkdtempSync(join(tmpdir(), 'bundle-route-fence-'))
try {
const handler = createBundleRouteHandler(() => false, dir)
const res = fakeRes()
await handler(req('GET', '/sidebar/bundle/editor.js'), res as unknown as ServerResponse)
expect(res.status).toBe(403)
} finally {
rmSync(dir, { recursive: true, force: true })
}
})
it('exports the chunk allowlist (mirror of src/client/chunk-loader.ts)', () => {
expect([...CHUNK_NAMES]).toEqual(['terminal', 'editor', 'mermaid'])
})
})