Web 版 IM 聊天信息加密的三种实战方案

Vue 组件中使用

在发送消息时，先获取对方公钥再加密；接收时点击按钮触发解密。

<!-- components/Chat.vue -->
<template>
  <div>
    <div v-for="msg in messages" :key="msg.id" class="message">
      <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" 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);
      }
    },
    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);
      }
    },
    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>

后端 Java 实现

后端主要负责公钥存储和消息转发，不接触明文。

// User 实体
@Entity
@Table(name = "im_users")
@Data
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    @Column(columnDefinition = "TEXT")
    private String rsaPublicKey; // PEM 格式
}

// ChatMessage 实体
@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 Instant timestamp;
}

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

    @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("No 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.setTimestamp(Instant.now());
        messageRepository.save(message);

        String destination = "/queue/messages";
        MessageDeliveryDto deliveryDto = new MessageDeliveryDto();
        deliveryDto.setId(message.getId());
        deliveryDto.setSenderId(request.getSenderId());
        deliveryDto.setContent(request.getContent());
        messagingTemplate.convertAndSendToUser(request.getReceiverId().toString(), destination, deliveryDto);
        return ResponseEntity.ok().build();
    }
}

优缺点总结

• 优点：符合 E2EE，无需状态管理。
• 缺点：性能极差（RSA 慢），无前向保密性（私钥泄露则历史消息全暴露），多设备同步困难。
• 结论：仅适合学习原理，不推荐生产。

方案二：非对称加密 + 数字签名

在方案一基础上增加数字签名，解决身份验证和防篡改问题。

流程

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

前端增强

在 crypto.js 中增加签名和验签函数。注意签名通常是对明文哈希进行，避免循环依赖。

export function signPlainTextWithPrivateKey(privateKeyPem, plainText) {
  try {
    const privateKey = forge.pki.privateKeyFromPem(privateKeyPem);
    const md = forge.md.sha256.create();
    md.update(plainText, 'utf8');
    const signature = privateKey.sign(md);
    return forge.util.encode64(signature);
  } catch (error) {
    throw new Error('消息签名失败');
  }
}

export function verifyPlainTextSignature(publicKeyPem, plainText, signatureBase64) {
  try {
    const publicKey = forge.pki.publicKeyFromPem(publicKeyPem);
    const md = forge.md.sha256.create();
    md.update(plainText, 'utf8');
    const signature = forge.util.decode64(signatureBase64);
    return publicKey.verify(md.digest().getBytes(), signature);
  } catch (error) {
    return false;
  }
}

优缺点总结

• 优点：提供身份验证和完整性保护。
• 缺点：性能进一步下降，依然没有前向保密性。

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

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

核心优势：前向保密 (Forward Secrecy)

每次会话生成新的临时对称密钥。即使长期私钥泄露，过去的通信记录也无法解密，因为会话密钥已丢弃。

流程

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

前端 Vue 实现

需要维护会话密钥状态（Vuex Store）。

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

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

const actions = {
  async establishSession({ commit, rootState }, targetUserId) {
    const symmetricKey = generateSymmetricKey(); // 生成随机 AES 密钥和 IV
    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;
  },
};

高级特性：ECDH 密钥协商

更安全的做法是使用椭圆曲线 Diffie-Hellman (ECDH)。双方各自生成临时密钥对，交换公钥后计算出共享密钥。这样即使长期私钥泄露，过去的会话也无法解密。

// 概念性代码，使用 libsodium.js
import sodium from 'libsodium-wrappers';
await sodium.ready;
let keyPairA = sodium.crypto_kx_keypair();
let keyPairB = sodium.crypto_kx_keypair();
let sharedKeyA = sodium.crypto_kx_client_session_keys(keyPairA.publicKey, keyPairA.privateKey, keyPairB.publicKey);
let sharedKeyB = sodium.crypto_kx_server_session_keys(keyPairB.publicKey, keyPairB.privateKey, keyPairA.publicKey);
// sharedKeyA.rx === sharedKeyB.tx

优缺点总结

• 优点：高性能（AES 快），具备前向保密性，安全性高。
• 缺点：实现复杂，需管理会话状态和密钥生命周期。
• 结论：唯一推荐用于生产环境的方案。

部署与安全最佳实践

1. 密钥存储：不要明文存 localStorage。建议用用户密码派生密钥加密私钥，或使用浏览器安全 API。
2. 传输安全：必须使用 HTTPS 和 WSS。
3. 后端防护：严格 JWT 验证，实施速率限制。
4. 测试策略：覆盖单元测试、集成测试及负载测试。

对于任何严肃的 Web IM 应用，请务必选择方案三。它平衡了安全性、性能和用户体验。