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
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
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