쿠키 저장 이슈를 통해 정리한 쿠키 옵션과 HTTPS로 리디렉션

개요

서버를 배포하고 나서 로그인을 시도해보던 중 에러가 발생했다.

 

Google OAuth를 사용하면서 원본 url이나 리다이렉트 url을 제대로 설정하지 않아서 생긴 오류인줄 알았는데 정상적으로 유저 정보도 저장되며 리다이렉트 url까지 문제없이 저장되고 있었다.

 

하지만 로그인을 확인하는 쿠키를 읽을 수 없어 발생했던 문제였고 구글 로그인과 유저 정보 저장까지 로그인 로직은 수행되는데 쿠키 정보만 저장되지 않는다는 것을 확인하고 쿠키 정보를 찾아보았다

 

네트워크 탭에 <쿠키>를 확인해보면 Set-cookie를 통해 쿠키가 만들어져서 들어오는 것을 확인했지만 저장이 되지 않았다.

이후 구글링을 해보았고 문제는 다음과 같았다

 

쿠키 옵션

[프로젝트] Cookie의 옵션

[Nest.js] 맨땅에 헤딩 - Blog API 제작기 6편

[Cookie]SameSite란? None, Lax, Strict

새로운 SameSite=None; Secure 쿠키 설정에 대비  |  Google 검색 센터 블로그  |  Google Developers

 

마지막 구글 공식문서까지 크로스체크해보면서 이 에러가 발생한 이유는 다음과 같다

 

구글에서 보안을 위해 사용자가 방문하는 사이트와 웹 페이지의 도메인이 일치하는 경우만 쿠키를 사용할 수 있고 다른 경우에는 따로 옵션값을 설정할 필요가 있었다.

 

나의 경우에는 클라이언트 도메인과 서버의 도메인이 일치하지 않아서 발생한 결과였다.

 

sameSite 옵션을 꺼야 다른 도메인간 쿠키를 저장할 수 있도록 허용해주는 것이었고 sameSIte옵션을 끈다면 secure 옵션을 넣어 http를 https로 설정해야할 필요가 있었다. 이 외에 값은 거의 보안과 관련된 것들이 많은데 그 중에서 도메인 옵션도 추가해줬다.

도메인 옵션은 쿠키가 어디로 가야하는지를 지정해줘서 그쪽에서만 사용할 수 있게 해주는 것이라고 한다.

 

https 설정하기

구글 클라우드 플랫폼(GCP) Compute Engine에 HTTPS 적용하기

GCP 호스팅 부터 HTTPS 까지 .... 2

 이전에 한번 해본적도 있고 좋은 자료들이 많아 금방 설정할 수 있었다.

 

여기서 조금만 정리해본다면

 

처음 그룹 인스턴스 세팅과 https 로드밸런싱, 백엔드, 프론트엔드 세팅이 있었다.

 

그룹 인스턴스는 옵션을 설정하면서 확인해본 결과 https 로드 밸런싱을 위해서 설정하게 되는데, 서버 부하를 분산시키기 위해 여러 인스턴스에 나누어 처리할 수 있도록 설정하는 부분이었고 프론트와 백엔드는 로드 밸런싱을 위한 옵션과 ssl인증을 처리하기 위해 필요한 부분이었고 첫번째 포스트를 보면 이해가 쉽다.

 

 

이후 서비스가 잘 실행되는 것도 확인했다!

 

회고

쿠키와 https로 도메인을 다시 변경해주는 작업은 내일 천천히 해결해야겠다.