chrome에서 set-cookie 작동하지 않을 때

현재 백엔드에서 set-cookie 해주는 response는 아래와 같다

access-control-allow-credentials: true
allow: POST, OPTIONS
connection: close
content-length: 21
content-type: application/json
date: Wed, 22 Feb 2023 03:04:31 GMT
referrer-policy: same-origin
server: gunicorn
set-cookie: access_token=value; expires=1:00:00; HttpOnly; Path=/; SameSite=None
set-cookie: refresh_token=value; expires=14 days, 0:00:00; HttpOnly; Path=/; SameSite=None
Vary: Accept, Origin, Accept-Encoding
x-content-type-options: nosniff
x-frame-options: DENY
X-Powered-By: Express

 

 

크롬에서는 제대로 쿠키가 설정되지 않고 아래 경고가 뜬다

Set-Cookie 헤더에 SameSite=None 속성이 Secrue 속성 없이 설정되어 있기 때문에 차단되었다고 적혀있다.

 

SameSite란

쿠키를 같은 사이트로 고려해야하는지 또는 같은 사이트에서만 사용할 수 있도록 제한할 수 있도록 설정할 수 있는 속성이다.

Lax

같은 도메인이 아니더라도 일부 경우(링크 이동) 허용

Strict

현재 브라우저의 URL과 쿠키의 도메인이 일치하는 경우에만 쿠키 전송 가능

None

Set-Cookie: SameSite=None; Secure

• 모든 경우에 접근 가능하다
• Secure 속성을 사용해야하고 사용하지 않을 경우 쿠키가 차단된다.
• Secure은 HTTPS으로 요청해야만 서버로 전송된다. 

 

크롬에서 쿠키 설정 방식

• 2020년 2월부터 SameSite의 기본 값이 None에서 Lax로 변경되었다. 
• SameSite=None으로 설정하는 경우에는 HTTPS 연결을 통해서만 설정할 수 있도록 Secure 속성을 사용해야한다
• http와 https를 연결은 크로스 사이트로 간주하기 때문에 같은 프로토콜을 사용해야한다.

구형 브라우저 호환성

구형 브라우저는 새로 바뀐 None 특성과 호환되지 않기 때문에 쿠키가 차단될 수 있다.

SameSite=None이 호환되지 않는 브라우저 목록

 

1. SameStie=None; Secure 쿠키와 없는 쿠키 모두 설정한다

Set-cookie: 3pcookie=value; SameSite=None; Secure
Set-cookie: 3pcookie-legacy=value; Secure

새 쿠키를 먼저 확인하고 없으면 기존 쿠키로 대체한다.

 

이 경우, 중복 쿠키를 설정해야한다는 단점이 있다.

 

2. Set-Cookie 헤더를 보내는 시점에 브라우저를 감지한다

브라우저를 감지하는 라이브러리 (ex. Node.js의 ua-parser-js 라이브러리)를 사용해서 지원하지 않는 브라우저인 경우에는 레거시 방법으로, 지원 브라우저는 새 쿠키 방식으로 설정해준다.

 

이 경우, 브라우저를 감지하는 것은 취약하고 모든 브라우저를 감지할 수 없을 수도 있다는 단점이 있다.

 

---

 

참고로 파이어폭스에서는 제대로 쿠키에 설정이 된다

파이어폭스는 Firefox 69부터 테스트 버전을 제공하고 있고 나중에 크롬과 같이 기본 동작으로 만들 예정이라고 한다.

 

 

 

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

SameSite cookies - HTTP | MDN

https://developers.google.com/search/blog/2020/01/get-ready-for-new-samesitenone-secure?hl=ko 

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

https://web.dev/samesite-cookie-recipes/

SameSite 쿠키 레서피