前端安全加密方式

前端安全加密是保障数据传输和存储安全的重要环节，以下是常见的加密方式及安全实践：

一、加密方式分类

1. 对称加密（Symmetric Encryption）

原理： 使用同一个密钥加密和解密。
常用算法： AES（推荐）、DES、3DES。
特点： 加密速度快，但密钥需安全传输。
应用场景： 本地存储（如 Cookie、LocalStorage）加密。
示例（JavaScript）：

const CryptoJS = require('crypto-js');
const key = CryptoJS.enc.Utf8.parse('your-secret-key');
const iv = CryptoJS.enc.Utf8.parse('initialization-vector');
const encrypted = CryptoJS.AES.encrypt('敏感数据', key, { iv: iv });
const decrypted = CryptoJS.AES.decrypt(encrypted, key, { iv: iv }).toString(CryptoJS.enc.Utf8);

2. 非对称加密（Asymmetric Encryption）

原理： 使用公钥加密，私钥解密（或反之）。
常用算法： RSA、ECC。
特点： 无需传输私钥，但加密速度较慢。
应用场景： 密钥交换（如 HTTPS 握手）、数字签名。
示例（JavaScript）：

// 使用 Web Crypto API 生成密钥对
window.crypto.subtle.generateKey({ name: 'RSA-OAEP', modulusLength: 2048, publicExponent: new Uint8Array([1, 0, 1]) },true,['encrypt', 'decrypt']
).then((keyPair) => {// 公钥加密，私钥解密
});

3. 哈希算法（Hashing）

原理： 单向转换，无法逆向解密。
常用算法： SHA-256、MD5（已不安全）、BCrypt（带盐值）。
特点： 验证数据完整性，常用于密码存储。
示例（JavaScript）：

const crypto = require('crypto');
const hash = crypto.createHash('sha256').update('密码').digest('hex');

二、关键安全实践

HTTPS 强制使用
- 通过 TLS/SSL 加密传输层数据，防止中间人攻击。
- 推荐使用HSTS（HTTP 严格传输安全）。
敏感数据加密存储
- 对 Cookie、LocalStorage 等存储敏感信息时，先加密再存储。
密码处理
- 前端对密码进行哈希（如 SHA-256）后传输，后端再二次哈希并加盐。
- 避免明文传输密码。
防止 XSS 攻击
- 对用户输入进行转义，使用DOMPurify等库过滤危险内容。
CSRF 防护
- 使用 CSRF 令牌（如XSRF-TOKEN），验证请求来源。

三、注意事项

密钥管理
- 避免在前端代码中硬编码密钥，可通过后端动态下发。
- 敏感密钥需结合Web Workers或Service Worker隔离存储。
浏览器兼容性
- 优先使用Web Crypto API（现代浏览器支持），或引入第三方库（如crypto-js）。
前后端协同
- 前端加密需与后端解密逻辑匹配，确保数据一致性。

4. 场景选择

数据传输加密
- 推荐： 强制使用HTTPS（TLS 1.3+）加密传输层。
- 原因： 防止中间人攻击（MITM），确保数据在网络中传输时不可被窃听或篡改。
- 补充： 配置HSTS和CSP进一步增强传输安全。
数据存储加密
- 敏感数据（如用户密码、支付信息）：
  - 对称加密（如 AES-256-GCM）加密后存储。
  - 密钥管理：密钥通过后端动态下发，避免硬编码。
- 非敏感但需防篡改数据：
  - 哈希算法（如 SHA-256）+ 盐值验证完整性。
密钥交换
- 推荐： 非对称加密（RSA 或 ECDH） 生成临时密钥。
- 示例： 通过 RSA 公钥加密对称密钥（AES 密钥），后端用私钥解密。
密码处理
- 前端预处理： 对用户输入的密码进行SHA-256 哈希后传输。
- 后端强化： 后端再次哈希并加盐（如 BCrypt）存储，避免彩虹表攻击。

5. 加密方式对比与选择

场景	推荐算法	原因
快速加密存储	AES（对称加密）	加密速度快，适合本地存储（如 LocalStorage）。
密钥交换	RSA 或 ECDH（非对称加密）	安全交换对称密钥，避免密钥泄露。
密码哈希	SHA-256 + 盐值（前端）	防止明文传输，需结合后端二次哈希（如 BCrypt）。
数据完整性验证	HMAC（如 SHA-256）	验证数据是否被篡改，需密钥保护。
浏览器端加密	Web Crypto API	现代浏览器原生支持，避免第三方库风险。