skip to Main Content

My application uses Angular for the front end and nodejs rest API to connect to MongoDB. I have my nodejs server application running on a nginx container with its nginx.conf config as:

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html/resume/browser;  
        try_files $uri $uri/ /index.html =404;
    }

    location /server {
        proxy_pass http://localhost:8083; # Pointing to your server
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    location /socket.io/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8083;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

The nodejs application uses socket.io. I deployed the application using docker and an nginx container and everything worked fine locally. I moved these same settings to AWS fargate, had the security group, ALB listener, and targets set up, everything worked fine, I could reach it on port 80, and my server on port 8083 using ALB target condition, "/server". My app showed up, but the issue is my socket.io says it’s connected but I see nothing. Then I learnt I should make the targets sticky, which I did, still had no errors but then I noticed this hidden error:

Mark cross-site cookies as Secure to allow setting them in cross-site contexts
Cookies marked with SameSite=None must also be marked with Secure to allow setting them in a cross-site context. This behavior protects user data from being sent over an insecure connection.
Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be set by cross-site requests.
1 cookie
Name    Domain & Path
AWSALBCORS  alb-ecs-service-957069708.us-east-2.elb.amazonaws.com/
202 requests
 ?userId=652f52d831c270a6dbee2323&EIO=4&transport=polling&t=Okt6Ilb
 ?userId=652f52d831c270a6dbee2323&EIO=4&transport=polling&t=Okt6JZu
 ?userId=652f52d831c270a6dbee2323&EIO=4&transport=polling&t=Okt6KiM
 ...

I have tried the following and nothing works
Socket.io client side

connectSocket(userId: string): void {
    this.socket = io(this.BASE_URL, {
      query: {
        userId: userId
      },
       withCredentials: true
    });
    
    console.log("here check", this.socket);
    const COOKIE_NAME = "AWSALB";//AWSALBCORS
    const COOKIE_NAME_CORS = "AWSALBCORS";//
    // Needed for ALB samesite cookie support issues
    this.socket.io.on("open", () => {
      this.socket.io.engine.transport.on("pollComplete", () => {
        const request = this.socket.io.engine.transport.pollXhr.xhr;
        const cookieHeader = request.getResponseHeader("set-cookie");
        if (!cookieHeader) {
          return;
        }
    
        const extraCookies: Record<string, string> = {}; 
        const COOKIE_NAME = "AWSALB"; 
    
        cookieHeader.forEach((cookieString: string) => {
          console.log(cookieString);
          if (cookieString.includes(`${COOKIE_NAME}=`)) {
            const cookie = parse(cookieString);
            extraCookies[COOKIE_NAME] = cookie[COOKIE_NAME];
          }
        });
    
        this.socket.io.opts.extraHeaders = {
          ...this.socket.io.opts.extraHeaders,
          cookie: Object.entries(extraCookies)
            .map(([key, value]) => `${key}=${value}`)
            .join("; "),
        };
      });
    });
    
  }
...

and on the server:
socket.io server side

 this.socket = socketio(this.http, {
      cookie: {
        sameSite: 'none',
        secure: false  // Should be false for HTTP, true for HTTPS in production
      },
      cors: {
        origin: "*",
        // origin: config.FRONTEND_URI || 'http://localhost:4200',
        methods: ["GET", "POST"],
        credentials: true
      }
    })

Nothing works, I have been working on this for 5 days with over 100 resources and I still can find a fix. Any help is appreciated.

Update

After making some new changes I now get this error:
Refused to get unsafe header "set-cookie", its not setting the AWSALB as the cookie at this line of code:


const cookieHeader = request.getResponseHeader("set-cookie");

2

Answers


  1. Chosen as BEST ANSWER

    it finally worked in my buildspec.yml, all I did was provide the DNS and let socket io use the default path /socket.io/ in nginx without setting path in both client and server


  2.  this.socket = socketio(this.http, {
      cookie: {
        sameSite:'None',
        secure: false  // Should be false for HTTP, true for HTTPS in production
      },
     ......
    })
    

    I am considering you are running application in development mode so that you might have kept secure: false otherwise set to true.

    Try to change the sameSite:’None’ and see the result

    Thank you

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search