webcrypto api 提供加密、解密、签名等功能，支持 aes-gcm 对称加密和 rsa-oaep 非对称加密，通过 generatekey 创建密钥，encrypt/decrypt 实现数据加解密，exportkey/importkey 管理密钥，需配合 https 与后端保障安全。
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 实现非对称加密
非对称加密适合加密小量数据或传输对称密钥。公钥加密，私钥解密。
主要更新介绍： 完美整合Discuz!论坛，实现一站式登陆、退出、注册； 同步所有会员资料； 新增购物车功能，商品购买更加方便、快捷； 新增部分快捷菜单，网站访问更加方便； 限制首页商品、店铺标题显示长度； 修正会员后台管理不能更改密码的错误； 完善商品显示页面所有功能链接； 修正后台标签管理部分错误； 修正前台学校列表不按后台顺序显示的错误； 修正搜索功能中学校名称过长导致显示紊乱的现象； 修正
说明： 创建一对公私钥，公钥可用于加密，私钥用于解密。
<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 格式导出密钥。
立即学习“Java免费学习笔记（深入）”；
<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 提供了安全且标准化的方式处理前端加密任务。注意：不要在客户端依赖 JavaScript 加密来实现完整安全，它只是整体安全策略的一部分，比如防止明文传输。密钥管理、HTTPS 和后端验证同样重要。
