My Node application built with Express.js and Socket.io is facing an issue where they are not sharing the same session ID when running under iframe with different origins. When accessed directly or through iframes with the same origin, everything works fine with the session ID being shared seamlessly between HTTP and Socket.io. However, under iframes with different origins (parent and child), the shared session ID between Express.js and Socket.io fails to work, and I cannot see the cookie set in the Chrome browser's dev tools.
Both origins are non-secure HTTP websites; for example, from (parent) to (child). Since I publish my node backend with port 6175, I access the website directly without going through any web server.
Below is a snippet of the code:
Code snippet for setting up express-session:
const sessionMiddleware = session({
resave: true,
saveUninitialized: true,
secret: config.session.secretKey,
httpOnly: true,
ephemeral: true,
cookie: { maxAge: config.session.maxAge, secure: false, sameSite: "none", path: "/" },
store: new (FileStore(session))({
logFn: logger.info,
reapInterval: config.session.reapInterval,
})
});
app.use(sessionMiddleware);
Setting up additional middleware for Express.js:
app.use(cors());
app.options('*', cors());
app.use(helmet({ frameguard: false }));
app.use(compression());
app.use(bodyParser.json());
app.use(cookieParser());
Initializing Socket.io with express-session package:
this.io = new Server(server, {
cors: {
origin: '*',
methods: ["GET", "POST", "PUT", "DELETE"],
},
});
this.socket.io.use((socket, next) => {
sessionMiddleware(socket.handshake, {}, next);
});