Web Crypto 安全认证实战：从 JWT 签名到端到端加密

1
/**
2
 * 将 ArrayBuffer / Uint8Array 转为 base64url
3
 */
4
function bufToB64Url(buf) {
5
  const bytes = new Uint8Array(buf);
6
  let bin = '';
7
  for (let i = 0; i < bytes.byteLength; i++) bin += String.fromCharCode(bytes[i]);
8
  return btoa(bin).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
9
}
10

11
function strToB64Url(str) {
12
  return bufToB64Url(new TextEncoder().encode(str));
13
}
14

15
/**
16
 * 用 HMAC-SHA256 签名 JWT
17
 * @param {object} payload - 要签名的数据
18
 * @param {string} secret - 服务端密钥（前端不能拥有！但演示用）
19
 * @returns {string} JWT
20
 */
21
async function signJWT(payload, secret) {
22
  const header = { alg: 'HS256', typ: 'JWT' };
23
  const h = strToB64Url(JSON.stringify(header));
24
  const p = strToB64Url(JSON.stringify(payload));
25

26
  // 关键步骤：HMAC-SHA256
27
  const key = await crypto.subtle.importKey(
28
    'raw',
29
    new TextEncoder().encode(secret),
30
    { name: 'HMAC', hash: 'SHA-256' },
31
    false,
32
    ['sign', 'verify']
33
  );
34

35
  const sigBuf = await crypto.subtle.sign(
36
    'HMAC',
37
    key,
38
    new TextEncoder().encode(`${h}.${p}`)
39
  );
40

41
  return `${h}.${p}.${bufToB64Url(sigBuf)}`;
42
}
43

44
// === 使用示例 ===
45
const token = await signJWT(
46
  { userId: 12345, role: 'admin', exp: Math.floor(Date.now() / 1000) + 3600 },
47
  'my-super-secret-key-at-least-32-bytes'
48
);
49
console.log(token);
50
// eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEyMzQ1LCJyb2xlIjoiYWRtaW4iLCJleHAiOjE3NTBfQ...

1
/**
2
 * 用公钥验签 JWT（RS256）
3
 * @param {string} token - JWT
4
 * @param {string} publicKeyPem - PEM 格式的公钥
5
 * @returns {Promise<object|null>} payload 或 null
6
 */
7
async function verifyRS256(token, publicKeyPem) {
8
  const [h, p, s] = token.split('.');
9
  if (!h || !p || !s) return null;
10

11
  // 把 PEM 头尾去掉，base64 decode，再包成 ArrayBuffer
12
  const pemBody = publicKeyPem
13
    .replace(/-----BEGIN PUBLIC KEY-----/, '')
14
    .replace(/-----END PUBLIC KEY-----/, '')
15
    .replace(/\s+/g, '');
16
  const der = Uint8Array.from(atob(pemBody), c => c.charCodeAt(0));
17

18
  const key = await crypto.subtle.importKey(
19
    'spki',
20
    der,
21
    { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' },
22
    false,
23
    ['verify']
24
  );
25

26
  const sig = Uint8Array.from(
27
    s.replace(/-/g, '+').replace(/_/g, '/') + '=='.slice(0, (4 - s.length % 4) % 4),
28
    c => c.charCodeAt(0)
29
  );
30

31
  const ok = await crypto.subtle.verify(
32
    { name: 'RSASSA-PKCS1-v1_5' },
33
    key,
34
    sig,
35
    new TextEncoder().encode(`${h}.${p}`)
36
  );
37

38
  if (!ok) return null;
39

40
  const payload = JSON.parse(atob(p.replace(/-/g, '+').replace(/_/g, '/')));
41

42
  // 还要校验 exp
43
  if (payload.exp && payload.exp * 1000 < Date.now()) return null;
44

45
  return payload;
46
}

1
/**
2
 * 用密码派生 AES 密钥
3
 * @param {string} password - 用户密码
4
 * @param {Uint8Array} salt - 盐（每个用户唯一）
5
 * @param {number} iterations - 迭代次数（越大越慢）
6
 */
7
async function deriveKey(password, salt, iterations = 600_000) {
8
  const baseKey = await crypto.subtle.importKey(
9
    'raw',
10
    new TextEncoder().encode(password),
11
    'PBKDF2',
12
    false,
13
    ['deriveKey']
14
  );
15

16
  return crypto.subtle.deriveKey(
17
    {
18
      name: 'PBKDF2',
19
      salt,
20
      iterations,
21
      hash: 'SHA-256',
22
    },
23
    baseKey,
24
    { name: 'AES-GCM', length: 256 },
25
    false,                  // 不可导出
26
    ['encrypt', 'decrypt']
27
  );
28
}
29

30
// 使用：派生 AES 密钥
31
const salt = crypto.getRandomValues(new Uint8Array(16));
32
const aesKey = await deriveKey('user-input-password', salt, 600_000);

1
async function benchmarkPBKDF2(targetMs = 250) {
2
  const password = 'benchmark-password';
3
  const salt = crypto.getRandomValues(new Uint8Array(16));
4
  const baseKey = await crypto.subtle.importKey(
5
    'raw', new TextEncoder().encode(password), 'PBKDF2', false, ['deriveBits']
6
  );
7

8
  let iterations = 100_000;
9
  while (iterations <= 2_000_000) {
10
    const t0 = performance.now();
11
    await crypto.subtle.deriveBits(
12
      { name: 'PBKDF2', salt, iterations, hash: 'SHA-256' },
13
      baseKey,
14
      256
15
    );
16
    const t1 = performance.now();
17
    if (t1 - t0 > targetMs) return iterations;
18
    iterations = Math.floor(iterations * 1.5);
19
  }
20
  return iterations;
21
}
22

23
const optimal = await benchmarkPBKDF2(250);
24
console.log(`推荐迭代次数: ${optimal}`);

1
/**
2
 * 生成 ECDH 密钥对（P-256 曲线）
3
 */
4
async function generateECDH() {
5
  return crypto.subtle.generateKey(
6
    { name: 'ECDH', namedCurve: 'P-256' },
7
    true,                  // 可导出（公钥要发给别人）
8
    ['deriveKey', 'deriveBits']
9
  );
10
}
11

12
/**
13
 * 导出公钥为 raw bytes
14
 */
15
async function exportPublic(keyPair) {
16
  const raw = await crypto.subtle.exportKey('raw', keyPair.publicKey);
17
  return new Uint8Array(raw);
18
}
19

20
/**
21
 * 用自己的私钥 + 对方公钥派生共享密钥
22
 */
23
async function deriveSharedKey(myPrivateKey, theirPublicRaw) {
24
  const theirPub = await crypto.subtle.importKey(
25
    'raw',
26
    theirPublicRaw,
27
    { name: 'ECDH', namedCurve: 'P-256' },
28
    false,
29
    []
30
  );
31

32
  return crypto.subtle.deriveKey(
33
    { name: 'ECDH', public: theirPub },
34
    myPrivateKey,
35
    { name: 'AES-GCM', length: 256 },
36
    false,
37
    ['encrypt', 'decrypt']
38
  );
39
}
40

41
// === Alice 端 ===
42
const alice = await generateECDH();
43
const alicePub = await exportPublic(alice);
44

45
// 把 alicePub 发送给 Bob（明文传输，**公钥不是秘密**）
46
// ... 网络传输 ...
47

48
// === Bob 端 ===
49
const bob = await generateECDH();
50
const bobPub = await exportPublic(bob);
51

52
// 收到 alicePub
53
const aliceShared = await deriveSharedKey(bob.privateKey, alicePub);
54

55
// 把 bobPub 发回给 Alice
56
// ... 网络传输 ...
57

58
// === Alice 收到 bobPub ===
59
const bobShared = await deriveSharedKey(alice.privateKey, bobPub);
60

61
// 现在 aliceShared 和 bobShared 是同一个 AES 密钥
62
// 可以用它加密消息：
63
const iv = crypto.getRandomValues(new Uint8Array(12));
64
const ciphertext = await crypto.subtle.encrypt(
65
  { name: 'AES-GCM', iv },
66
  aliceShared,
67
  new TextEncoder().encode('https://e2ee-secret-message')
68
);

1
class SecureChannel {
2
  #key;  // CryptoKey，外部无法访问
3

4
  constructor(key) {
5
    this.#key = key;
6
  }
7

8
  /**
9
   * 加密消息，返回「IV + 密文」的拼接
10
   */
11
  async encrypt(plaintext) {
12
    const iv = crypto.getRandomValues(new Uint8Array(12));
13
    const cipherBuf = await crypto.subtle.encrypt(
14
      { name: 'AES-GCM', iv },
15
      this.#key,
16
      new TextEncoder().encode(plaintext)
17
    );
18
    // 前 12 字节是 IV，后面是密文（包含 GCM 标签）
19
    const out = new Uint8Array(iv.byteLength + cipherBuf.byteLength);
20
    out.set(iv, 0);
21
    out.set(new Uint8Array(cipherBuf), iv.byteLength);
22
    return out;
23
  }
24

25
  /**
26
   * 解密（自动验证 GCM 认证标签）
27
   */
28
  async decrypt(packed) {
29
    const iv = packed.slice(0, 12);
30
    const cipher = packed.slice(12);
31
    const plainBuf = await crypto.subtle.decrypt(
32
      { name: 'AES-GCM', iv },
33
      this.#key,
34
      cipher
35
    );
36
    return new TextDecoder().decode(plainBuf);
37
  }
38
}
39

40
// === 使用 ===
41
const aesKey = await deriveKey('shared-passphrase', salt, 600_000);
42
const channel = new SecureChannel(aesKey);
43

44
const encrypted = await channel.encrypt('银行卡号: 6225 1234 5678 9012');
45
// 存入 IndexedDB / 发送到服务端（服务端看到的是乱码）
46
const decrypted = await channel.decrypt(encrypted);
47
console.log(decrypted); // '银行卡号: 6225 1234 5678 9012'

1
// ❌ 致命错误：固定 IV
2
const fixedIV = new Uint8Array(12); // 全 0
3
async function brokenEncrypt(plain) {
4
  return new Uint8Array(await crypto.subtle.encrypt(
5
    { name: 'AES-GCM', iv: fixedIV },
6
    key,
7
    new TextEncoder().encode(plain)
8
  ));
9
}
10

11
// ✅ 正确：每次随机 IV
12
async function safeEncrypt(plain) {
13
  const iv = crypto.getRandomValues(new Uint8Array(12));
14
  // ...
15
}
16

17
// ✅ 更好：用计数器（确定性加密场景）
18
// 维护一个全局自增的 12 字节计数器
19
let counter = 0n;
20
async function deterministicEncrypt(plain) {
21
  const iv = new Uint8Array(12);
22
  new DataView(iv.buffer).setBigUint64(4, counter++);  // 后 8 字节自增
23
  return crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, new TextEncoder().encode(plain));
24
}