当前位置:首页 > JavaScript

js 实现md5加密

2026-03-01 03:38:26JavaScript

MD5加密的JavaScript实现方法

使用现代JavaScript实现MD5加密可以通过原生API或第三方库完成。以下是几种常见方法:

使用Web Crypto API(原生支持)

现代浏览器支持的原生加密API,性能最佳且无需依赖第三方库:

js 实现md5加密

async function md5(message) {
  const msgBuffer = new TextEncoder().encode(message);
  const hashBuffer = await crypto.subtle.digest('MD5', msgBuffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

// 使用示例
md5('hello').then(hexDigest => console.log(hexDigest));

使用SparkMD5库

轻量级专门处理MD5的库,适合浏览器环境:

js 实现md5加密

// 先引入SparkMD5库:<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>

const hash = SparkMD5.hash('hello world');
console.log(hash); // 输出32字符MD5值

使用crypto-js库

功能更全面的加密库,支持多种哈希算法:

// 安装:npm install crypto-js
import MD5 from 'crypto-js/md5';

const hash = MD5('message').toString();
console.log(hash);

纯JavaScript实现

不依赖任何库的完整实现(代码较长,适合理解原理):

function md5(string) {
  // 初始化变量和常量
  let [a, b, c, d] = [0x67452301, 0xEFCDAB89, 0x98BADCFE, 0x10325476];
  const k = new Array(64).fill(0).map((_, i) => Math.floor(Math.abs(Math.sin(i + 1)) * 4294967296));

  // 字符串预处理
  const msg = encodeUTF8(string);
  const len = msg.length * 8;
  msg.push(0x80);
  while ((msg.length * 8) % 512 !== 448) msg.push(0x00);
  msg.push(...int64ToBytes(len));

  // 分块处理
  for (let i = 0; i < msg.length; i += 64) {
    const chunk = msg.slice(i, i + 64);
    [a, b, c, d] = processChunk(chunk, a, b, c, d, k);
  }

  // 输出结果
  return toHex(a) + toHex(b) + toHex(c) + toHex(d);
}

// 辅助函数需自行实现:encodeUTF8, int64ToBytes, processChunk, toHex等

注意事项

  • MD5已被证明存在碰撞漏洞,不适合安全敏感场景
  • 浏览器原生API仅支持HTTPS环境或localhost
  • Node.js环境可直接使用crypto模块:
    const crypto = require('crypto');
    const hash = crypto.createHash('md5').update('hello').digest('hex');

标签: js
分享给朋友:

相关文章

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 或直接使用 window.location 实现页面跳转,适用于普通跳转或带参数的 URL。 // 方…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…