서로 다른 도메인 간 쿠키 공유

 

로컬 환경에서는 SNS 로그인 시 토큰이 쿠키에 잘 저장되어,

로컬로 연 백엔드 서버에 잘 전달이 되었습니다.

 

그런데, 배포를 하고나니 로그인 후 401 에러가 계속 발생하는 현상을 발견했습니다.

 

401 에러는 웹 서버가 요청된 리소스에 대한 유효한 인증 자격 증명이 없다고 판단했을 때 발생합니다. 즉, 사용자 인증이 필요하거나, 잘못된 인증 정보가 제공되었을 때 나타납니다.

 

찾아보니까, 엑세스 토큰이 전달되지 않아서 401에러가 발생했던 거 였습니다.

그러면 왜?? 로컬에서는 토큰이 잘 전달되었는데 배포를 하니까 전달이 되지 않았을까요??

 

정답은 도메인이 서로 달라서 였습니다.

 

제 서비스는 프론트 도메인과, 백엔드 서버의 도메인이 서로 다릅니다.

그렇기 때문에 쿠키가 제대로 전달이 되지 않아 서비스를 이용할 수 없었던 것 이었습니다.

 

해결하기

 

res.cookie('jwt_token', jwtToken, {
            httpOnly: true, // JavaScript에서 쿠키에 접근할 수 없도록 설정
            secure: process.env.NODE_ENV === 'production', // HTTPS에서만 쿠키 전송
            sameSite: 'lax', // CSRF 공격 방지
            maxAge: 24 * 60 * 60 * 1000 // 24시간
        });

 

제 경우, 로그인 부분 코드에서, sameSite: 'lax'로 되어 있어서,

도메인이 서로 다를 경우 쿠키가 전달되지 않았습니다.

 

sameSite 옵션은?

 

쿠키가 어떤 도메인에서만 사용할 수 있는지 설정할 수 있는 옵션은 Domain 옵션과 sameSite 옵션이 있습니다.

sameSite 옵션은 stirct, lax, none 3가지의 옵션이 존재합니다.

 

- strict : 반드시 같은 도메인에서만 사용 가능

- lax : 같은 도메인에서만 사용 가능하지만 유저가 링크로 바로 접속하는 경우 다른 도메인에서도 사용 가능

- none : 다른 도메인에소도 사용 가능, secure 옵션을 함께 사용해야 함.

 

 

코드를 다음과 같이 수정하니 정상적으로 쿠키가 프론트 서버에서 백엔드 서버로 전달되었습니다!

 

res.cookie('jwt_token', jwtToken, {
            httpOnly: true, // JavaScript에서 쿠키에 접근할 수 없도록 설정
            secure: process.env.NODE_ENV === 'production', // HTTPS에서만 쿠키 전송
            sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', // CSRF 공격 방지
            maxAge: 24 * 60 * 60 * 1000 // 24시간
        });