JavaScriptWebCryptoAPI加密教程详解

还在为前端数据安全发愁？本文为你提供一份详尽的 JavaScript Web Crypto API 加密解密教程，助你轻松实现浏览器端的安全数据保护！Web Cryptography API 是一套强大的浏览器原生加密工具，无需依赖第三方库，即可进行密钥生成、数据加密、数据解密等操作。本文将深入讲解如何使用 `crypto.subtle.generateKey()` 生成 AES-GCM 对称密钥，并详细演示如何利用 `crypto.subtle.encrypt()` 和 `crypto.subtle.decrypt()` 实现数据的加密与解密。此外，还将介绍密钥的导出与存储，以及在使用过程中需要注意的安全风险。掌握这些技巧，你就能在前端构建起可靠的数据安全防线，保护用户敏感信息，提升网站安全性。

Web Cryptography API 提供浏览器原生加密功能，支持生成密钥、加密解密等操作；2. 使用 crypto.subtle.generateKey() 生成 AES-GCM 对称密钥，需设置 extractable 和使用权限；3. 加密通过 crypto.subtle.encrypt() 执行，明文转 ArrayBuffer 并使用唯一 IV；4. 解密调用 crypto.subtle.decrypt()，验证 IV 和密文完整性；5. 密钥可导出为 JWK 格式存储，但仅当 extractable 为 true 时可用，需注意安全风险；6. 正确使用算法参数与密钥管理可实现前端端到端数据保护。

JavaScript 的 Web Cryptography API 提供了一套强大的加密功能，可以在浏览器端安全地执行加密、解密、签名和哈希等操作。它不依赖外部库，原生支持现代浏览器，适合处理敏感数据的加解密。

生成加密密钥

使用 crypto.subtle.generateKey() 可以生成对称或非对称密钥。例如，使用 AES-GCM 算法生成一个对称密钥用于加密解密：

const generateKey = async () => {
  return await crypto.subtle.generateKey(
    {
      name: "AES-GCM",
      length: 256
    },
    true, // 是否可提取
    ["encrypt", "decrypt"]
  );
};

生成的密钥可用于后续的加密和解密流程。注意：密钥默认不可提取，增强安全性。

数据加密

使用 crypto.subtle.encrypt() 对数据进行加密。需要提供算法配置、密钥和明文数据（需转换为 ArrayBuffer）。

const encryptData = async (plaintext, key) => {
  const encoder = new TextEncoder();
  const data = encoder.encode(plaintext);

  const iv = crypto.getRandomValues(new Uint8Array(12)); // 初始化向量

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

  return { ciphertext, iv };
};

AES-GCM 是推荐的加密模式，提供认证加密，防止数据篡改。每次加密应使用唯一的 IV（初始化向量）。

数据解密

使用 crypto.subtle.decrypt() 进行解密，传入相同的算法参数、密钥和加密时保存的 IV。

const decryptData = async (ciphertext, key, iv) => {
  const decryptedBuffer = await crypto.subtle.decrypt(
    {
      name: "AES-GCM",
      iv: iv
    },
    key,
    ciphertext
  );

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

如果密文被篡改或 IV 不匹配，解密会失败并抛出异常，确保数据完整性。

密钥导出与存储（可选）

若需将密钥保存或传输，可使用 crypto.subtle.exportKey() 导出为 JSON Web Key (JWK) 格式：

const exportKey = async (key) => {
  return await crypto.subtle.exportKey("jwk", key);
};

导出的密钥可以序列化为 JSON 存储，但仅在设置 extractable: true 时可用。注意：暴露密钥有安全风险，应谨慎处理。

基本上就这些。Web Cryptography API 提供了安全可靠的加解密能力，关键在于正确使用算法参数、管理密钥和 IV。只要遵循标准流程，就能在前端实现端到端的数据保护。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScriptWebCryptoAPI加密教程详解》文章吧，也可关注golang学习网公众号了解相关技术文章。