program/web(html,css)

쿠키 SameSite

momoa210 2024. 1. 27. 21:08

쿠키의 SameSite 옵션

쿠키에는 이 쿠키가 어떤 도메인에서만 사용할 수 있는지 설정할 수 있는 옵션이 있는데요. 바로 Domain 옵션과 SameSite라는 옵션입니다. 특히 SameSite 옵션은 다음과 같은 세 가지 값을 설정할 수 있습니다.

  • Strict: 반드시 같은 도메인에서만 사용 가능 (하위 도메인 포함)
  • Lax: 같은 도메인에서만 사용 가능하지만, 유저가 링크를 클릭해서 접속하거나 하는 경우에는 다른 도메인에서도 사용 가능 (기본 값)
  • None: 다른 도메인에서도 사용 가능. Secure 옵션과 함께 사용해야 함.

상황 1: SameSite=Strict를 사용하고 같은 도메인인 경우

예를들어서 codeit.kr이라는 사이트에서 api.codeit.kr이라는 백엔드 서버로 리퀘스트를 보내는 상황을 생각해 봅시다. 백엔드 서버에서는 리스폰스로 SameSite=Strict와 Domain=codeit.kr이라는 옵션으로 쿠키를 설정하려고 합니다.

  1. codeit.kr이라는 사이트에서 사용자가 api.codeit.kr라는 백엔드 서버로 리퀘스트를 보냅니다.
  2. 백엔드 서버는 리스폰스로 Set-Cookie 헤더를 보내는데, SameSite=Strict와 Domain=codeit.kr이라는 옵션으로 쿠키를 설정해서 보내줍니다.
  3. 웹 브라우저는 리퀘스트를 보냈던 주소(api.codeit.kr)의 도메인과 쿠키에 적혀있는 도메인(codeit.kr)이 일치하는지 확인합니다. 일치한다고 판단하면, SameSite=Strict 조건을 만족하기 때문에 쿠키를 저장합니다.

상황 2: SameSite=Strict를 사용하지만 다른 도메인인 경우

반대로 만약 codeit.kr 이라는 사이트에서 api.example.com라는 백엔드 서버로 리퀘스트를 보내는 상황을 생각해 봅시다. 백엔드 서버에서는 리스폰스로 SameSite=Strict와 Domain=example.com 이라는 옵션으로 쿠키를 설정하려고 합니다.

  1. codeit.kr이라는 사이트에서 사용자가 api.example.com이라는 백엔드 서버로 리퀘스트를 보냅니다.
  2. 백엔드 서버는 리스폰스로 Set-Cookie 헤더를 보내는데, SameSite=Strict와 Domain=example.com이라는 옵션으로 쿠키를 설정해서 보내줍니다.
  3. 웹 브라우저는 리퀘스트를 보냈던 주소(api.example.com)의 도메인과 쿠키에 적혀있는 도메인(example.com)이 일치하는지 확인합니다. 이 경우에는 도메인은 일치하지만 SameSite=Strict 조건을 만족하지 않는데요. 리퀘스트를 보낸 사이트의 도메인이 codeit.kr이기 때문에 그렇습니다. 그래서 쿠키를 저장하지 않습니다.

상황 3: SameSite=None을 사용하고 다른 도메인인 경우

반대로 만약 codeit.kr 이라는 사이트에서 api.example.com라는 백엔드 서버로 리퀘스트를 보내는 상황을 생각해 봅시다. 백엔드 서버에서는 리스폰스로 SameSite=None과 Domain=example.com 이라는 옵션으로 쿠키를 설정하려고 합니다.

  1. codeit.kr이라는 사이트에서 사용자가 api.example.com이라는 백엔드 서버로 리퀘스트를 보냅니다.
  2. 백엔드 서버는 리스폰스로 Set-Cookie 헤더를 보내는데, SameSite=None과 Domain=example.com이라는 옵션으로 쿠키를 설정해서 보내줍니다.
  3. 웹 브라우저는 리퀘스트를 보냈던 주소(api.example.com)의 도메인과 쿠키에 적혀있는 도메인(example.com)이 일치하는지 확인합니다. 이 경우에는 리퀘스트를 보내는 쪽의 도메인(codeit.kr)과 받는 쪽의 도메인(example.com)이 일치하지 않지만 SameSite=None 옵션 덕분에 쿠키를 저장하게 됩니다.

3자 쿠키(Third-Party Cookie)

위의 상황 3처럼 리퀘스트를 보내는 쪽과 받는 쪽이 도메인이 다를 때 저장하는 쿠키를 3자 쿠키(Third-Party Cookie)라고 합니다. 3자 쿠키는 과거에 문제가 많았습니다. 간혹 백엔드 개발자가 쿠키의 SameSite 설정을 제대로 하지 않은 경우 해커가 다른 도메인으로 피싱 사이트를 만들고 거기서 쿠키를 탈취할 수 있었기 때문이죠. 예를들어서 누가 가짜 코드잇 사이트를 만들어서 fakecodeit.kr이라는 사이트에서 로그인을 하면 fakecodeit.kr에서 codeit.kr 로 리퀘스트를 보내겠죠? 이때 원치않게 진짜 코드잇 사이트에서 발급한 쿠키가 저장되어버린다면 해커는 이 쿠키를 훔쳐서 실제 codeit.kr 사이트로 들어와서 나쁜 짓을 할 수 있게 됩니다.

그래서 구글 크롬에서는 2020년 쿠키의 기본 동작에 대한 변경을 발표했는데요. 과거에는 아무런 옵션을 지정하지 않더라도 3자 쿠키로 동작할 수 있었지만 이제는 3자 쿠키를 사용하려면 반드시 SameSite=None 옵션과 Secure라는 옵션을 쿠키에 설정해 주어야 합니다.

이때 Secure라는 옵션은 리퀘스트가 반드시 HTTPS인 경우에만 쿠키를 저장하겠다는 옵션입니다. 위의 상황 3에서 http://api.example.com으로 보낸 리퀘스트라면 3자 쿠키를 사용할 수 없습니다.

2023년 기준으로 SameSite 옵션을 설정하지 않으면 크롬 브라우저는 SameSite=Lax 옵션에서 조금 완화된 형태로 기본 동작을 하고 있지만, 2024년부터 점진적으로 좀 더 엄격한 규칙을 적용할 예정이라고 하네요. 혹시 이것에 대해 더 궁금하신 분들은 아래 참고자료를 참고해 보시는 것도 좋을 것 같습니다.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value

 
 

'program > web(html,css)' 카테고리의 다른 글

[html] video tag  (0) 2024.02.03
[html] 테이블  (0) 2024.02.03
[css]캐스케이드(Cascade)  (0) 2024.02.03
[CSS] 선택자 (전체, 자식)  (0) 2024.01.29
[css]CSS 선택자(CSS Selector)  (0) 2024.01.28