쿠키와 samesite ( Devlog 9일차)

EenSung Kim·2021년 7월 27일
0
post-custom-banner

"하나를 해결하면 또 다른 문제가"


쿠키로 토큰 전달하기

가장 처음 인증에 대해 배우면서 토큰을 접했을 때, Access Token 과 Refresh Token 을 각각 다른 방법으로 클라이언트에 전달했었습니다. res.body 에 담아 전달하는 방법과 res.cookie 를 활용해 전달하는 방법이었죠.

여러가지 이유로 두 토큰을 다 쿠키에 담아 보내기로 결정이 되고, 코드를 수정해 쿠키에 담아 보내는 데는 성공했습니다. 개발 단계에서 localhost 를 사용할 때는 문제가 없었는데 배포 단계에서 잘 돌아가는지 확인하다 보니 문제점을 발견할 수 있었습니다. 개발 단계에서의 주소와 배포 단계에서의 주소가 서로 cross-site 가 되었기 때문입니다.

크롬은 보안 상의 이유로 쿠키를 전송할 때, samesite=lax Attribute 를 기본값으로 가지고 있습니다. 만약 이 어트리뷰트의 옵션을 none 으로 설정하려면 secure=true 어트리뷰트를 같이 설정해주어야 하죠. secure 어트리뷰트를 true 로 설정하게 되면 https 프로토콜에서만 쿠키를 전송할 수 있게 됩니다. 상호간의 도메인을 지정해주지 않고 samesite=none 을 활용하고 싶다면 https 를 사용하는 수 밖에 없죠.

쿠키로 토큰을 전달하는 거야 뭐 어려운 건 아니지 싶었다가 부랴부랴 https 를 세팅하기 시작했습니다. 지난번 배포 과정때도 그랬지만 중간에 기다리는 시간이 너무 길게만 느껴지네요. 언제 되는지 몰라서 답답한 마음도 크구요.

프로젝트 과정을 통해서 기존에 배웠던 것들을 많이 복습하게 되고, 다시 찾아보게 되는 것 같습니다. 프로젝트때 많이 배우게 된다더니 정말 그런 것 같네요.


samesite=none, secure=true

Set-Cookie 헤더에 관해서는 다음의 mdn 문서를 참고하실 수 있습니다.

samesite=nonesecure=true 옵션과 함께 적용해야 한다.
secure=true 옵션을 쓰게 되면 https 로만 쿠키를 보낼 수 있다.
결국 쿠키를 쓰려면 https 는 선택이 아닌 필수에 가깝다.

위의 점이 오늘의 삽질을 통해 배운 결론이 아닐까 합니다.

profile
iOS 개발자로 전직하기 위해 공부 중입니다.
post-custom-banner

0개의 댓글