前端加密的核心目的不是替代 HTTPS而是作为纵深防御的一环防止浏览器插件、XSS 攻击或中间人篡改窃取明文敏感数据如密码、身份证、银行卡号。以下是前端加密的完整实践指南涵盖算法选择、代码实现与安全红线。 核心算法选型与场景算法类型常用算法前端角色典型场景推荐库非对称加密RSA / SM2仅持有公钥用于加密登录密码、支付密码提交jsencrypt/sm-crypto对称加密AES-256-GCM加密大数据体敏感表单、文件加密CryptoJS/ Web Crypto API哈希摘要SHA-256 / SM3不可逆用于校验密码脱敏、接口签名CryptoJS/ Web Crypto API混合加密RSA AES兼顾安全与性能金融级数据传输组合使用上述库⚠️重要提醒永远不要在前端存储私钥私钥必须且只能存在于服务端如 KMS、HSM。永远不要硬编码密钥密钥应通过安全通道动态下发如登录后返回会话密钥。HTTPS 是前提前端加密不能替代 TLS两者是互补关系。 实战代码示例1. RSA 公钥加密登录密码提交使用jsencrypt库这是最经典的登录密码加密方案importJSEncryptfromjsencrypt;// 后端下发的公钥PEM格式constPUBLIC_KEY-----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA... -----END PUBLIC KEY-----;exportfunctionencryptPassword(password){constencryptornewJSEncrypt();encryptor.setPublicKey(PUBLIC_KEY);constencryptedencryptor.encrypt(password);if(!encrypted){thrownewError(密码加密失败);}returnencrypted;// 返回 Base64 编码的密文}2. AES 对称加密敏感数据加密推荐使用AES-256-GCM模式认证加密避免使用不安全的 ECB/CBC 模式// 优先使用浏览器原生 Web Crypto API更安全、性能更好asyncfunctionaesEncrypt(plaintext,key){constivcrypto.getRandomValues(newUint8Array(12));// GCM 推荐 12 字节 IVconstencodedTextnewTextEncoder().encode(plaintext);constciphertextawaitcrypto.subtle.encrypt({name:AES-GCM,iv},key,encodedText);// 返回 iv 密文的拼接结果Base64constcombinednewUint8Array(iv.lengthciphertext.byteLength);combined.set(iv);combined.set(newUint8Array(ciphertext),iv.length);returnbtoa(String.fromCharCode(...combined));}3. 接口防篡改签名防止请求被重放或篡改通常结合时间戳和随机数importCryptoJSfromcrypto-js;exportfunctiongenerateSignature(params,secretKey){// 1. 参数按 key 字典序排序constsortedKeysObject.keys(params).sort();constqueryStringsortedKeys.map(k${k}${params[k]}).join();// 2. 拼接时间戳和随机数consttimestampDate.now();constnoncecrypto.randomUUID();constsignStr${queryString}timestamp${timestamp}nonce${nonce};// 3. HMAC-SHA256 签名constsignatureCryptoJS.HmacSHA256(signStr,secretKey).toString(CryptoJS.enc.Hex);return{signature,timestamp,nonce};}️ 安全红线与最佳实践禁止使用 MD5/SHA1 做密码哈希这些算法已被证明不安全应使用 SHA-256 或 bcrypt/scrypt后端处理。禁止使用 ECB 模式ECB 模式相同的明文块会产生相同的密文块极易被分析。必须使用 GCM 或 CBCHMAC。IV/Nonce 必须随机每次加密都必须生成新的随机 IV绝不能复用。敏感数据不落盘加密后的数据也不要存入localStorage/Cookie仅在内存中短暂存在。国密合规若项目涉及国内金融/政务系统需使用 SM2/SM3/SM4 国密算法可使用sm-crypto库。Web Crypto API 优先浏览器原生 API 比第三方 JS 库更安全密钥不暴露到 JS 作用域、性能更好仅在需要兼容旧浏览器时才使用CryptoJS。 混合加密完整流程金融级推荐后端前端后端前端1. 请求获取RSA公钥2. 返回RSA公钥3. 生成随机AES密钥4. AES密钥加密业务数据5. RSA公钥加密AES密钥6. 发送(加密数据 加密的AES密钥)7. RSA私钥解密得到AES密钥8. AES密钥解密业务数据9. 返回处理结果这种方案既保证了大数据体的加密性能AES又解决了密钥安全分发问题RSA是银行、支付等系统的标准实践。