如何在Meteor React应用的客户端实现数据的加密与解密？

核心选型 #

直接使用浏览器原生的Web Crypto API实现，不用引入年久失修的第三方加密库，也不需要依赖Node.js的crypto模块，原生API全端兼容、安全性有官方保障，完全满足需求。

实现步骤 #

• 每个用户生成专属公私钥对：用户首次注册登录时，在客户端基于RSA-OAEP算法生成公私钥对，用用户输入的登录密码（仅在客户端内存临时存在）派生一个密钥加密自身私钥，加密后的私钥、明文公钥同步存到MongoDB的用户表中，服务端全程无法获取用户私钥明文。
• 每个文件夹生成独立对称加密密钥：新建文件夹时，在客户端生成随机的AES-256-GCM对称密钥，该密钥负责加密当前文件夹下所有敏感数据（用户名、密码等）。针对所有有权限访问该文件夹的用户，用各用户的公钥分别加密该对称密钥，将每个用户对应的加密后的文件夹密钥存在服务端。
• 数据存储流程：用户新增/编辑文件夹内的敏感数据时，在客户端用当前文件夹的对称密钥加密所有敏感字段，仅将密文、加密必需的IV（初始化向量）、认证标签上传到服务端存储，服务端全程仅接触密文数据。
• 数据解密流程：用户访问有权限的文件夹时，先从服务端拉取用自身公钥加密的文件夹密钥，在客户端用自身私钥解密拿到文件夹对称密钥，再用该密钥解密拉取到的密文数据，所有解密操作完全在客户端内存完成，不会泄露到服务端。
• 权限变更处理：新增用户文件夹权限时，仅需用该用户的公钥加密当前文件夹的对称密钥，上传到服务端存储即可；移除用户权限时，直接删除服务端存储的该用户对应的加密文件夹密钥即可，安全要求高的场景可同步做文件夹密钥轮换：生成新的对称密钥重新加密文件夹内所有数据，再给剩余有权限的用户分发新加密的密钥。

Meteor适配注意事项 #

• 所有加密解密逻辑全部放在imports/client目录下，不要写入服务端代码，避免逻辑泄露。
• 所有密钥明文仅存储在React状态或内存变量中，禁止写入LocalStorage、SessionStorage等持久化存储位置，用户退出登录时直接清空内存即可清除密钥。
• 可直接封装通用工具函数复用加密解密逻辑，参考示例：

// 生成文件夹AES对称密钥
async function generateFolderKey() {
  return window.crypto.subtle.generateKey(
    { name: "AES-GCM", length: 256 },
    true,
    ["encrypt", "decrypt"]
  );
}

// 加密敏感数据
async function encryptSensitiveData(folderKey, plainText) {
  const encoder = new TextEncoder();
  const data = encoder.encode(plainText);
  const iv = window.crypto.getRandomValues(new Uint8Array(12));
  const encryptedBuffer = await window.crypto.subtle.encrypt(
    { name: "AES-GCM", iv: iv },
    folderKey,
    data
  );
  // 转换为base64格式方便服务端存储
  return {
    iv: btoa(String.fromCharCode(...iv)),
    ciphertext: btoa(String.fromCharCode(...new Uint8Array(encryptedBuffer)))
  };
}

• 服务端仍需做权限校验：用户请求文件夹数据时，先校验用户是否有该文件夹的访问权限，再返回对应的加密数据和加密后的文件夹密钥，避免越权访问。

避坑提示 #

• 不要自行实现任何加密算法，全部使用原生Web Crypto的标准接口，避免出现安全漏洞。
• 用户忘记登录密码会导致自身私钥无法解密，需提前做好配套方案，比如企业管理员预留加密后的恢复密钥。
• AES-GCM模式解密必须用到加密时生成的IV和认证标签，存储密文时必须同步存储这两个字段，不要丢失。

内容的提问来源于stack exchange，提问作者soanks