JavaScript数据加密解密与哈希技巧

想知道如何在 JavaScript 中安全地处理数据吗？本文将深入探讨 **JavaScript 数据加密解密与哈希实现方法**，助你构建更安全的 Web 应用。在现代浏览器中，推荐使用强大的 **Web Crypto API** 进行对称加密（如 AES-GCM）和哈希运算（如 SHA-256）。通过 `crypto.subtle.generateKey` 生成密钥，配合 `encrypt` 和 `decrypt` 实现数据加解密，利用 `digest` 计算数据指纹。对于需要兼容旧版浏览器的场景，**CryptoJS 库** 也是一个不错的选择，它提供了 AES 加解密以及 MD5/SHA256 等哈希算法。需要注意的是，密钥管理至关重要，切勿硬编码密钥，并要充分理解前端加密的局限性，HTTPS 才是保障数据传输安全的关键。立即学习，提升你的 JavaScript 安全技能！

JavaScript中实现加密、解密和哈希运算，推荐使用Web Crypto API。1. 使用AES-GCM进行对称加密：通过crypto.subtle.generateKey生成密钥，encrypt加密数据并生成初始化向量iv，decrypt配合iv还原数据。2. SHA-256哈希：调用crypto.subtle.digest计算数据指纹，结果转为十六进制字符串。3. 兼容旧环境可选CryptoJS库：通过CryptoJS.AES.encrypt/decrypt实现加解密，CryptoJS.MD5/SHA256生成哈希。注意事项包括避免硬编码密钥、妥善处理ArrayBuffer编码、前端加密不替代HTTPS传输安全。现代项目应优先采用Web Crypto API。

JavaScript 中实现数据的加密、解密和哈希运算，通常依赖 Web Crypto API（现代浏览器原生支持）或第三方库如 crypto-js。以下是具体实现方式。

使用 Web Crypto API（推荐，安全且无需引入库）

Web Crypto API 是浏览器内置的安全接口，支持 AES 加密、RSA 非对称加密、SHA 哈希等操作。

1. 数据加密与解密（AES-GCM 示例）

对称加密，适合加密本地数据或传输内容。

// 生成密钥
async function generateKey() {
  return await crypto.subtle.generateKey(
    { name: "AES-GCM", length: 256 },
    true,
    ["encrypt", "decrypt"]
  );
}

// 加密
async function encryptData(data, key) {
  const encoder = new TextEncoder();
  const encodedData = encoder.encode(data);
  const iv = crypto.getRandomValues(new Uint8Array(12)); // 初始化向量

  const encrypted = await crypto.subtle.encrypt(
    { name: "AES-GCM", iv },
    key,
    encodedData
  );

  return { encrypted, iv };
}

// 解密
async function decryptData(encryptedData, key, iv) {
  const decrypted = await crypto.subtle.decrypt(
    { name: "AES-GCM", iv },
    key,
    encryptedData
  );

  const decoder = new TextDecoder();
  return decoder.decode(decrypted);
}

// 使用示例
(async () => {
  const key = await generateKey();
  const { encrypted, iv } = await encryptData("Hello, 世界！", key);
  const result = await decryptData(encrypted, key, iv);
  console.log(result); // 输出: Hello, 世界！
})();

2. 哈希运算（SHA-256 示例）

用于生成数据指纹，不可逆。

async function hashData(data) {
  const encoder = new TextEncoder();
  const encodedData = encoder.encode(data);
  const hashBuffer = await crypto.subtle.digest("SHA-256", encodedData);

  // 转为十六进制字符串
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
  return hashHex;
}

// 使用示例
hashData("hello").then(console.log); // 输出类似: 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824

使用 CryptoJS 库（兼容旧环境）

如果需要支持不完整 Web Crypto 的环境，可使用 crypto-js。

先通过 CDN 或 npm 引入：

```html ```

1. AES 加解密

```javascript const message = "Hello, 世界！"; const secretKey = "my-secret-key";

// 加密 const encrypted = CryptoJS.AES.encrypt(message, secretKey).toString();

// 解密 const bytes = CryptoJS.AES.decrypt(encrypted, secretKey); const decrypted = bytes.toString(CryptoJS.enc.Utf8);

console.log(decrypted); // 输出: Hello, 世界！

2. MD5 和 SHA 哈希
```javascript
console.log(CryptoJS.MD5("hello"));     // MD5
console.log(CryptoJS.SHA256("hello"));  // SHA-256

注意事项

实际开发中需注意以下几点：

• 密钥不能硬编码在代码中，应通过安全方式获取（如用户输入、后端协商）
• Web Crypto API 返回的是 ArrayBuffer，处理时注意编码转换
• 哈希不可逆，适用于密码存储（配合盐值 salt）
• 前端加密不能替代 HTTPS，仅作为辅助安全措施

基本上就这些。现代项目优先使用 Web Crypto API，简单场景可用 CryptoJS 快速实现。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~