Web Crypto API 前端加密实战：从理论到生产环境

1
/**
2
 * 生成 AES-GCM 密钥
3
 * @param {number} length - 密钥长度：128 | 256
4
 */
5
async function generateAESKey(length = 256) {
6
  return await crypto.subtle.generateKey(
7
    { name: 'AES-GCM', length },
8
    true, // 可导出（用于存储或传输）
9
    ['encrypt', 'decrypt']
10
  );
11
}
12

13
/**
14
 * AES-GCM 加密
15
 * @param {CryptoKey} key - 加密密钥
16
 * @param {string} plaintext - 明文
17
 * @returns {Promise<{iv: ArrayBuffer, ciphertext: ArrayBuffer}>}
18
 */
19
async function encryptAES(key, plaintext) {
20
  const encoder = new TextEncoder();
21
  const data = encoder.encode(plaintext);
22

23
  // IV（初始化向量）必须随机且唯一！
24
  // 重用 IV + 同一密钥 = 灾难性安全漏洞
25
  const iv = crypto.getRandomValues(new Uint8Array(12));
26

27
  const ciphertext = await crypto.subtle.encrypt(
28
    { name: 'AES-GCM', iv },
29
    key,
30
    data
31
  );
32

33
  return { iv, ciphertext };
34
}
35

36
/**
37
 * AES-GCM 解密
38
 */
39
async function decryptAES(key, iv, ciphertext) {
40
  const decrypted = await crypto.subtle.decrypt(
41
    { name: 'AES-GCM', iv },
42
    key,
43
    ciphertext
44
  );
45

46
  const decoder = new TextDecoder();
47
  return decoder.decode(decrypted);
48
}
49

50
// === 使用示例 ===
51
const key = await generateAESKey(256);
52
const { iv, ciphertext } = await encryptAES(key, '敏感数据：用户密码123');
53
const plaintext = await decryptAES(key, iv, ciphertext);
54
console.log(plaintext); // '敏感数据：用户密码123'

1
/**
2
 * 将 ArrayBuffer 转为 Base64（适合 JSON/存储）
3
 */
4
function arrayBufferToBase64(buffer) {
5
  const bytes = new Uint8Array(buffer);
6
  let binary = '';
7
  for (let i = 0; i < bytes.byteLength; i++) {
8
    binary += String.fromCharCode(bytes[i]);
9
  }
10
  return btoa(binary);
11
}
12

13
/**
14
 * Base64 转回 ArrayBuffer
15
 */
16
function base64ToArrayBuffer(base64) {
17
  const binary = atob(base64);
18
  const bytes = new Uint8Array(binary.length);
19
  for (let i = 0; i < binary.length; i++) {
20
    bytes[i] = binary.charCodeAt(i);
21
  }
22
  return bytes.buffer;
23
}
24

25
/**
26
 * 加密并序列化存储
27
 */
28
async function encryptAndStore(key, plaintext, storageKey) {
29
  const { iv, ciphertext } = await encryptAES(key, plaintext);
30

31
  const payload = {
32
    iv: arrayBufferToBase64(iv),
33
    data: arrayBufferToBase64(ciphertext),
34
    // 附加元数据
35
    alg: 'AES-GCM',
36
    ts: Date.now()
37
  };
38

39
  localStorage.setItem(storageKey, JSON.stringify(payload));
40
}
41

42
/**
43
 * 读取并解密
44
 */
45
async function loadAndDecrypt(key, storageKey) {
46
  const raw = localStorage.getItem(storageKey);
47
  if (!raw) return null;
48

49
  const { iv, data } = JSON.parse(raw);
50
  return await decryptAES(
51
    key,
52
    base64ToArrayBuffer(iv),
53
    base64ToArrayBuffer(data)
54
  );
55
}

1
/**
2
 * 生成 RSA-OAEP 密钥对
3
 */
4
async function generateRSAKeyPair(modulusLength = 2048) {
5
  return await crypto.subtle.generateKey(
6
    {
7
      name: 'RSA-OAEP',
8
      modulusLength,
9
      publicExponent: new Uint8Array([1, 0, 1]), // 65537
10
      hash: 'SHA-256'
11
    },
12
    true,
13
    ['encrypt', 'decrypt']
14
  );
15
}
16

17
/**
18
 * RSA 加密（用公钥）
19
 */
20
async function rsaEncrypt(publicKey, plaintext) {
21
  const encoder = new TextEncoder();
22
  return await crypto.subtle.encrypt(
23
    { name: 'RSA-OAEP' },
24
    publicKey,
25
    encoder.encode(plaintext)
26
  );
27
}
28

29
/**
30
 * RSA 解密（用私钥）
31
 */
32
async function rsaDecrypt(privateKey, ciphertext) {
33
  const decrypted = await crypto.subtle.decrypt(
34
    { name: 'RSA-OAEP' },
35
    privateKey,
36
    ciphertext
37
  );
38
  return new TextDecoder().decode(decrypted);
39
}

1
/**
2
 * 混合加密方案
3
 * 1. 生成随机 AES 密钥
4
 * 2. 用 AES-GCM 加密大数据
5
 * 3. 用 RSA 加密 AES 密钥
6
 * 4. 传输：{ encryptedData, encryptedKey, iv }
7
 */
8
async function hybridEncrypt(publicKey, largePlaintext) {
9
  // 步骤 1：生成临时 AES 密钥
10
  const aesKey = await generateAESKey(256);
11

12
  // 步骤 2：AES 加密实际数据
13
  const { iv, ciphertext } = await encryptAES(aesKey, largePlaintext);
14

15
  // 步骤 3：导出 AES 密钥并用 RSA 加密
16
  const rawAesKey = await crypto.subtle.exportKey('raw', aesKey);
17
  const encryptedKey = await rsaEncrypt(publicKey,
18
    new TextDecoder().decode(rawAesKey));
19

20
  return {
21
    encryptedData: arrayBufferToBase64(ciphertext),
22
    encryptedKey: arrayBufferToBase64(encryptedKey),
23
    iv: arrayBufferToBase64(iv)
24
  };
25
}
26

27
/**
28
 * 混合解密
29
 */
30
async function hybridDecrypt(privateKey, payload) {
31
  // 步骤 1：RSA 解密 AES 密钥
32
  const encryptedKey = base64ToArrayBuffer(payload.encryptedKey);
33
  const decryptedKeyRaw = await rsaDecrypt(privateKey, encryptedKey);
34

35
  // 步骤 2：导入 AES 密钥
36
  const aesKey = await crypto.subtle.importKey(
37
    'raw',
38
    new TextEncoder().encode(decryptedKeyRaw),
39
    { name: 'AES-GCM', length: 256 },
40
    true,
41
    ['decrypt']
42
  );
43

44
  // 步骤 3：AES 解密数据
45
  return await decryptAES(
46
    aesKey,
47
    base64ToArrayBuffer(payload.iv),
48
    base64ToArrayBuffer(payload.encryptedData)
49
  );
50
}

1
/**
2
 * 生成 ECDSA P-256 密钥对
3
 */
4
async function generateECDSAKeyPair() {
5
  return await crypto.subtle.generateKey(
6
    { name: 'ECDSA', namedCurve: 'P-256' },
7
    true,
8
    ['sign', 'verify']
9
  );
10
}
11

12
/**
13
 * 签名数据
14
 */
15
async function signData(privateKey, data) {
16
  const encoder = new TextEncoder();
17
  return await crypto.subtle.sign(
18
    { name: 'ECDSA', hash: 'SHA-256' },
19
    privateKey,
20
    encoder.encode(data)
21
  );
22
}
23

24
/**
25
 * 验证签名
26
 */
27
async function verifySignature(publicKey, data, signature) {
28
  const encoder = new TextEncoder();
29
  return await crypto.subtle.verify(
30
    { name: 'ECDSA', hash: 'SHA-256' },
31
    publicKey,
32
    signature,
33
    encoder.encode(data)
34
  );
35
}
36

37
// === 使用示例 ===
38
const { publicKey, privateKey } = await generateECDSAKeyPair();
39
const data = '转账金额：10000元，收款人：张三';
40
const signature = await signData(privateKey, data);
41
const isValid = await verifySignature(publicKey, data, signature);
42
console.log('签名有效:', isValid); // true
43

44
// 篡改数据后验证失败
45
const tampered = '转账金额：999999元，收款人：李四';
46
const isTampered = await verifySignature(publicKey, tampered, signature);
47
console.log('篡改后验证:', isTampered); // false

1
from cryptography.hazmat.primitives.ciphers.aead import AESGCM
2
import base64
3
import json
4

5
def decrypt_aes_gcm(key_bytes: bytes, iv: bytes, ciphertext: bytes) -> str:
6
    """
7
    用 Python 解密 Web Crypto API 加密的数据
8
    AES-GCM 的 ciphertext 已包含 16 字节的认证标签（tag）
9
    """
10
    aesgcm = AESGCM(key_bytes)
11
    # decrypt() 会自动验证 tag，篡改数据会抛出 InvalidTag
12
    plaintext = aesgcm.decrypt(iv, ciphertext, None)
13
    return plaintext.decode('utf-8')
14

15
# === 从前端接收的 payload 解密 ===
16
def decrypt_from_frontend(key_bytes: bytes, payload: dict) -> str:
17
    iv = base64.b64decode(payload['iv'])
18
    ciphertext = base64.b64decode(payload['data'])
19
    return decrypt_aes_gcm(key_bytes, iv, ciphertext)
20

21
# === 测试 ===
22
# key_bytes 应该是 32 字节（AES-256）
23
# 这个 key 需要通过安全方式从前端传递（如 RSA 加密的混合加密方案）
24
key = b'\x00' * 32  # 示例，实际应从安全通道获取
25
payload = {
26
    'iv': 'AAAAAAAAAAAAAAAAAAAAAA==',  # 12 字节 IV 的 base64
27
    'data': '...'  # 密文 + tag
28
}
29
# plaintext = decrypt_from_frontend(key, payload)

1
from cryptography.hazmat.primitives import hashes, serialization
2
from cryptography.hazmat.primitives.asymmetric import ec
3
import base64
4

5
def verify_ecdsa_signature(
6
    public_key_pem: str,
7
    data: str,
8
    signature_b64: str
9
) -> bool:
10
    """
11
    验证前端 ECDSA 签名
12
    """
13
    # 导入公钥（SPKI 格式）
14
    public_key = serialization.load_der_public_key(
15
        base64.b64decode(public_key_pem)
16
    )
17

18
    signature = base64.b64decode(signature_b64)
19

20
    try:
21
        public_key.verify(
22
            signature,
23
            data.encode('utf-8'),
24
            ec.ECDSA(hashes.SHA256())
25
        )
26
        return True
27
    except Exception:
28
        return False
29

30
# === 前端导出公钥供后端验证 ===
31
// 前端代码：导出公钥为 SPKI 格式
32
async function exportPublicKeyDER(publicKey) {
33
    const der = await crypto.subtle.exportKey('spki', publicKey);
34
    return btoa(String.fromCharCode(...new Uint8Array(der)));
35
}

1
from cryptography.hazmat.primitives.kdf.pbkdf2 import PBKDF2HMAC
2
from cryptography.hazmat.primitives import hashes
3
import base64
4

5
def derive_aes_key(password: str, salt_b64: str, iterations: int = 600000) -> bytes:
6
    """
7
    与前端 PBKDF2 完全兼容的密钥派生
8
    """
9
    salt = base64.b64decode(salt_b64)
10

11
    kdf = PBKDF2HMAC(
12
        algorithm=hashes.SHA256(),
13
        length=32,  # AES-256
14
        salt=salt,
15
        iterations=iterations,
16
    )
17
    return kdf.derive(password.encode('utf-8'))
18

19
# === 完整流程：前端用密码加密 → 后端用同一密码解密 ===
20
# 1. 前端：passwordBasedEncrypt(password, plaintext) → {salt, iv, data}
21
# 2. 后端：
22
#    key = derive_aes_key(password, salt_b64)
23
#    plaintext = decrypt_aes_gcm(key, iv, ciphertext)

1
// ❌ AI 会立即指出：用 Math.random() 生成密钥
2
const weakKey = Math.random().toString(36).slice(2);
3
// Math.random() 不是密码学安全的随机数生成器！
4
// 攻击者可以预测输出
5

6
// ✅ 正确：用 crypto.getRandomValues
7
const strongKey = crypto.getRandomValues(new Uint8Array(32));
8

9
// ❌ AI 会指出：错误处理泄露了明文
10
try {
11
  const decrypted = await decryptAES(key, iv, data);
12
} catch (e) {
13
  console.error('解密失败，原文是:', plaintext); // 泄露！
14
  // 或者：throw new Error(`Decryption failed for: ${data}`); // 密文泄露
15
}
16

17
// ✅ 正确：不泄露任何敏感信息
18
try {
19
  const decrypted = await decryptAES(key, iv, data);
20
} catch (e) {
21
  console.error('Decryption failed'); // 只记录事件，不记录数据
22
  // 可选：上报安全事件（不含敏感内容）
23
  reportSecurityEvent('DECRYPTION_FAILURE', { timestamp: Date.now() });
24
}