md5.js：前端不可不知的哈希工具

Hi，我是前端人类学！

在 Web 开发中，数据安全与完整性校验是绕不开的话题。无论是用户密码的简易加密、文件传输后的校验，还是缓存命中时的指纹计算，MD5 算法都在其中扮演着基础而重要的角色。

在浏览器端，md5.js 就是这个角色的最佳扮演者。

一、它是什么？

md5.js 是一个纯 JavaScript 实现的 MD5 消息摘要算法库。由社区开发者维护，代码轻量、API 简洁，能够在浏览器和 Node.js 环境中无缝运行。

它的核心价值在于：让前端开发者能在浏览器端轻松计算 MD5 哈希值，而无需依赖任何后端服务。

MD5 算法的特点是：无论输入多长，输出始终是一个 128 位（16 字节）的固定长度值，通常表示为 32 位的十六进制字符串。

"hello" → 5d41402abc4b2a76b9719d911017c592

二、快速上手

21. 安装方式

浏览器环境（CDN）：

<script src="https://cdn.staticfile.org/blueimp-md5/2.19.0/js/md5.min.js"></script>
<!-- 或 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>

Node.js 环境：

npm install blueimp-md5

ES Module 方式：

import md5 from 'blueimp-md5';

2.2 基本用法

计算一个字符串的 MD5 值：

const hash = md5('hello world');
console.log(hash); // 5eb63bbbe01eeed093cb22bb8f5acdc3

计算中文字符串：

const hash = md5('你好世界');
console.log(hash); // 9c9f6f4d9f7c5a6f1b2e3d4a5b6c7d8e (示例)

2.3 批量计算

const data = ['user@email.com', 'password123', '2026-07-17'];
const hashes = data.map(item => md5(item));
// ['53b5f9e0...', 'e10adc39...', '...']

三、几个核心特性

3.1 支持多种输入格式

md5.js 不仅支持字符串，还支持 ArrayBuffer、Uint8Array 等二进制数据：

// 字符串
md5('hello');

// ArrayBuffer
const buffer = new TextEncoder().encode('hello');
md5(buffer);

// Uint8Array
const bytes = new Uint8Array([104, 101, 108, 108, 111]);
md5(bytes);

3.2 链式调用（部分版本）

某些 fork 版本支持链式调用：

const hash = md5().update('hello').update('world').digest('hex');

3.3 输出格式灵活

默认输出 32 位十六进制字符串，部分版本支持输出原始二进制：

md5('hello', null, true); // 输出原始二进制

四、典型应用场景

4.1 密码传输前的简单加密

⚠️ 安全提醒：MD5 本身不应用于生产环境的密码加密。这里仅作前端传输前的简单处理，后端仍需使用 bcrypt、Argon2 等安全哈希算法。

// 用户注册时，前端简单哈希后传输
function hashPassword(password) {
    // 加盐增强安全性
    const salt = 'your-salt-string';
    return md5(password + salt);
}

const password = '123456';
const hashed = hashPassword(password);
// 发送 hashed 到后端

4.2 文件完整性校验

前端上传大文件前，计算 MD5 用于校验：

async function getFileMD5(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            const buffer = e.target.result;
            const hash = md5(buffer);
            resolve(hash);
        };
        reader.onerror = reject;
        reader.readAsArrayBuffer(file);
    });
}

// 使用
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async (e) => {
    const file = e.target.files[0];
    const hash = await getFileMD5(file);
    console.log('文件 MD5:', hash);
});

4.3 缓存指纹

为静态资源生成版本号：

const content = `
    .btn { color: red; }
    .header { background: blue; }
`;
const version = md5(content).slice(0, 8);
const cssUrl = `/style.${version}.css`;
// 输出: /style.a3b5c7d9.css

4.4 数据去重

对数组对象去重：

function uniqueByMD5(arr) {
    const seen = new Set();
    return arr.filter(item => {
        const key = md5(JSON.stringify(item));
        if (seen.has(key)) return false;
        seen.add(key);
        return true;
    });
}

const data = [
    { id: 1, name: '张三' },
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
];
const unique = uniqueByMD5(data);
// 只保留 { id: 1, name: '张三' } 和 { id: 2, name: '李四' }

4.5 接口签名（简单场景）

简单的 API 请求签名：

function signRequest(params, secretKey) {
    const sortedKeys = Object.keys(params).sort();
    let signStr = '';
    sortedKeys.forEach(key => {
        signStr += `${key}=${params[key]}&`;
    });
    signStr += `secret=${secretKey}`;
    return md5(signStr);
}

const params = { userId: 123, timestamp: Date.now() };
const signature = signRequest(params, 'my-secret-key');
// 将 signature 添加到请求头中

五、注意事项

5.1 MD5 已不用于安全加密

MD5 算法已被证明存在碰撞漏洞，不应用于密码存储、数字签名等安全敏感场景。它更适合于非安全场景的数据校验和指纹生成。

5.2 大文件性能

计算大文件（>100MB）的 MD5 时，建议使用 blob.slice() 分块处理，避免内存溢出。

5.3 UTF-8 编码一致

前端计算 MD5 时需注意编码方式，确保与后端保持一致（建议统一使用 UTF-8）。

六、与其他库的对比

md5.js 是一个小而美的工具库，它解决了一个明确的痛点：在浏览器端快速、可靠地计算 MD5 哈希值。

虽然 MD5 算法本身已有三十余年历史，在安全领域也逐渐被更先进的算法替代，但在数据校验、缓存指纹、前端去重等场景中，它依然凭借简洁、高效、跨平台的特性，保持着旺盛的生命力。

正如一位开发者所说：“MD5 可能不再是最安全的，但它依然是最方便的。”

如果你需要一个轻量、无依赖、API 清爽的浏览器端哈希工具，md5.js 仍然是一个值得信赖的选择。