Ontology Playground的分享链接编解码：shareCodec如何把本体塞进URL-平芜编程栈

Ontology Playground的分享链接编解码：shareCodec如何把本体塞进URL

【免费下载链接】Ontology-PlaygroundFree, open-source web app for learning about ontologies and Microsoft Fabric IQ. Explore a catalogue of pre-built ontologies, design your own visually, export as RDF/XML, and share interactive diagrams. Zero backend, fully static.项目地址: https://gitcode.com/GitHub_Trending/on/Ontology-Playground

Ontology Playground是一款免费的开源本体学习工具，可视化设计本体（Ontology）后，一键生成包含全部数据的分享链接——整份本体被压缩编解码后直接塞进 URL，收件人打开链接即可还原完整模型，全程零后端、纯静态运行。本文带你拆解它的核心编解码模块shareCodec是如何做到的。

为什么把本体"塞进 URL"？

传统做法是把本体存到服务器，再分享一个数据库 ID 链接。但 Ontology Playground 是完全静态网站，没有任何后端（见 README.md），它选择了一条更激进的路：把整个本体压缩后直接编码进 URL 片段（hash）里。

这样做的好处：

📦链接即数据：URL 本身就是完整备份，不怕项目停运
⚡零成本分享：无需登录、无需数据库，复制链接就能发给任何人
🔒无隐私顾虑：数据不经过任何服务器

shareCodec 的三步压缩流水线

编解码逻辑集中在 src/lib/shareCodec.ts，流程非常简单：

JSON 字符串 → deflate 压缩 → base64url 编码

第一步：序列化为 JSON

本体（实体、属性、关系）加数据绑定（bindings）被打包成一个 JSON 对象，由 encodeSharePayload 负责整个编码过程。

第二步：用浏览器原生 API 压缩

这里没有引入任何第三方压缩库，而是直接调用浏览器 2023 年起全面支持的CompressionStream('deflate')API。对本体这类结构化 JSON，deflate 的压缩率非常高，长字段名和重复结构都能被大幅削减。

第三步：转成 URL 安全的 base64url

压缩后的字节流会被转换成 base64url 字符集（A-Z a-z 0-9 - _），并去掉末尾填充符。之所以选 base64url而不是普通 base64，是因为 URL 中不能出现+、/、=这些字符——它们在 URL 里各有特殊含义。uint8ToBase64url 完成了这次字符替换。

解码端：从 URL 还原本体

解码是编码的镜像过程，由 decodeSharePayload 实现：base64url 还原字节 →DecompressionStream('deflate')解压 → 解析 JSON → 校验结构。

解码前有两道关卡：

路由层白名单：src/lib/router.ts 解析#/share/<data>路由时，只放行 base64 安全字符，且长度不超过 50000，其他一律回首页；
结构校验：解压出的 JSON 必须包含ontology.entityTypes和ontology.relationships两个数组，缺失则抛出Invalid share payload错误。

App.tsx 中的深度链接逻辑会在路由命中share页时自动触发解码，成功后直接加载本体——对方打开链接看到的就是一模一样的图。

32 KB 上限：超长本体的优雅降级

URL 不可能无限长，shareCodec设定了 MAX_SHARE_URL_LENGTH（约 32 KB）上限。编码结果超长时返回undefined，此时 Header.tsx 中的handleShare会自动降级——不再生成链接，而是把本体导出为 RDF/XML 文件下载，并提示"Downloaded RDF"。

此外还有一种更短的分享方式：如果当前打开的是官方目录里的本体，Share 按钮直接生成#/catalogue/<id>这种短链接，根本不经过压缩编解码，链接短小好记。

安全设计：把恶意载荷只当数据

shareCodec 的测试文件中有整整一节安全测试，值得新手学习：

🛡️XSS 载荷：实体名里塞<script>alert("xss")</script>，解码后原样保留为纯字符串，不会被执行；
🛡️原型污染：__proto__、constructor等注入尝试均被JSON.parse的天然行为挡住，Object.prototype不受污染；
🛡️SQL 注入风格字符串：'; DROP TABLE ontologies; --只作为数据存在；
🛡️深层嵌套炸弹：100 层嵌套 JSON 字符串不会导致解析崩溃。

这套防御思路的核心是：数据永远只是数据，解码后绝不把任何字段当作代码或 HTML 执行。

上手体验分享链接

打开应用，进入 Designer 画几个实体和关系；
点击顶部工具栏的Share按钮，观察按钮状态从Encoding…变为Copied!；
查看浏览器地址栏——#/share/后面那串密文就是你的本体；
换台设备打开该链接，本体会被原样还原。

小结

环节	实现位置	要点
压缩编码	shareCodec.ts	原生 CompressionStream，零依赖
路由白名单	router.ts	字符集校验 + 50000 长度上限
解码加载	App.tsx	失败静默回首页
超长降级	Header.tsx	自动改导出 RDF 文件
安全测试	shareCodec.test.ts	XSS / 原型污染 / 注入全覆盖