Next.js中GraphQL订阅（WebSocket）认证的最优实现方案咨询

方案2（自定义Express服务器）：最优选择 #

方案2完全契合你当前的安全架构——JWT仅在服务器端流转，不会暴露给客户端，彻底规避方案1的JWT泄露风险。具体实现步骤如下：

1. 替换默认Next.js服务器为Express #

创建server.js整合Express、Next.js和WebSocket代理：

const express = require('express');
const next = require('next');
const { createServer } = require('http');
const { WebSocketServer } = require('ws');
const { getSession } = require('@auth0/nextjs-auth0');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const expressApp = express();
  const server = createServer(expressApp);

  // 启用无服务器模式的WebSocket服务，便于自定义升级逻辑
  const wss = new WebSocketServer({ noServer: true });

  // 处理WebSocket升级请求，服务器端获取Auth0 JWT
  server.on('upgrade', async (req, socket, head) => {
    // 通过Auth0 SDK获取用户会话中的访问令牌
    const session = await getSession(req, expressApp.response);
    if (!session?.user?.accessToken) {
      socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
      socket.destroy();
      return;
    }

    // 将JWT注入请求头，转发给后端GraphQL服务
    req.headers['authorization'] = `Bearer ${session.user.accessToken}`;
    wss.handleUpgrade(req, socket, head, (ws) => {
      wss.emit('connection', ws, req);
    });
  });

  // 双向代理WebSocket消息到后端GraphQL Pod
  wss.on('connection', (clientWs, req) => {
    const backendWs = new WebSocket('ws://your-graphql-service:port/graphql', {
      headers: req.headers
    });

    // 转发客户端消息到后端
    clientWs.on('message', (data) => backendWs.send(data));
    // 转发后端消息到客户端
    backendWs.on('message', (data) => clientWs.send(data));

    // 同步连接状态
    clientWs.on('close', () => backendWs.close());
    backendWs.on('close', () => clientWs.close());
  });

  // 处理Next.js页面路由
  expressApp.all('*', (req, res) => handle(req, res));

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

2. 调整启动脚本 #

修改package.json中的启动命令，使用自定义服务器：

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

3. Kubernetes部署适配 #

无需修改现有Ingress配置，WebSocket请求会通过同一端口的HTTP升级请求完成转发，保持Next.js服务为唯一对外暴露的入口。

其他可行替代方案 #

合并GraphQL订阅请求 #

如果业务逻辑允许，将多个并行订阅合并为一个聚合订阅字段。后端一次性返回多数据源的实时数据，客户端仅需维护一个SSE连接，绕过浏览器的6个并发SSE限制，同时保留中间件注入JWT的安全模式。

Nginx Ingress配合Sidecar代理 #

在Kubernetes中配置Nginx Ingress支持WebSocket升级，同时部署一个Sidecar容器（如Envoy），从Next.js获取用户会话并注入JWT到后端WebSocket请求。不过该方案配置复杂度较高，不如自定义Express服务器直接可控。

方案1的风险提示 #

方案1中客户端持有JWT，存在XSS攻击导致令牌泄露的风险，一旦泄露，攻击者可直接调用后端API，违背了你最初“避免JWT暴露给客户端”的安全设计，不推荐长期使用。

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