J*aScript密码学_WebCryptoAPI加密解密实战_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript密码学_WebCryptoAPI加密解密实战

2025-11-30

浏览次数：次

返回列表

WebCrypto API 提供加密、解密、签名等功能，支持 AES-GCM 对称加密和 RSA-OAEP 非对称加密，通过 generateKey 创建密钥，encrypt/decrypt 实现数据加解密，exportKey/importKey 管理密钥，需配合 HTTPS 与后端保障安全。

javascript密码学_webcryptoapi加密解密实战

WebCrypto API 是现代浏览器提供的强大工具，用于执行常见的密码学操作，比如加密、解密、签名、哈希和密钥生成。它支持 AES、RSA、ECDSA 等多种算法，并且运行在安全的上下文中（如 HTTPS），能有效防止敏感数据暴露。下面通过实际示例展示如何使用 WebCrypto API 实现对称加密与非对称加密的基本流程。

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

对称加密适用于加密大量数据，加密和解密使用相同的密钥。AES-GCM 模式提供机密性和完整性验证，是推荐使用的模式之一。

生成 AES 密钥并加密字符串：

说明： 使用 crypto.subtle.generateKey() 生成一个 256 位的 AES-GCM 密钥。

代码示例：

<font face="Courier New" size="2">
async function encryptData(plainText) {
  // 生成密钥
  const key = await crypto.subtle.generateKey(
    { name: "AES-GCM", length: 256 },
    true,
    ["encrypt", "decrypt"]
  );

  // 编码文本为 ArrayBuffer
  const encoder = new TextEncoder();
  const data = encoder.encode(plainText);

  // 生成随机 IV（初始化向量）
  const iv = crypto.getRandomValues(new Uint8Array(12));

  // 执行加密
  const encrypted = await crypto.subtle.encrypt(
    { name: "AES-GCM", iv: iv },
    key,
    data
  );

  // 返回密文、IV 和密钥（实际中密钥不应直接返回）
  return {
    encrypted: Array.from(new Uint8Array(encrypted)),
    iv: Array.from(iv),
    key: key // 注意：生产环境应妥善管理密钥
  };
}
</font>

解密数据：

说明： 使用之前保存的密钥、IV 和密文进行解密。

<font face="Courier New" size="2">
async function decryptData(encryptedData, iv, key) {
  const encryptedBuffer = new Uint8Array(encryptedData).buffer;
  const ivBuffer = new Uint8Array(iv).buffer;

  const decrypted = await crypto.subtle.decrypt(
    { name: "AES-GCM", iv: ivBuffer },
    key,
    encryptedBuffer
  );

  const decoder = new TextDecoder();
  return decoder.decode(decrypted);
}
</font>

使用 RSA-OAEP 实现非对称加密

非对称加密适合加密小量数据或传输对称密钥。公钥加密，私钥解密。

LOVESTUdio多校园网络店铺

主要更新介绍：完美整合Discuz!论坛，实现一站式登陆、退出、注册；同步所有会员资料；新增购物车功能，商品购买更加方便、快捷；新增部分快捷菜单，网站访问更加方便；限制首页商品、店铺标题显示长度；修正会员后台管理不能更改密码的错误；完善商品显示页面所有功能链接；修正后台标签管理部分错误；修正前台学校列表不按后台顺序显示的错误；修正搜索功能中学校名称过长导致显示紊乱的现象；修正

0 查看详情 LOVESTUdio多校园网络店铺

生成 RSA 密钥对：

说明： 创建一对公私钥，公钥可用于加密，私钥用于解密。

<font face="Courier New" size="2">
async function generateRSAKeyPair() {
  return await crypto.subtle.generateKey(
    {
      name: "RSA-OAEP",
      modulusLength: 2048,
      publicExponent: new Uint8Array([1, 0, 1]),
      hash: "SHA-256"
    },
    true,
    ["encrypt", "decrypt"]
  );
}
</font>

使用公钥加密，私钥解密：

<font face="Courier New" size="2">
async function rsaEncrypt(plainText, publicKey) {
  const encoder = new TextEncoder();
  const data = encoder.encode(plainText);

  const encrypted = await crypto.subtle.encrypt(
    { name: "RSA-OAEP" },
    publicKey,
    data
  );

  return Array.from(new Uint8Array(encrypted));
}

async function rsaDecrypt(encryptedData, privateKey) {
  const encryptedBuffer = new Uint8Array(encryptedData).buffer;

  const decrypted = await crypto.subtle.decrypt(
    { name: "RSA-OAEP" },
    privateKey,
    encryptedBuffer
  );

  const decoder = new TextDecoder();
  return decoder.decode(decrypted);
}
</font>

密钥导出与导入（可选）

有时需要将密钥保存或传输。WebCrypto 支持以 jwk 格式导出密钥。

<font face="Courier New" size="2">
async function exportKey(key) {
  const jwk = await crypto.subtle.exportKey("jwk", key);
  return jwk; // 可序列化为 JSON
}

async function importKey(jwk) {
  return await crypto.subtle.importKey(
    "jwk",
    jwk,
    { name: "AES-GCM", length: 256 },
    true,
    ["encrypt", "decrypt"]
  );
}
</font>

基本上就这些。WebCrypto API 提供了安全且标准化的方式处理前端加密任务。注意：不要在客户端依赖 J*aScript 加密来实现完整安全，它只是整体安全策略的一部分，比如防止明文传输。密钥管理、HTTPS 和后端验证同样重要。

以上就是J*aScript密码学_WebCryptoAPI加密解密实战的详细内容，更多请关注其它相关文章！