做开发这些年MD5 大概是碰得最频繁的“加密”工具之一。测接口签名、校验文件完整性、给测试数据造个定长指纹随手就是一个 md5()。但真正要把这东西做成一个能上线的工具尤其是用 Vue 3 和 TypeScript 从零写一个带“加密/解密”能力的在线页面里面牵扯到的概念梳理、算法边界、工程实现坑点远比想象中多。这篇文章就把完整思路、核心代码和实测中踩过的坑都摆出来给正准备做类似小工具或者想搞清楚 MD5 到底是什么的朋友做个参考。这项目要解决的痛点其实很直白本地要算个 MD5要么开终端敲命令要么去某些广告满天飞的在线站粘一段文本还得担心它会不会被偷偷记录。自己做一个小工具数据不出浏览器既能算 MD5、又能反向查常见明文顺便支持定时“解密”和文件校验日常开发调试完全够用。适合前端入门想练 Vue 3 组合式 API 的同学也适合后端同学想搞个趁手的小页面。1. 项目概述MD5 工具到底解决了什么问题1.1 先纠正一个概念MD5 不是加密是散列项目标题里写的是“MD5 加密/解密”但严格来说MD5 是消息摘要算法属于散列函数不是加密算法。这两者的本质区别在于加密是可逆的密文可以还原成明文散列是不可逆的无论输入多长输出固定 32 位十六进制字符而且理论上无法从这 32 位字符反推出原始输入。这个区别决定了整个工具的设计基调。如果你真的实现一个函数想对 MD5 后的结果做“解密”那是不可能的。所谓“在线 MD5 解密”本质上是碰撞查询先准备一个大字典把常见明文弱密码、默认值、测试串预先算好 MD5再把用户输入拿去比对。匹配上了就“解密”成功匹配不上就返回空。所以这款工具真正的核心是两部分正向的 MD5 计算和反向的字典碰撞查询。搞清楚这一点后面所有设计都不会跑偏。1.2 为什么还需要“解密”功能很多人会问MD5 既然不可逆那做“解密”功能有什么意义实际开发中的价值非常大。比如你在排查历史遗留系统数据库里存的密码是 MD5但是明文规则丢了看不到原始值。你拿一串 MD5 丢到工具里如果能查到明文等于在没有业务代码介入的情况下找到了线索。再比如测试环境里有些加密配置项对方给的是 MD5 值你想验证一下当前输入的配置是否匹配直接反向查一下比对着算方便得多。当然需要清醒地知道这种查询只能命中预先收录的字典。弱密码如 “123456”、“admin888” 基本一查一个准你随便编的一段十几位数的随机字符串查不到就是查不到。1.3 技术选型为什么是 Vue 3 TypeScript选 Vue 3 是因为组合式 APIComposition API非常适合这种“单一功能、多交互入口”的页面。加密、解密、批量处理、文件校验本质上都是围绕同一个核心算法展开的用 setup 函数 自定义 composable 可以把逻辑拆得非常干净比 Options API 写起来顺手太多。TypeScript 则是给这个项目兜底的关键。MD5 的核心处理涉及字节数组、十六进制转换、补位长度计算这些地方最容易出现类型陷阱比如把 number 当成 string 拼接或者 buffer 下标越界。有类型检查在编译期拦住一批低级错误省下来的调试时间远超写类型标注花的功夫。构建工具用 Vite开发环境秒级热更新打出来包也小部署到静态服务器或者内网 NAS 上都很方便。2. MD5 算法拆解与在线“解密”的真实机制2.1 MD5 的计算流程用大白话讲清楚MD5 的算法流程不算复杂核心是四个步骤填充让原始数据字节数对 512 取模等于 448不足则补位先补一个 0x80再补一堆 0x00。追加长度在填充后的数据末尾追加 64 位的原始长度信息。分组处理把数据按照 512 位64 字节分块每块拆成 16 个 32 位字。四轮运算初始向量是 A、B、C、D 四个 32 位常数每一轮用非线性函数F、G、H、I对当前块做 16 次运算不断更新 A、B、C、D最后拼接输出。文字描述比较干瘪实际写代码时你不需要从零去手写这些运算直接使用现成的库即可。但如果想把它作为学习素材亲手写一遍对理解散列函数非常有帮助。我在项目里就用了一个轻量的第三方实现不过封装层是自己写的方便控制输入输出格式。但这里要提醒一个常见误区很多小白以为 MD5 输出是一串字符串其实算法中间全是二进制运算。你在页面上看到的 “e10adc3949ba59abbe56e057f20f883e”是最终哈希值按字节转十六进制后的展示形态。输入同一个字符串编码方式不一样结果完全不同。UTF-8 的 “abc” 和 GBK 的 “abc” 算出来的 MD5 是不一致的这是第一个高频坑。2.2 所谓“解密”的三种真实路径在线 MD5 “解密”主要有三条实现路径第一条是彩虹表也叫预计算哈希链。把大量明文通过算法生成对应哈希链存储时只保留端点查询时通过链式推导还原。彩虹表的特点是存储空间比完整字典小很多适合超大规模的碰撞查询。第二条是普通字典查询。直接把常见明文和对应 MD5 存在数据库里查询 O(1)实现最简单。我这个小工具用的是这个方案内置了一个几十万条的高频密码字典覆盖常见的弱口令、数字串、单词变体和部分默认测试值。第三条是暴力枚举。针对短字符串4 到 8 位纯数字做全排列匹配只要算力够基本都能跑出来。这个工具里也加了枚举模式不过限制了位数防止浏览器卡死。用户端的“解密”逻辑很简单输入一个 32 位 MD5先在本地字典里查查不到就发到后端接口查更大规模的库再不行就启动枚举线程尝试。整个过程对用户是透明的你只需要看结果。2.3 安全性讨论什么时候能用什么时候绝对不能用MD5 的安全性在现代密码学语境下已经基本宣判死刑。2017 年之后阻止 MD5 碰撞攻击已经不算难事安全合规项目里如果再拿 MD5 做密码存储评审那一关基本过不去。所以这篇工具的使用场景一定要限定在数据完整性校验比如下载文件后比对 MD5确认传输过程没篡改。接口签名中的参与值计算很多老系统的签名规范里会用到 MD5。测试数据的指纹生成方便定位和对比。非敏感数据的指纹标记比如查重。绝不能在以下场景使用用户密码存储需要改用 bcrypt、scrypt、Argon2 这类专门设计的密码哈希算法。高安全等级的数据加密需要改用 AES、RSA 等对称或非对称加密。任何需要防抵赖的电子签名场景。这个工具本身是无害的它只是如实执行了算法逻辑。“哪些用途合法、哪些用途业内有共识不能碰”这需要使用者自己判断。3. 功能设计与实现思路3.1 功能清单与优先级划分项目从立项到可用我规划了以下功能模块按优先级排序MD5 计算核心输入文本输出 32 位小写哈希支持切换大写。文件 MD5 校验拖拽或选择文件计算文件流哈希用于传输校验。在线反查解密内置高频字典点击后返回匹配明文。批量模式每行一条文本分别计算哈希并输出表格支持复制。环境辅助一键复制结果、清空输入、暗色模式。每个功能都不花哨但组合起来就是一个完整的开发辅助工具。设计上遵循一个原则所有计算优先在浏览器本地完成只有反查字典这种本地搞不定的才走后端接口。这样部署成本极低隐私也有保障。3.2 核心计算层为什么我选择自己封装而不是直接调页面市面上有不少现成的 JS 库浏览器端也很流行引入 SparkMD5 或者 js-md5。这个项目我一开始直接引了 js-md5但用着用着发现问题文件校验时需要将 ArrayBuffer 转换成二进制字符串再交给库处理文件一大会卡顿。另外我需要同时控制 UTF-8 中文字符串的编码方式直接调库有时无法保证浏览器行为和 Node 端完全一致。所以后来我做了一层薄的封装核心 md5() 函数仍然是第三方库的实现但外层统一做编码归一化、Hex 输出大小写控制、ArrayBuffer 输入适配。这样页面调用时只需要传字符串或 buffer不需要关心内部细节。这也算一个工程结论引入依赖没毛病但要在依赖之上加一层服务于本项目的胶水代码。3.3 交互细节与易用性设计工具类页面最忌讳功能全堆在页面上用户一进来不知道干什么。设计上按场景划分功能区默认显示的是“文本计算”用户输入内容实时显示 MD5 值旁边一个 Tab 放“文件校验”拖拽文件进去自动计算反查功能做成一个单独的按钮在拿到 MD5 后点击才执行。这样入口清晰屏蔽了不少无谓的复杂度。实时计算这里有个性能细节监听输入事件后每敲一个字符都重算一遍小的文本没问题如果粘贴一篇长文就会明显卡顿。所以引入了防抖处理300ms 延迟并且加了requestIdleCallback兜底保证在输入框失去焦点时计算结果最终会刷新。复制结果按钮虽然简单但里面用了navigator.clipboard.writeText需要页面在 HTTPS 或者 localhost 下才能正常工作。本地调试没感觉部署到纯 HTTP 内网环境时按钮会失效这是我实测踩过的一个坑后面排查章节细说。4. 编码实现与实操记录4.1 项目初始化与环境准备环境要求很简单Node.js 18 即可包管理器用的 pnpm。初始化命令pnpm create vite md5-tool --template vue-ts cd md5-tool pnpm install装完依赖后把目录结构调整成这样src/ core/ # 算法封装层 md5.ts lookup.ts # 字典查询 composables/ useMd5.ts # 计算逻辑 useFileHash.ts # 文件校验 views/ Home.vue核心思路是把纯函数算法、查询和状态逻辑composable分离。md5.ts不依赖 VueuseMd5.ts负责响应式状态和业务编排。这样单元测试也好写后续换 UI 框架也不心疼。4.2 核心代码实现md5.ts里最关键的是封装一个统一的输入解析函数import md5Lib from js-md5; export type Md5Input string | ArrayBuffer | Uint8Array; export function computeMd5(input: Md5Input, uppercase false): string { let result ; if (typeof input string) { // 统一按 UTF-8 处理 result md5Lib(input, { asBytes: false }) as string; } else { // ArrayBuffer / Uint8Array 走 Buffer 路径 result md5Lib(new Uint8Array(input as ArrayBuffer)) as string; } return uppercase ? result.toUpperCase() : result.toLowerCase(); }字典查询核心逻辑用的是二分查找优化因为插入字典时是排序好的export interface LookupEntry { hash: string; plain: string; } export function lookupHash(target: string, dict: LookupEntry[]): string | null { const lower target.toLowerCase(); let left 0; let right dict.length - 1; while (left right) { const mid Math.floor((left right) / 2); if (dict[mid].hash lower) { return dict[mid].plain; } else if (dict[mid].hash lower) { left mid 1; } else { right mid - 1; } } return null; }不过实际项目中我并没有把整个字典一次性加载到内存而是做成了按需请求状态中维护一个dictStatus如果用户第一次点击反查再从/dict/dict.json.gz加载解压后缓存到全局。这样首屏体积能控制住字典还能持续更新。4.3 踩坑记录中文编码、文件处理与性能优化第一个坑是中文编码。js-md5对纯 ASCII 字符串没问题对中文字符串内部默认按 UTF-8 处理。但坑在于浏览器端有的环境默认按 UTF-8有的跑了 polyfill 之后行为会变。解决方式是拿到文本后显式执行一次const encoder new TextEncoder(); const data encoder.encode(input); const result md5Lib(data);这样处理之后无论什么环境结果都是同样的 UTF-8 语义跨端不会对不上。第二个坑是文件校验的内存问题。早期版本把整个文件读成字符串再交给库500MB 的文件直接浏览器崩溃。后来改成分块读取async function hashFile(file: File, chunkSize 2 * 1024 * 1024) { const buffer await file.arrayBuffer(); const totalChunks Math.ceil(buffer.byteLength / chunkSize); // 一些实现需要多次 update 才能得到最终哈希 const md5 md5Lib.create(); for (let i 0; i totalChunks; i) { const chunk buffer.slice(i * chunkSize, (i 1) * chunkSize); md5.update(new Uint8Array(chunk)); } return md5.hex(); }这里注意一个大文件易踩的坑file.arrayBuffer()会一次性把整个文件读入内存还是可能爆内存。真要做大文件支持应该用file.stream()读取实际上我用的是ReadableStream配合逐步读取。为了篇幅这里只保留了分块逻辑但结论是文件校验功能是有技术门槛的不是简单拼接一下就能上。第三个坑是渲染大数据量的卡顿。批量模式下如果一次算 1000 行文本DOM 渲染 1000 行表格会明显掉帧。方案是把表格虚拟滚动化用的是vitest写轻量组件把渲染窗口控制在 20 行以内。测试下来几千行数据滚动依然流畅。5. 构建部署与常见问题排查5.1 构建配置与部署细节Vite 的构建配置基本不用动唯一要注意的是base字段。如果部署在域名根目录默认/没问题如果是部署到子路径内网服务常见就必须设置export default defineConfig({ base: /md5-tool/, // 对应部署路径 build: { target: es2020, chunkSizeWarningLimit: 1500, }, });不设置base的话打包出的 JS 和 CSS 路径全是/assets/xxx.js部署到子目录后页面一片空白控制台全是 404这是部署类项目最常见的坑。另外因为用到了 Web Worker 跑字典查询worker 文件打包有自己的细节。Vite 推荐的写法是通过new Worker(new URL(./worker.ts, import.meta.url), { type: module })来引入这样打包器能正确识别并拆分 worker chunk。如果直接把 worker 代码当普通字符串塞进去闭包变量会被压缩到面目全非部署之后功能直接失效。5.2 在线 MD5 工具的常见问题速查表问题现象原因解决方案输入中文结果跟命令行不一致编码方式不同需要统一为 UTF-8显式用 TextEncoder 编码后再计算复制按钮不生效navigator.clipboard 需要 HTTPS/localhost后端加 HTTPS或降级提供 textarea 选中方案文件大了卡死一次性读入 ArrayBuffer 内存溢出改用流式读取 分块 update反查“解密”查不到字典未命中或输入值不是标准 32 位哈希准备更大的字典或用暴力枚举模式部署到子目录后白屏base 路径配置错误在 vite.config 设置正确的 baseWorker 文件找不到worker 引入方式错误使用 new URL 方式让打包器拆分5.3 后续扩展方向工具的基础版本已经可以投入使用后续值得做的扩展还有几个方向支持更多哈希算法SHA-1、SHA-256、SHA-512 是自然的增量算法细节类似代码抽象好后加算法策略枚举就能实现。自定义盐值模式把 MD5、SHA-256 跟固定的盐拼接后重新计算这对某些老系统的密码迁移很有用。导出碰撞字典把反查功能做成本地数据库导出方便离线环境使用。自动检测输入类型传入明文就当作加密算哈希传入 32 位十六进制串就优先尝试反查减少用户理解成本。这些扩展并不复杂但每一步都能把工具从“小而美”推向“团队内网亲测好用的工程利器”。写在最后这个项目做完我自己最大的体会是——工具虽小但概念一定要拎清。MD5 在开发链路里太常见了常见到很多人已经忘记它到底是个加密算法还是个散列算法。它做不了真正的解密但通过字典查询可以在合理的范围内提供辅助能力。它不具备高安全性但在文件校验、请求签名这类场景里依然老当益壮。如果你准备自己写一个同类工具建议优先梳理清楚使用边界再把交互打磨顺手。功能未必多但用起来要让人感觉“明显比打开终端敲命令和访问那些满屏广告的站靠谱”。这样的工具自己用着舒心分享给同事也有价值。另外提一个小建议工具的字典数据记得做版本管理和合规审查毕竟内置弱口令库这种能力用得好是效率工具被人拿去搞歪门邪道就是另一回事了。控制好能力和边界是做工具的人该有的自觉。