跨源iframe下Express.js与Socket.io的Session ID共享问题

问题场景 #

基于Express.js和Socket.io开发的Node应用，在无iframe或同域iframe环境中Session ID可正常共享，但在跨源iframe（父页面http://ip.ad.dr.ess/，子页面http://ip.ad.dr.ess:6175/，二者同IP不同端口，属于不同源）场景下，Session ID共享失效，Chrome调试工具无法看到对应Cookie。服务为非安全HTTP网站，直接通过端口6175发布，未经过Web服务器。

核心问题分析 #

跨源Cookie共享失效主要源于浏览器同源策略限制，结合当前代码配置，存在以下关键问题：

1. sameSite: "none" 强制要求Cookie的secure属性为true（仅HTTPS环境支持），但当前服务为HTTP，浏览器会拒绝存储此类Cookie
2. CORS配置未开启凭据支持，且使用通配符*作为origin，导致跨域请求无法携带Cookie
3. Socket.io的session中间件未正确传递响应对象，无法完成Cookie的设置与传递

具体修复步骤 #

1. 修正express-session的Cookie配置 #

调整Cookie的sameSite属性，并设置统一的domain，确保同域名下不同端口的页面能共享Cookie：

const sessionMiddleware = session({
  resave: false, // 优化：避免无意义的session存储更新
  saveUninitialized: false, // 优化：仅在session有修改时才初始化存储
  secret: config.session.secretKey,
  httpOnly: true,
  ephemeral: true,
  cookie: {
    maxAge: config.session.maxAge,
    secure: false, // HTTP环境下必须设为false
    sameSite: "lax", // 适配跨源iframe场景，允许同domain不同端口共享Cookie
    path: "/",
    domain: "ip.ad.dr.ess" // 设置为父页面的域名，统一Cookie的作用域
  },
  store: new (FileStore(session))({
    logFn: logger.info,
    reapInterval: config.session.reapInterval,
  })
});

app.use(sessionMiddleware);

2. 调整CORS配置，开启凭据支持 #

替换原默认CORS配置，明确指定允许的源并开启credentials：

// 替换原app.use(cors())和app.options('*', cors())
app.use(cors({
  origin: "http://ip.ad.dr.ess", // 明确指定父页面的源，不可用*（与credentials冲突）
  credentials: true, // 允许跨域请求携带Cookie等凭据
  methods: ["GET", "POST", "PUT", "DELETE"]
}));
app.options("http://ip.ad.dr.ess", cors()); // 针对父页面源处理OPTIONS预检请求

3. 修正Socket.io的配置与Session中间件挂载 #

确保Socket.io的CORS开启凭据支持，并正确传递请求/响应对象到session中间件：

this.io = new Server(server, {
  cors: {
    origin: "http://ip.ad.dr.ess", // 匹配父页面源
    credentials: true, // 允许握手请求携带Cookie
    methods: ["GET", "POST", "PUT", "DELETE"]
  }
});

// 正确挂载session中间件，传递完整的request和response对象
this.io.use((socket, next) => {
  sessionMiddleware(socket.handshake.request, socket.handshake.response, next);
});

4. 前端iframe加载注意事项 #

父页面加载子iframe时，避免设置限制Cookie传递的sandbox属性；若必须使用sandbox，需添加对应权限：

<!-- 父页面中的iframe -->
<iframe src="http://ip.ad.dr.ess:6175/"></iframe>

<!-- 若使用sandbox属性 -->
<iframe src="http://ip.ad.dr.ess:6175/" sandbox="allow-same-origin allow-credentials"></iframe>

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