Web IM 端到端加密的三种实现方案与代码实战

一、引言与核心密码学概念

1.1 为什么 IM 需要端到端加密（E2EE）？

即时通讯内容通常包含个人隐私、商业机密等敏感信息。传统的安全措施（如 HTTPS）只能保证信息在传输过程中的安全，无法防止消息在服务器上被窃取或窥探。端到端加密（End-to-End Encryption, E2EE）旨在解决这一问题。

核心思想是：消息在发送方客户端就被加密，直到到达接收方客户端才被解密。在整个传输和存储过程中，消息始终以密文形式存在。即使是 IM 服务提供商，也无法获取消息的明文内容。

安全目标包括保密性、完整性、身份验证以及不可否认性。

1.2 核心密码学概念与工具

在深入方案之前，必须理解以下概念：

1. 对称加密 (Symmetric Encryption)

   • 描述：加密和解密使用同一个密钥。
   • 算法：AES (Advanced Encryption Standard) 是当前的标准，常用密钥长度 128, 192, 256 位。
   • 优点：速度快，适合加密大量数据。
   • 缺点：密钥分发困难。

2. 非对称加密 (Asymmetric Encryption)

   • 描述：使用一对密钥：公钥 (Public Key) 和 私钥 (Private Key)。公钥可以公开，用于加密；私钥必须严格保密，用于解密。
   • 算法：RSA, ECC (Elliptic Curve Cryptography)。
   • 优点：解决了密钥分发问题。
   • 缺点：速度非常慢，不适合加密大量数据。

3. 混合加密系统 (Hybrid Cryptosystem)

   • 描述：结合对称加密和非对称加密的优点。
   • 流程：发送方随机生成一个对称密钥（会话密钥），用接收方的公钥加密这个对称密钥，再用对称密钥加密实际消息。
   • 优点：既获得了非对称加密的安全密钥分发，又获得了对称加密的高效数据加密。这是现代安全通信（如 TLS/SSL）的基础。

4. 数字签名 (Digital Signature)

   • 描述：用于验证消息的来源和完整性。发送方使用自己的私钥对消息的哈希值进行加密，得到签名。接收方使用发送方的公钥对签名进行解密并对比。
   • 作用：提供身份验证和不可否认性。

5. 前端密码学库选择

   • Web Crypto API：现代浏览器原生支持，性能最好，但 API 较底层。
   • crypto-js：流行易用，纯 JavaScript 实现，性能不如原生 API。
   • node-forge：功能强大，在 Node.js 和浏览器中都能工作，提供了比 Web Crypto API 更友好的抽象。本文示例选用此库。
   • libsodium.js：著名的 libsodium 库的 JavaScript 版本，提供了经过高度优化的、难以误用的高级 API，非常推荐用于生产环境。

6. 后端密码学库选择

   • Java 标准库 (javax.crypto, java.security) 已经非常强大，足以实现所有需求。

---

二、方案一：静态非对称加密（基础方案）

2.1 方案概述与流程

这是最直观的 E2EE 方案。每个用户拥有一对固定的长期密钥。发送者使用接收者的公钥直接加密每一条消息。

流程如下：

1. 密钥生成与上传：用户注册/登录时，前端生成 RSA 密钥对。私钥本地保存，公钥上传至服务器。
2. 获取公钥：A 要给 B 发消息时，A 的前端从服务器获取 B 的公钥。
3. 加密与发送：A 使用 B 的公钥加密消息，将密文发送给服务器。
4. 中继与接收：服务器将密文转发给 B。
5. 解密与展示：B 使用自己的私钥解密消息。

2.2 前端 Vue 实现（使用 node-forge）

1. 安装依赖

npm install node-forge

2. 核心工具类 crypto.js

// utils/crypto.js
import forge from 'node-forge';

// 生成 RSA 密钥对
export function generateRSAKeyPair() {
  return new Promise((resolve, reject) => {
    forge.pki.rsa.generateKeyPair({
      bits: 2048,
      workers: 2,
    }, (err, keypair) => {
      if (err) {
        reject(err);
        return;
      }
      const publicKey = forge.pki.publicKeyToPem(keypair.publicKey);
      const privateKey = forge.pki.privateKeyToPem(keypair.privateKey);
      resolve({ publicKey, privateKey });
    });
  });
}

// 使用公钥加密消息 (RSA-OAEP padding，比 PKCS#1 更安全)
export function encryptMessageWithPublicKey(publicKeyPem, message) {
  try {
    const publicKey = forge.pki.publicKeyFromPem(publicKeyPem);
    // 将字符串转换为字节缓冲区
    const encodedMessage = forge.util.encodeUtf8(message);
    // 使用 OAEP 填充进行加密，SHA-256 作为摘要算法
    const encrypted = publicKey.encrypt(encodedMessage, 'RSA-OAEP', {
      md: forge.md.sha256.create(),
    });
    // 将二进制数据转换为 Base64 字符串以便网络传输
    return forge.util.encode64(encrypted);
  } catch (error) {
    console.error('加密失败:', error);
    throw new Error('消息加密失败');
  }
}

// 使用私钥解密消息
export function decryptMessageWithPrivateKey(privateKeyPem, encryptedMessageBase64) {
  try {
    const privateKey = forge.pki.privateKeyFromPem(privateKeyPem);
    // 将 Base64 字符串解码为二进制数据
    const encryptedData = forge.util.decode64(encryptedMessageBase64);
    // 使用 OAEP 填充进行解密
    const decrypted = privateKey.decrypt(encryptedData, 'RSA-OAEP', {
      md: forge.md.sha256.create(),
    });
    // 将字节缓冲区转换回字符串
    return forge.util.decodeUtf8(decrypted);
  } catch (error) {
    console.error('解密失败:', error);
    throw new Error('消息解密失败，可能是密钥不匹配或消息已损坏');
  }
}

// 安全地存储私钥到本地存储
export function savePrivateKeySecurely(userId, privateKey) {
  // 示例：简单存储。生产环境应使用更安全的方式，例如用用户密码派生出的密钥进行加密后再存储。
  localStorage.setItem(`im_private_key_${userId}`, privateKey);
}

// 从本地存储获取私钥
export function getPrivateKey(userId) {
  return localStorage.getItem(`im_private_key_${userId}`);
}

3. Vue 组件中使用

<!-- components/Chat.vue -->
<template>
  <div>
    <div v-for="msg in messages" :key="msg.id" :class="['message', msg.sender === currentUser.id ? 'sent' : 'received']">
      <p><strong>{{ msg.senderName }}:</strong> {{ msg.decryptedContent || '**加密消息**' }}</p>
      <small>{{ msg.timestamp }}</small>
      <button v-if="!msg.decryptedContent && msg.sender !== currentUser.id" @click="decryptMessage(msg)">解密</button>
    </div>
    <div>
      <textarea v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息..."></textarea>
      <button @click="sendMessage" :disabled="!newMessage.trim()">发送</button>
    </div>
  </div>
</template>

<script>
import { encryptMessageWithPublicKey, decryptMessageWithPrivateKey, getPrivateKey } from '@/utils/crypto';
import { apiGetUserPublicKey, apiSendMessage } from '@/api/chat';

export default {
  name: 'Chat',
  props: ['currentUser', 'targetUser'],
  data() {
    return {
      newMessage: '',
      messages: [],
      websocket: null,
    };
  },
  async mounted() {
    this.connectWebSocket();
  },
  methods: {
    async sendMessage() {
      if (!this.newMessage.trim()) return;
      try {
        // 1. 从服务器获取目标用户的公钥
        const publicKeyResponse = await apiGetUserPublicKey(this.targetUser.id);
        const receiverPublicKey = publicKeyResponse.data;
        // 2. 加密消息
        const encryptedContent = encryptMessageWithPublicKey(receiverPublicKey, this.newMessage.trim());
        // 3. 构建消息对象并通过 WebSocket 或 API 发送
        const messagePayload = {
          receiverId: this.targetUser.id,
          type: 'text',
          content: encryptedContent,
          isEncrypted: true,
          timestamp: new Date().toISOString(),
        };
        // 4. 通过 WebSocket 发送
        this.websocket.send(JSON.stringify(messagePayload));
        // 5. 乐观更新 UI
        this.messages.push({
          id: Date.now(),
          sender: this.currentUser.id,
          senderName: '我',
          encryptedContent: '**消息已加密发送**',
          decryptedContent: null,
          timestamp: '刚刚',
        });
        this.newMessage = '';
      } catch (error) {
        console.error('发送消息失败:', error);
        this.$notify({ type: 'error', title: '发送失败', text: '加密或发送消息时出错' });
      }
    },
    async decryptMessage(message) {
      if (message.decryptedContent) return;
      try {
        const privateKey = getPrivateKey(this.currentUser.id);
        if (!privateKey) {
          throw new Error('未找到解密密钥，请重新登录');
        }
        const decryptedContent = decryptMessageWithPrivateKey(privateKey, message.encryptedContent);
        message.decryptedContent = decryptedContent;
      } catch (error) {
        console.error('解密消息失败:', error);
        this.$notify({ type: 'error', title: '解密失败', text: '无法解密此消息' });
      }
    },
    connectWebSocket() {
      this.websocket.onmessage = (event) => {
        const messageData = JSON.parse(event.data);
        this.handleIncomingMessage(messageData);
      };
    },
    handleIncomingMessage(messageData) {
      const newMsg = {
        id: messageData.id,
        sender: messageData.senderId,
        senderName: messageData.senderName,
        encryptedContent: messageData.content,
        decryptedContent: null,
        timestamp: new Date(messageData.timestamp).toLocaleTimeString(),
      };
      this.messages.push(newMsg);
    },
  },
  beforeUnmount() {
    if (this.websocket) {
      this.websocket.close();
    }
  },
};
</script>

2.3 后端 Java 实现（Spring Boot）

后端在此方案中角色较轻，主要负责公钥的存储查询和消息的转发。

1. 实体类

// User 实体，增加公钥字段
@Entity
@Table(name = "im_users")
@Data
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String nickname;
    @Column(columnDefinition = "TEXT")
    private String rsaPublicKey; // 用户的 RSA 公钥 (PEM 格式)
}

// 消息实体
@Entity
@Table(name = "im_messages")
@Data
public class ChatMessage {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private Long senderId;
    private Long receiverId;
    @Column(columnDefinition = "TEXT")
    private String content; // 消息内容可能是长文本密文
    private Boolean isEncrypted;
    private String messageType;
    private Instant timestamp;
}

2. Controller 层

@RestController
@RequestMapping("/api/chat")
public class ChatController {
    @Autowired
    private UserRepository userRepository;
    @Autowired
    private SimpMessagingTemplate messagingTemplate;
    @Autowired
    private ChatMessageRepository messageRepository;

    // 获取指定用户的公钥
    @GetMapping("/user/{userId}/public-key")
    public ResponseEntity<?> getUserPublicKey(@PathVariable Long userId) {
        User user = userRepository.findById(userId).orElseThrow(() -> new ResourceNotFoundException("User not found"));
        if (user.getRsaPublicKey() == null) {
            return ResponseEntity.badRequest().body("User does not have a public key");
        }
        return ResponseEntity.ok().body(Collections.singletonMap("publicKey", user.getRsaPublicKey()));
    }

    // 接收并转发加密消息
    @PostMapping("/message")
    public ResponseEntity<Void> sendEncryptedMessage(@RequestBody EncryptedMessageRequest request) {
        // 1. 验证发送者身份
        // 2. 将消息保存到数据库（存密文）
        ChatMessage message = new ChatMessage();
        message.setSenderId(request.getSenderId());
        message.setReceiverId(request.getReceiverId());
        message.setContent(request.getContent());
        message.setIsEncrypted(true);
        message.setMessageType(request.getType());
        message.setTimestamp(Instant.now());
        messageRepository.save(message);

        // 3. 通过 WebSocket 实时转发给接收者
        String destination = "/queue/messages";
        MessageDeliveryDto deliveryDto = new MessageDeliveryDto();
        deliveryDto.setId(message.getId());
        deliveryDto.setSenderId(request.getSenderId());
        deliveryDto.setContent(request.getContent());
        deliveryDto.setEncrypted(true);
        deliveryDto.setType(request.getType());
        deliveryDto.setTimestamp(message.getTimestamp());
        messagingTemplate.convertAndSendToUser(
            request.getReceiverId().toString(),
            destination,
            deliveryDto
        );
        return ResponseEntity.ok().build();
    }

    public static class EncryptedMessageRequest {
        private Long senderId;
        private Long receiverId;
        private String content;
        private String type;
        // getters and setters
    }

    public static class MessageDeliveryDto {
        private Long id;
        private Long senderId;
        private String senderName;
        private String content;
        private Boolean isEncrypted;
        private String type;
        private Instant timestamp;
        // getters and setters
    }
}

3. WebSocket 配置

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").setAllowedOriginPatterns("*").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic", "/queue");
        registry.setUserDestinationPrefix("/user");
    }
}

2.4 密钥管理、注册与登录集成

1. 用户注册/登录时生成密钥

// Vuex Store (store/auth.js)
import { generateRSAKeyPair, savePrivateKeySecurely } from '@/utils/crypto';

const actions = {
  async register({ commit }, userData) {
    try {
      const { publicKey, privateKey } = await generateRSAKeyPair();
      const registrationData = { ...userData, publicKey: publicKey };
      const response = await apiRegister(registrationData);
      if (response.data.userId) {
        savePrivateKeySecurely(response.data.userId, privateKey);
        commit('SET_USER', response.data);
        commit('SET_PRIVATE_KEY', privateKey);
      }
      return response;
    } catch (error) {
      console.error('注册失败:', error);
      throw error;
    }
  },
  async login({ commit }, credentials) {
    try {
      const response = await apiLogin(credentials);
      const user = response.data;
      let privateKey = getPrivateKey(user.id);
      if (!privateKey) {
        this.$router.push('/key-setup');
        return;
      }
      commit('SET_USER', user);
      commit('SET_PRIVATE_KEY', privateKey);
      return response;
    } catch (error) {
      console.error('登录失败:', error);
      throw error;
    }
  }
};

2. 密钥设置页面

<!-- views/KeySetup.vue -->
<template>
  <div>
    <h2>安全密钥设置</h2>
    <p>检测到您在新设备登录，需要为您生成新的加密密钥。</p>
    <p>生成后，您将无法在其他设备上解密之前的消息。</p>
    <button @click="generateNewKeys">生成新密钥</button>
  </div>
</template>

<script>
import { generateRSAKeyPair, savePrivateKeySecurely } from '@/utils/crypto';
import { apiUpdatePublicKey } from '@/api/auth';

export default {
  methods: {
    async generateNewKeys() {
      try {
        const { publicKey, privateKey } = await generateRSAKeyPair();
        const userId = this.$store.state.auth.user.id;
        await apiUpdatePublicKey(userId, publicKey);
        savePrivateKeySecurely(userId, privateKey);
        this.$store.commit('auth/SET_PRIVATE_KEY', privateKey);
        this.$router.go(-1);
      } catch (error) {
        console.error('密钥生成失败:', error);
      }
    }
  }
};
</script>

2.5 方案一优缺点总结

• 优点：概念简单，符合 E2EE，无需状态管理。
• 缺点：性能极差（RSA 慢），无前向保密性（私钥泄露则历史消息全泄露），密钥管理复杂（换设备无法同步旧消息），无法认证发送者。

结论：适用于学习原理或对安全要求不高、消息频率极低的场景，不推荐用于生产环境。

---

三、方案二：非对称加密 + 数字签名（增强身份验证）

3.1 方案概述与流程

此方案在方案一的基础上增加了数字签名，解决了发送者身份验证和消息完整性的问题。

流程（A 发消息给 B）：

1. A 生成消息明文 M。
2. A 使用 B 的公钥加密 M，得到密文 C。
3. A 使用自己的私钥对明文 M 的哈希进行签名，得到签名 S。
4. A 将 { cipherText: C, signature: S, senderId: A } 发送给服务器。
5. 服务器转发给 B。
6. B 收到后，使用 A 的公钥验证签名 S。如果验证失败，则丢弃消息。
7. 验证通过后，B 使用自己的私钥解密 C，得到明文 M。

3.2 前端 Vue 实现增强

在原有 crypto.js 工具类中添加签名和验证功能。

// utils/crypto.js (新增函数)
// 使用私钥对消息进行签名
export function signMessageWithPrivateKey(privateKeyPem, message) {
  try {
    const privateKey = forge.pki.privateKeyFromPem(privateKeyPem);
    const md = forge.md.sha256.create();
    md.update(message, 'utf8');
    const signature = privateKey.sign(md);
    return forge.util.encode64(signature);
  } catch (error) {
    console.error('签名失败:', error);
    throw new Error('消息签名失败');
  }
}

// 使用公钥验证签名
export function verifySignatureWithPublicKey(publicKeyPem, message, signatureBase64) {
  try {
    const publicKey = forge.pki.publicKeyFromPem(publicKeyPem);
    const md = forge.md.sha256.create();
    md.update(message, 'utf8');
    const signature = forge.util.decode64(signatureBase64);
    const isVerified = publicKey.verify(md.digest().getBytes(), signature);
    return isVerified;
  } catch (error) {
    console.error('验证签名失败:', error);
    return false;
  }
}

修改发送和接收消息的逻辑：

发送消息（增加签名）

async sendMessage() {
  // ... 获取接收者公钥、加密消息 (得到 encryptedContent) ...
  const privateKey = getPrivateKey(this.currentUser.id);
  const signature = signPlainTextWithPrivateKey(privateKey, this.newMessage.trim());
  const messagePayload = {
    receiverId: this.targetUser.id,
    type: 'text',
    content: encryptedContent,
    signature: signature,
    isEncrypted: true,
    timestamp: new Date().toISOString(),
  };
  // ... 发送 messagePayload ...
}

接收消息（增加验证）

async decryptMessage(message) {
  // ... 获取自己的私钥解密 (得到 decryptedContent) ...
  try {
    const senderPublicKeyResponse = await apiGetUserPublicKey(message.sender);
    const senderPublicKey = senderPublicKeyResponse.data.publicKey;
    const isSignatureValid = verifyPlainTextSignature(senderPublicKey, decryptedContent, message.signature);
    if (isSignatureValid) {
      message.decryptedContent = decryptedContent;
      message.signatureStatus = 'verified';
      this.$notify({ type: 'success', title: '解密成功', text: '消息签名验证通过' });
    } else {
      message.decryptedContent = decryptedContent + " [警告：签名验证失败，消息可能被篡改或来源不可信]";
      message.signatureStatus = 'invalid';
      this.$notify({ type: 'warning', title: '安全警告', text: '消息解密成功，但签名验证失败' });
    }
  } catch (error) {
    console.error('验证签名时出错:', error);
    message.decryptedContent = decryptedContent + " [错误：签名验证过程出错]";
    message.signatureStatus = 'error';
  }
}

3.3 后端 Java 实现增强

后端需要存储和转发签名。

1. 修改消息实体和 DTO

// ChatMessage 实体增加字段
@Column(columnDefinition = "TEXT")
private String signature; // 存储消息的数字签名 (Base64 编码)

// Controller 中的 DTO 也要增加 signature 字段
public static class EncryptedMessageRequest {
    private Long senderId;
    private Long receiverId;
    private String content;
    private String signature; // 新增
    private String type;
    // getters and setters
}

3.4 方案二优缺点总结

• 优点：提供身份验证和不可否认性，提供完整性保护。
• 缺点：性能进一步下降（两次非对称操作），依然没有前向保密性，密钥管理问题依旧。

结论：解决了身份验证问题，但加剧了性能问题，且仍未解决前向保密这一核心安全缺陷。仍不推荐用于高频生产环境。

---

四、方案三：混合加密系统（推荐生产方案）

4.1 方案概述与流程

这是现代安全通信的标准模型，完美结合了非对称加密和对称加密的优点。核心思想是：使用非对称加密安全地交换一个临时的对称密钥，然后使用这个对称密钥来加密实际的消息。

核心概念：前向保密 (Forward Secrecy)

• 每次会话或定期更换对称密钥（称为会话密钥）。
• 即使攻击者破解了用户的长期私钥，也无法解密过去的通信记录，因为过去的会话密钥早已丢弃。
• 这是生产级 E2EE 系统的必备特性。

流程（A 发起与 B 的会话）：

1. 会话初始化：
   • A 生成一个随机的对称会话密钥 SK 和初始化向量 IV。
   • A 获取 B 的长期公钥。
   • A 使用 B 的公钥加密 (SK, IV)，得到密钥信封 Envelope。
   • A 将 Envelope 发送给 B。
2. 发送消息：
   • A 使用会话密钥 SK 和 IV，通过 AES 算法对消息明文进行对称加密，得到密文 C。
   • A 将密文 C 发送给 B。
3. 接收消息：
   • B 收到 Envelope 后，用自己的长期私钥解密，得到 SK 和 IV。
   • B 收到密文 C 后，使用 SK 和 IV 进行对称解密，得到明文。

4.2 前端 Vue 实现（重大修改）

我们需要一个全面的会话密钥管理机制。

1. 扩展加密工具类 crypto.js

// utils/crypto.js (新增混合加密函数)
// 生成随机的对称密钥和 IV (用于 AES-CBC 模式)
export function generateSymmetricKey() {
  const key = forge.random.getBytesSync(32); // AES-256 需要 32 字节的密钥
  const iv = forge.random.getBytesSync(16);  // AES-CBC 需要 16 字节的 IV
  return {
    key: forge.util.encode64(key),
    iv: forge.util.encode64(iv)
  };
}

// 使用对称密钥加密消息 (AES-CBC)
export function encryptWithSymmetricKey(keyBase64, ivBase64, message) {
  try {
    const key = forge.util.decode64(keyBase64);
    const iv = forge.util.decode64(ivBase64);
    const cipher = forge.cipher.createCipher('AES-CBC', key);
    cipher.start({ iv: iv });
    cipher.update(forge.util.createBuffer(message, 'utf8'));
    cipher.finish();
    const encrypted = cipher.output;
    return forge.util.encode64(encrypted.data);
  } catch (error) {
    console.error('对称加密失败:', error);
    throw new Error('消息加密失败');
  }
}

// 使用对称密钥解密消息 (AES-CBC)
export function decryptWithSymmetricKey(keyBase64, ivBase64, encryptedMessageBase64) {
  try {
    const key = forge.util.decode64(keyBase64);
    const iv = forge.util.decode64(ivBase64);
    const encryptedData = forge.util.decode64(encryptedMessageBase64);
    const decipher = forge.cipher.createDecipher('AES-CBC', key);
    decipher.start({ iv: iv });
    decipher.update(forge.util.createBuffer(encryptedData));
    const result = decipher.finish();
    if (result) {
      return decipher.output.toString('utf8');
    } else {
      throw new Error('解密失败：可能密钥或 IV 不正确');
    }
  } catch (error) {
    console.error('对称解密失败:', error);
    throw new Error('消息解密失败');
  }
}

// 使用公钥加密对称密钥（封装信封）
export function encryptSymmetricKeyWithPublicKey(publicKeyPem, symmetricKeyObj) {
  const keyDataStr = JSON.stringify(symmetricKeyObj);
  return encryptMessageWithPublicKey(publicKeyPem, keyDataStr);
}

// 使用私钥解密对称密钥（解封装信封）
export function decryptSymmetricKeyWithPrivateKey(privateKeyPem, encryptedEnvelope) {
  const decryptedKeyStr = decryptMessageWithPrivateKey(privateKeyPem, encryptedEnvelope);
  return JSON.parse(decryptedKeyStr);
}

2. 会话密钥管理 (Vuex Store)

// store/modules/chatSession.js
const state = {
  sessionKeys: {}, // { [targetUserId]: { key: '...', iv: '...', timestamp: ... } }
};

const mutations = {
  SET_SESSION_KEY(state, { userId, keyData }) {
    state.sessionKeys[userId] = { ...keyData, timestamp: Date.now() };
  },
  CLEAR_SESSION_KEY(state, userId) {
    delete state.sessionKeys[userId];
  },
  CLEAR_ALL_SESSIONS(state) {
    state.sessionKeys = {};
  },
};

const actions = {
  async establishSession({ commit, rootState }, targetUserId) {
    try {
      const symmetricKey = generateSymmetricKey();
      const publicKeyResponse = await apiGetUserPublicKey(targetUserId);
      const receiverPublicKey = publicKeyResponse.data.publicKey;
      const encryptedEnvelope = encryptSymmetricKeyWithPublicKey(receiverPublicKey, symmetricKey);
      await apiSendKeyExchange({ receiverId: targetUserId, encryptedEnvelope });
      commit('SET_SESSION_KEY', { userId: targetUserId, keyData: symmetricKey });
      return symmetricKey;
    } catch (error) {
      console.error('建立会话失败:', error);
      throw new Error('无法建立安全会话');
    }
  },
  async getOrCreateSessionKey({ state, dispatch }, targetUserId) {
    let keyData = state.sessionKeys[targetUserId];
    const isExpired = keyData && (Date.now() - keyData.timestamp > 3600000); // 1 小时过期
    if (!keyData || isExpired) {
      keyData = await dispatch('establishSession', targetUserId);
    }
    return keyData;
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

3. 修改聊天组件

// components/Chat.vue (重大修改)
methods: {
  async sendMessage() {
    if (!this.newMessage.trim()) return;
    try {
      // 1. 获取或创建与目标用户的会话密钥
      const sessionKeyData = await this.$store.dispatch('chatSession/getOrCreateSessionKey', this.targetUser.id);
      // 2. 使用对称密钥加密消息 (非常快)
      const encryptedContent = encryptWithSymmetricKey(
        sessionKeyData.key,
        sessionKeyData.iv,
        this.newMessage.trim()
      );
      // 3. 发送消息
      const messagePayload = {
        receiverId: this.targetUser.id,
        type: 'text',
        content: encryptedContent,
        isEncrypted: true,
        isSymmetric: true,
        timestamp: new Date().toISOString(),
      };
      this.websocket.send(JSON.stringify(messagePayload));
      // 4. 乐观更新 UI
      this.messages.push({
        id: Date.now(),
        sender: this.currentUser.id,
        senderName: '我',
        encryptedContent: '**消息已加密发送**',
        decryptedContent: this.newMessage.trim(),
        timestamp: '刚刚',
      });
      this.newMessage = '';
    } catch (error) {
      console.error('发送消息失败:', error);
      this.$notify({ type: 'error', title: '发送失败', text: '加密或发送消息时出错' });
    }
  },
  async handleIncomingMessage(messageData) {
    const newMsg = {
      id: messageData.id,
      sender: messageData.senderId,
      senderName: messageData.senderName,
      encryptedContent: messageData.content,
      decryptedContent: null,
      isSymmetric: messageData.isSymmetric,
      timestamp: new Date(messageData.timestamp).toLocaleTimeString(),
    };
    // 如果是对称加密消息，并且我们有会话密钥，尝试自动解密
    if (newMsg.isSymmetric) {
      const sessionKey = this.$store.state.chatSession.sessionKeys[newMsg.sender];
      if (sessionKey) {
        try {
          newMsg.decryptedContent = decryptWithSymmetricKey(
            sessionKey.key,
            sessionKey.iv,
            newMsg.encryptedContent
          );
        } catch (decryptError) {
          console.error('自动解密失败:', decryptError);
          newMsg.decryptedContent = null;
        }
      }
    }
    this.messages.push(newMsg);
  },
  async handleKeyExchangeMessage(messageData) {
    if (messageData.type === 'key_exchange') {
      try {
        const privateKey = getPrivateKey(this.currentUser.id);
        const decryptedKeyData = decryptSymmetricKeyWithPrivateKey(privateKey, messageData.encryptedEnvelope);
        this.$store.commit('chatSession/SET_SESSION_KEY', {
          userId: messageData.senderId,
          keyData: decryptedKeyData,
        });
      } catch (error) {
        console.error('处理密钥交换消息失败:', error);
      }
    }
  },
},

4.3 后端 Java 实现

后端需要处理两种类型的消息：key_exchange 和普通的 text 消息。

@PostMapping("/message")
public ResponseEntity<Void> sendMessage(@RequestBody MessageRequest request) {
    // ... 身份验证 ...
    ChatMessage message = new ChatMessage();
    message.setSenderId(request.getSenderId());
    message.setReceiverId(request.getReceiverId());
    message.setContent(request.getContent());
    message.setSignature(request.getSignature());
    message.setIsEncrypted(request.getIsEncrypted());
    message.setMessageType(request.getType());
    message.setTimestamp(Instant.now());
    messageRepository.save(message);

    MessageDeliveryDto deliveryDto = new MessageDeliveryDto();
    // ... 填充字段 ...
    deliveryDto.setType(request.getType());
    messagingTemplate.convertAndSendToUser(
        request.getReceiverId().toString(),
        "/queue/messages",
        deliveryDto
    );
    return ResponseEntity.ok().build();
}

public static class MessageRequest {
    private Long senderId;
    private Long receiverId;
    private String content;
    private String signature;
    private Boolean isEncrypted;
    private String type; // "text", "key_exchange", "image", etc.
    // getters and setters
}

4.4 高级特性：双工密钥协商与 Perfect Forward Secrecy

上面的实现是 A 生成密钥给 B，是单向的。更安全的做法是双方各自生成一个密钥种子，通过 Diffie-Hellman 密钥交换协议协商出一个共享的会话密钥。这可以实现完全的前向保密。

使用 ECDH（椭圆曲线 Diffie-Hellman）

1. A 和 B 各自生成临时的 ECC 密钥对。
2. A 将自己的临时公钥发送给 B。
3. B 将自己的临时公钥发送给 A。
4. A 用自己的临时私钥和 B 的临时公钥计算共享密钥。
5. B 用自己的临时私钥和 A 的临时公钥计算共享密钥。
6. 双方用这个共享密钥派生出的对称密钥进行通信。
7. 会话结束后，双方立即销毁临时的 ECC 密钥对和会话密钥。

// 概念性代码，使用 libsodium.js
import sodium from 'libsodium-wrappers';
await sodium.ready;

// A 和 B 各自生成临时密钥对
let keyPairA = sodium.crypto_kx_keypair();
let keyPairB = sodium.crypto_kx_keypair();

// A 计算共享密钥
let sharedKeyA = sodium.crypto_kx_client_session_keys(keyPairA.publicKey, keyPairA.privateKey, keyPairB.publicKey);
// B 计算共享密钥
let sharedKeyB = sodium.crypto_kx_server_session_keys(keyPairB.publicKey, keyPairB.privateKey, keyPairA.publicKey);

// sharedKeyA.rx === sharedKeyB.tx
// sharedKeyA.tx === sharedKeyB.rx
// 双方现在有两个密钥：一个用于发送，一个用于接收

4.5 方案三优缺点总结

• 优点：高性能（对称加密），前向保密性，高安全性。
• 缺点：实现复杂度最高，需要管理会话状态。

结论：方案三是唯一推荐用于生产环境的方案。它提供了最佳的性能和安全特性平衡，是现代 E2EE 应用的标准做法。

---

五、部署、测试与安全最佳实践

5.1 密钥安全存储指南

• 长期私钥：不要明文存储在 localStorage 中。容易被 XSS 攻击窃取。推荐使用用户密码通过 PBKDF2 等 KDF 派生出一个密钥，用这个密钥对长期私钥进行加密后再存储。
• 会话密钥：可以存储在 Vuex 内存中，页面刷新即丢失（需要重新协商，增强了前向保密性）。如果希望刷新后保持会话，可以加密后存入 sessionStorage 或 IndexedDB。

5.2 传输安全

• 必须使用 HTTPS：所有 API 和 WebSocket 连接都必须通过 TLS 加密，防止中间人攻击窃取公钥或密文。
• 安全的 WebSocket：使用 wss:// 协议。

5.3 后端安全考虑

• 身份验证：所有 API 调用都必须有严格的身份验证（如 JWT）。
• 权限检查：在转发消息前，验证发送者 senderId 确实属于当前登录用户。
• 速率限制：对密钥交换和消息发送接口实施速率限制。

5.4 测试策略

1. 单元测试：测试每个加密/解密函数，确保其正确性。
2. 集成测试：测试两个客户端能否成功完成密钥交换，测试加密消息能否被正确解密。
3. 负载测试：模拟大量用户同时发送加密消息，测试系统的性能表现。

5.5 处理常见问题

• '无法解密'错误：引导用户检查密码或尝试重新建立会话。
• '签名无效'警告：明确告知用户消息可能不可信。
• 新设备登录：设计清晰的流程引导用户生成新密钥对。

---

六、总结与方案选择

特性	方案一：静态非对称	方案二：静态 + 签名	方案三：混合加密
安全性	低	中	高
性能	极差	非常差	优秀
前向保密	无	无	有
身份验证/完整性	无	有	有
实现复杂度	低	中	高
推荐场景	学习原型	低频场景	生产环境

对于任何严肃的、面向用户的 Web 版 IM 应用，请务必选择方案三（混合加密系统）。它虽然是实现起来最复杂的方案，但它是唯一能同时满足安全性、性能和用户体验要求的方案。