dsh-mermaid-fence: a third mermaid fence renderer — only worth it for the post-render hardening pass (and here is what that pass cannot do)

[XiaoBinGan]

中文摘要：这是第三个 dsh mermaid 围栏渲染插件，但它不比前两个强 —— AKS1st/dsh-mermaid 和 timedomain1/dsh-mermaid-renderer 功能都更多（懒加载、缩放、全屏查看器、报错回环）。这个包只多做一件事：在 mermaid 渲染完成后对 SVG 再加固一遍。而且这一步不能阻止 mermaid 渲染阶段自己发起的那次请求，下面有实测数据。

What this is

dsh-mermaid-fence renders settled ```mermaid fences as SVG diagrams in the Web GUI chat. MIT, published as a community package under the dsh-plugin topic — the route `CONTRIBUTING.md` names, since external PRs are not accepted.

Two plugins already do this and both do more than mine. If you want any of the following, install one of them, not this:

If you want	Use
lazy viewport-driven loading, a fullscreen zoom overlay, an error bar with "copy report" / "send to AI"	AKS1st/dsh-mermaid
per-card zoom (0.25–4x), diagram/source toggle, standalone viewer, open in new tab	timedomain1/dsh-mermaid-renderer
a small client instead of a 3.5 MB one (mermaid served lazily)	either of the above — this package inlines mermaid

I am not going to pretend a third renderer is news. The one thing this package adds happens after mermaid returns.

The one difference: hardening the SVG after mermaid runs

securityLevel: 'strict' is hardcoded here and not configurable, same as the other two. But strict is not the end of the story: with mermaid 11.17.2 in Chromium, the label <img src=x onerror=alert(1)> comes back from mermaid as <img src="x"> — the handler is stripped, the element and its URL are not. Setting flowchart.htmlLabels: false does not change that. So the plugin passes mermaid's SVG through a hardening pass before it reaches the page: remove script/iframe/object/embed/img/image/audio/video/source/track, strip every on* attribute, and drop any href/xlink:href/src/srcset/data/poster/action/formaction that is not a #fragment or a data:image/ URI. (It also strips the <a xlink:href="https://…"> that a click C "https://…" directive produces under strict, leaving the anchor inert.)

Measured with a second origin counting hits — mermaid 11.17.2, the plugin's exact config, label <img src="http://<attacker>/x.gif">:

	during mermaid.render()	inserting the markup	inserting it a second time	<img> elements left in the DOM
raw mermaid output	1 off-origin request	1	1	2
hardened output	1–2 (varies between runs)	0	0	0

And the honest caveat: hardening runs after mermaid.render() resolves, and mermaid inserts its markup into the live document while building it — so that request during render is mermaid's own, and this plugin cannot prevent it. What hardening buys is narrower than "no network request": no <img> element survives in the page, and re-inserting the same markup cannot re-fetch. If that is not worth a 3.5 MB inlined bundle to you, that is a reasonable conclusion — use one of the two plugins above. A separate thread in this repo covers mermaid's strict behaviour itself in more depth; this post is only about what the plugin does about it.

Install

Not on npm — the public registry 404s for the name, so git only:

dsh plugin --profile web add github:XiaoBinGan/dsh-mermaid-fence

client.js is committed, so no build step runs. Disclosure: I verified the npm git-install form on my machine (six files unpack, client.js byte-identical to the repo copy, sha256 match), but I do not have the dsh CLI installed, so the dsh plugin line above is the documented route rather than something I ran.

Verified, not asserted

• unit suite: 26 tests, 25 pass, 0 fail, 1 skipped — the skipped one is an HTML-label assertion jsdom cannot settle, and it runs in the real-browser suite instead
• real Chromium suite: 2 pass — a settled fence paints a laid-out SVG (250×335 box, 4 node groups, 3 edges, real edge-path geometry), a streaming fence stays a code block, an invalid fence shows mermaid's own error message, and the host's copy button and source toggle still work
• node --check client.js exit 0; npm pack --dry-run = 6 files, ~968 kB packed
• cost, stated plainly: client.js is 3,461,602 bytes (962,140 gzipped) because mermaid is inlined; the README explains why a split chunk cannot resolve for a standalone plugin

Feedback welcome — especially from the two plugins above. If the hardening pass is worth borrowing, borrow it; that would be a better outcome than a third plugin existing.