2021. 10. 5. 21:54ㆍ공부내용 공유하기
개발 환경에서 로그인 상태가 유지되지 않는 현상이 발생하고 있다.
백엔드에서 세션 정보를 Cookie로 관리하고 있는데, 첫 로그인 이후 Set-Cookie 헤더가 제대로 동작하지 않아 발생하는 문제였다.
Set-Cookie 헤더에 도메인 정보가 붙어서 오고 있기 때문에, 현재 로컬에서는 mac의 hosts 파일을 수정해서 쿠키를 안착시키고 있었다.
Set-Cookie: mdJsessionId=세션아이디; Domain=.example.co.kr; Expires=Tue, 05-Oct-2021 13:41:28 GMT; Path=/; HttpOnly
그런데 왜! 갑자기 쿠키가 안 붙는것인지... 크롬 업데이트 이후로 추정되어 쿠키 관련 정책 변경사항들을 찾아보았다.
FE개발자의 성장 스토리 06 : 2021년 Chrome의 새로운 변화 - Schemeful same-site을 대응하자
안녕하세요. FE플랫폼팀 피터입니다 :) 제가 소속된 FE플랫폼팀에서는 Chrome 업데이트 사항 중 사용자에게 영향을 미치는 기능을 리서치 후 사내 크루들에게 공유하고는 합니다. 이번에는 2021년 1
tech.kakao.com
http / https 프로토콜이 다른 동일한 도메인의 경우, 기존에는 same-site로 간주하던 부분을 업데이트 이후엔 cross-site로 간주한다.
즉, 크롬 보안정책이 변경되었다는 내용이다.
그렇다면 로컬 환경에서도 api 서버와 동일 프로토콜인 https로 서빙을 하면 쿠키가 무사히 붙을 것이다.
How to Create Your Own SSL Certificate Authority for Local HTTPS Development
Learn how to create your own Certificate Authority for your local servers so that you can run HTTPS locally without issue.
deliciousbrains.com
로컬 환경에서 사용할 수 있게끔 SSL 인증서를 만들고, Caddy를 통해 serving하는 방식을 사용했다.
openssl rsa -in dev.example.co.kr.key -out dev.example.co.krdecrypted.key# Frontend Address Configuration
dev.example.co.kr:3030 {
tls /cert/ca/dev.example.co.kr.crt /cert/ca/dev.example.co.kr.decrypted.key
reverse_proxy localhost:3000 {
}
}$ caddy run --config Caddyfile
이제 https://dev.example.co.kr:3030 으로 접속 후 로그인을 하게 되면, 쿠키가 잘 붙으면서 정상적으로 로그인 상태가 유지되는 것을 확인 할 수 있다.