如何安全获取Next.js服务端Http-Only Cookie令牌用于客户端Socket.io认证

1. 调整服务端Socket.io配置（关键：支持Cookie安全传递） #

首先修改Node.js服务端的CORS配置，由于要携带Http-Only Cookie，不能使用origin: "*"，需指定Next.js客户端的实际域名，同时开启凭证支持：

const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // 替换为你的Next.js客户端真实域名
    methods: ["GET", "POST"],
    credentials: true // 允许客户端携带Cookie
  }
});

2. 服务端Socket.io认证逻辑 #

在服务端监听连接事件时，直接从请求Cookie中提取authToken并完成验证，无需客户端手动传递token：

io.on('connection', (socket) => {
  // 从请求Cookie中解析authToken
  const authToken = socket.handshake.headers.cookie?.split('; ').find(item => item.startsWith('authToken='))?.split('=')[1];
  
  if (!authToken) {
    socket.disconnect(true); // 无有效token直接断开连接
    return;
  }

  // 执行你的token验证逻辑（比如JWT校验）
  try {
    const decoded = jwt.verify(authToken, '你的密钥');
    // 验证通过后可将用户信息挂载到socket对象，方便后续业务使用
    socket.user = decoded;
    console.log('用户认证成功:', decoded);
  } catch (err) {
    socket.disconnect(true); // token无效则断开连接
  }
});

3. 调整Next.js客户端Socket.io连接配置 #

客户端无需手动获取authToken，只需开启withCredentials: true，浏览器会自动将Http-Only Cookie传递给服务端：

const newSocket = io('http://localhost:8080', {
  withCredentials: true, // 自动携带Cookie，无需手动传入token
});

4. 核心安全说明 #

• 避免客户端读取token：Http-Only Cookie的核心设计就是禁止前端JS访问，防止XSS攻击窃取token。如果在客户端代码中主动获取token，会直接破坏这层安全防护。
• CORS配置约束：必须指定具体的origin，不能用通配符*，否则浏览器会拒绝携带Cookie；服务端的credentials: true必须和客户端的withCredentials: true对应。
• 额外加固措施：
  • 生产环境务必启用HTTPS，并给Cookie添加Secure属性（仅在HTTPS下传递）。
  • 设置Cookie的SameSite属性为Strict或Lax，降低CSRF风险。
  • 服务端验证token时，严格检查有效期、签名完整性，拒绝无效或伪造的token。

内容的提问来源于stack exchange，提问作者yeln