Web 端 IM 聊天信息加密的三种实现方案

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 {
        const publicKeyResponse = await apiGetUserPublicKey(this.targetUser.id);
        const receiverPublicKey = publicKeyResponse.data;
        const encryptedContent = encryptMessageWithPublicKey(receiverPublicKey, this.newMessage.trim());
        const messagePayload = {
          receiverId: this.targetUser.id,
          type: 'text',
          content: encryptedContent,
          isEncrypted: true,
          timestamp: new Date().toISOString(),
        };
        this.websocket.send(JSON.stringify(messagePayload));
        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);
    },
  },
};
</script>

2.2 后端 Java 实现（Spring Boot）

后端主要负责公钥存储和消息转发。

实体类

@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;
}

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) {
        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);

        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(),
            "/queue/messages",
            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
    }
}

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.3 优缺点总结

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

结论：适用于学习原理或低频场景，不推荐生产环境。

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

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

流程：

1. A 用 B 的公钥加密消息得到密文 C。
2. A 用自己的私钥对消息哈希进行签名得到 S。
3. A 发送 { cipherText: C, signature: S }。
4. B 收到后先用 A 的公钥验证签名，再用自己的私钥解密。

3.1 前端增强实现

在 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) {
    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);
    return publicKey.verify(md.digest().getBytes(), signature);
  } catch (error) {
    return false;
  }
}

修改发送逻辑，将签名加入 payload；修改接收逻辑，先验签再解密。

3.2 优缺点总结

• 优点：提供身份验证和不可否认性，继承 E2EE 优点。
• 缺点：性能进一步下降（两次非对称操作），依然没有前向保密性。

结论：解决了身份问题，但性能和前向保密性仍是瓶颈。

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

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

核心概念：前向保密 (Forward Secrecy) 每次会话更换临时对称密钥。即使长期私钥泄露，过去的通信记录因会话密钥已销毁而无法解密。

4.1 流程

1. 会话初始化：A 生成随机对称密钥 SK，用 B 的公钥加密 SK 得到信封 Envelope，发送给 B。
2. 发送消息：A 使用 SK 通过 AES 加密消息，发送给 B。
3. 接收消息：B 用私钥解密信封得 SK，再用 SK 解密消息。

4.2 前端 Vue 实现

扩展加密工具类

// 生成随机的对称密钥和 IV
export function generateSymmetricKey() {
  const key = forge.random.getBytesSync(32); // AES-256
  const iv = forge.random.getBytesSync(16);  // AES-CBC
  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();
    return forge.util.encode64(cipher.output.data);
  } catch (error) {
    throw new Error('消息加密失败');
  }
}

// 使用对称密钥解密消息
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('解密失败');
  } catch (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);
}

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];
  },
};

const actions = {
  async establishSession({ commit, rootState }, targetUserId) {
    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;
  },
  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;
  },
};

聊天组件修改

async sendMessage() {
  const sessionKeyData = await this.$store.dispatch('chatSession/getOrCreateSessionKey', this.targetUser.id);
  const encryptedContent = encryptWithSymmetricKey(sessionKeyData.key, sessionKeyData.iv, this.newMessage.trim());
  const messagePayload = {
    receiverId: this.targetUser.id,
    type: 'text',
    content: encryptedContent,
    isEncrypted: true,
    isSymmetric: true,
    timestamp: new Date().toISOString(),
  };
  this.websocket.send(JSON.stringify(messagePayload));
  this.newMessage = '';
}

async handleIncomingMessage(messageData) {
  if (messageData.isSymmetric) {
    const sessionKey = this.$store.state.chatSession.sessionKeys[messageData.senderId];
    if (sessionKey) {
      try {
        messageData.decryptedContent = decryptWithSymmetricKey(sessionKey.key, sessionKey.iv, messageData.content);
      } catch (e) { /* 处理错误 */ }
    }
  }
  this.messages.push(messageData);
}

4.3 高级特性：双工密钥协商

更安全的做法是使用 ECDH（椭圆曲线 Diffie-Hellman）进行双向密钥协商，实现完全的前向保密。双方各自生成临时 ECC 密钥对，交换公钥后计算共享密钥，会话结束后立即销毁临时密钥。

4.4 优缺点总结

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

结论：唯一推荐用于生产环境的方案。

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

5.1 密钥安全存储指南

• 长期私钥：不要明文存储在 localStorage 中。建议用用户密码派生出的密钥加密后再存储，或使用浏览器 window.crypto.subtle API。
• 会话密钥：可存内存，刷新即丢失以增强前向保密；若需持久化，加密后存入 IndexedDB。

5.2 传输安全

• 必须使用 HTTPS 和 WSS 协议。

5.3 后端安全考虑

• 严格身份验证（JWT）。
• 权限检查与速率限制。

5.4 测试策略

• 单元测试加密函数。
• 集成测试密钥交换与解密流程。
• 负载测试性能表现。

六、总结与方案选择

对于任何严肃的 Web 版 IM 应用，请务必选择方案三。它平衡了安全性、性能和用户体验，是现代 E2EE 应用的标准做法。