Why didn't I need a reverse proxy to get my Socket.IO game to work?

[ltfschoen]

Hi all,

I'm reaching out for help because I created a p5.js game and made it multiplayer with Socket.IO recently.

I've actually got it fully working now in both development and production with HTTPS/WSS, but i'm trying to understand why i had to remove some things to make it work.

The questions I have are:

1. What does the error Socket.IO error: WebSocket connection to 'wss://mydomain.com:5000/socket.io/?EIO=4&transport=websocket' failed: One or more reserved bits are on: reserved1 = 1, reserved2 = 0, reserved3 = 0 really mean, what would be an example of reserved bits that i may have had on?

2. Why didn't I end up having to use a CSP in /etc/nginx/nginx.conf like add_header Content-Security-Policy "default-src 'self' 'unsafe-eval'; ... for it to all work?
   Note: there was a time when the reverse proxy was working, but with errors, and there was also times when i got frontend errors that required me to add to the CSP to overcome the errors like here https://github.com/ltfschoen/flappytips/pull/85/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R355, but after i got rid of the reverse proxy i didn't need the CSP at all

3. Why didn't I end up needing to create a reverse proxy with an upstream to make it work, basically it still all worked after i removed all the reverse proxy related code in this commit https://github.com/ltfschoen/flappytips/pull/85/commits/9a0f1b32120e10f6a5318f091348c49e0b1ae154 ?

4. Was it really necessary for me to update from Nginx 1.18 to 1.23.3? (i initially installed what i thought was the latest 1.18 with apt get nginx, but only discovered that the latest version was actually 1.23.3 when i went to https://nginx.org/en/download.html, where i eventually found the steps shown in the pre-built packages section https://nginx.org/en/linux_packages.html#Ubuntu)
   link to steps i took to update it: https://github.com/ltfschoen/flappytips/pull/85/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R401

5. Why in development environment does it use a path /ws at the end to send websocket requests from frontend ws://localhost:4000/ws (note: React is running on port 4000)? But for my game it sends websocket frames using path /socket.io on Express.js server port 5000 that i configured ws://localhost:5000/socket.io/?EIO=4&transport=websocket?
   link to relevant source code: https://github.com/ltfschoen/flappytips/pull/85/files#diff-c88344c6e4bf227643dd43cf6dce616d9f7d31c0b839f53c4ed0845e1f6cf37fR30
   Update: 22 Feb 2023: To overcome this error in development and use HPM (http-proxy-middleware library) i had to update
   server.js to remove use of the explicit path where i was just using socket.io library with the Express.js server for situations when i didn't need a proxy (since i was already using that explicit path of '/socket.io/' with HMP to proxy requests)

const io = require("socket.io")(httpServer, {
  transports: ["websocket"], // set to use websocket only
  // path: "/socket.io/",

then also on the server i was able to uncomment and use HPM using that '/socket.io/' endpoint so it would proxy the requests

const wsProxy = createProxyMiddleware({
    target: proxy_url,
    changeOrigin: true,
    ws: true,
    logger: console,
});
app.use('/socket.io/', wsProxy);

and lastly on the client frontend in sketch.js i had to add rejectUnauthorized: false since i noticed when debugging the websockets object in the chrome browser console that it was being set to true by default, even though .

const socket = io(socketEndpoint, {
   addTrailingSlash: true, // trailing slash of path
   path: "/socket.io/", // explicit custom path (default)
   withCredentials: false,
  rejectUnauthorized: false // allow self-signed certs
  ...

6. Why did I have to remove the following to make it work? I'm not using parcel, but could it be related to conflicting ports like in this sockets issue Proxying WebSocket connection not working parcel-bundler/parcel#7071 & WebSocket proxy fails if HMR is running on same port parcel-bundler/parcel#6994

// https://github.com/chimurai/http-proxy-middleware/blob/master/examples/websocket/index.js
httpServer.on('upgrade', wsProxy.upgrade); // optional: upgrade externally
...
// https://www.npmjs.com/package/http-proxy-middleware#external-websocket-upgrade
const wsProxy = createProxyMiddleware({
 	  target: proxy_url,
 	  changeOrigin: true,
 	  ws: true,
 	  logger: console,
});
...
app.use('/socket.io/', wsProxy);

links to relevant source code:

• https://github.com/ltfschoen/flappytips/pull/85/files#diff-a4c65ede64197e1a112899a68bf994485b889c4b143198bac4af53425b38406fR141
• https://github.com/ltfschoen/flappytips/pull/85/files#diff-a4c65ede64197e1a112899a68bf994485b889c4b143198bac4af53425b38406fR187

7. What changes would I need to make to that PR to get it to use the reverse proxy code here https://github.com/ltfschoen/flappytips/pull/85/files#diff-8f66e5a529d51d8d0afa6a1d38577b455507024335d087916f6f380290ddbacdR46 that didn't seem to help other than to introduce errors?

8. Could my incorrect use of a reverse proxy have caused this SSL error net::ERR_CERT_COMMON_NAME_INVALID mentioned here https://github.com/ltfschoen/flappytips/issues/82 (but the error only appeared USB debugging on an Android device, the error wasn't shown on desktop)? Could it have been because i need to use http-proxy options like option.secure option.ssl option.xfwd like mentioned here https://www.npmjs.com/package/http-proxy-middleware#external-websocket-upgrade

I've summarised the original issues here and what i did to solve it https://github.com/ltfschoen/flappytips/issues/84, and all the relevant code is published in this branch/PR https://github.com/ltfschoen/flappytips/pull/85

Any tips or links to further reading are greatly appreciated!