当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript加密详解：WebCryptoAPI实用指南

JavaScript加密详解：WebCryptoAPI实用指南

2025-11-24 13:25:55 0浏览收藏

**JavaScript加密算法：Web Crypto API详解与应用** 还在为前端数据安全发愁？本文深入解析现代浏览器提供的强大加密接口——Web Crypto API，它允许开发者在客户端安全地实现哈希、对称加密（如AES-GCM）、非对称加密（如RSA）等多种加密操作，无需依赖第三方库，提升性能与安全性。Web Crypto API核心模块包括SHA-256摘要计算、AES加密解密以及RSA密钥生成与签名验证。本文提供详细代码示例，演示如何使用Web Crypto API进行数据加密、解密、签名和验证，并着重强调HTTPS环境的重要性及使用注意事项，助你轻松掌握前端加密技术，提升Web应用安全性。

Web Crypto API 提供浏览器原生加密功能，支持哈希、对称加密、非对称加密等；其核心模块包括 SHA-256 摘要、AES-GCM 加密解密、RSA 密钥生成与签名验证，且需在 HTTPS 环境下使用以确保安全。

JavaScript加密算法_Web Crypto API

Web Crypto API 是现代浏览器提供的一套强大的加密功能接口，允许开发者在客户端实现安全的加密操作。它支持多种常见的加密算法，包括哈希、对称加密、非对称加密、数字签名等，所有操作都在浏览器内部完成，无需依赖第三方库，提升了性能和安全性。

支持的主要功能

Web Crypto API 提供了以下几个核心功能模块：

摘要（Hash）： 对数据生成固定长度的哈希值，常用算法有 SHA-256、SHA-384、SHA-512。
对称加密（AES）： 使用同一密钥进行加密和解密，如 AES-CBC、AES-GCM 模式。
非对称加密（RSA、ECDSA）： 支持生成密钥对，用于加密/解密或签名/验证。
密钥管理： 可以生成、导入、导出、派生和使用加密密钥。
随机数生成： 提供安全的随机数生成器（crypto.getRandomValues()）。

基本使用示例

以下是一些常见操作的代码示例，展示如何使用 Web Crypto API 实现基本加密功能。

1. 计算 SHA-256 哈希

async function hashData(data) {
  const encoder = new TextEncoder();
  const dataBuffer = encoder.encode(data);
  const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer);
  return Array.from(new Uint8Array(hashBuffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

// 使用
hashData('Hello, world!').then(console.log); // 输出: a591a6d40bf420404a011733cfb7b190d62c65bf0bcda32b57b277d9ad9f146e

2. 使用 AES-GCM 进行对称加密与解密

async function encryptAES(key, plaintext) {
  const encoder = new TextEncoder();
  const data = encoder.encode(plaintext);
  const iv = crypto.getRandomValues(new Uint8Array(12)); // GCM 推荐 IV 长度为 12 字节
  const encrypted = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv },
    key,
    data
  );
  return { encrypted, iv };
}

async function decryptAES(key, encryptedData, iv) {
  const decrypted = await crypto.subtle.decrypt(
    { name: 'AES-GCM', iv },
    key,
    encryptedData
  );
  const decoder = new TextDecoder();
  return decoder.decode(decrypted);
}

// 生成密钥并使用
crypto.subtle.generateKey(
  { name: 'AES-GCM', length: 256 },
  true,
  ['encrypt', 'decrypt']
).then(async (key) => {
  const { encrypted, iv } = await encryptAES(key, 'Secret message');
  const decrypted = await decryptAES(key, encrypted, iv);
  console.log(decrypted); // 输出: Secret message
});

3. 生成 RSA 密钥对并签名/验证

async function generateRSAKeyPair() {
  return await crypto.subtle.generateKey(
    {
      name: 'RSASSA-PKCS1-v1_5',
      modulusLength: 2048,
      publicExponent: new Uint8Array([1, 0, 1]),
      hash: 'SHA-256'
    },
    true,
    ['sign', 'verify']
  );
}

async function signData(privateKey, data) {
  const encoder = new TextEncoder();
  const encodedData = encoder.encode(data);
  return await crypto.subtle.sign('RSASSA-PKCS1-v1_5', privateKey, encodedData);
}

async function verifySignature(publicKey, signature, data) {
  const encoder = new TextEncoder();
  const encodedData = encoder.encode(data);
  return await crypto.subtle.verify(
    'RSASSA-PKCS1-v1_5',
    publicKey,
    signature,
    encodedData
  );
}