SameSite 관련 경고 해결

Local 환경에서의 https 테스팅 등 다른 내용과 함께 다시 글을 쓸 예정입니다.

 

---

 

SameSite 관련 문제

 

 

그런데 이 방식으로 진행한 경우 크롬 환경에서는 다음과 같은 오류를 뱉습니다.

 

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute

 

Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which will prevent the cookie from being sent in a cross-site request in a future version of the browser. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:

• Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use. (즉, SameSite를 None으로 놓고 Secure 설정하기)
• Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests (Lax로 놓고 예외 설정하기)

 

구글 크롬 80버전부터 새로운 쿠키 정책이 적용되어 Cookie의 SameSite 속성의 기본값이 None이 아니라 Lax로 변경되었습니다. 이 말은, SameStie를 따로 명시해주지 않으면 None으로 작동하는 것이 아니라 Lax로 작동한다는 것입니다.

 

SameSite는 말 그대로 쿠키 전송에 있어 '같은 사이트'인지 체크하는 것입니다.

Strict는 같은 사이트에서만 쿠키 전송, Lax는 허용한 사이트와 같은 사이트에서만, None은 모든 사이트에서를 의미합니다.

 

 

카카오톡 로그인을 한 이후 쿠키 부분을 살펴보면 SameSite가 None이거나 지정되지 않은 것을 볼 수 있는데, 지정되지 않은 부분이 미래에 문제가 될 수 있다는 것입니다.

 

크롬 뿐만 아니라 엣지, 파이어폭스에서도 이와 같은 SameSite 기본값을 Lax로 변경한다고 하니 이 부분은 확실히 짚고 가는 것이 좋겠습니다.

 

 

cookie-parser 설정을 통해 적절하게 해결하도록합시다.

 

www.npmjs.com/package/cookie

cookie

app.use(
  cookieParser(process.env.COOKIE_SECRET, { sameSite: "none", secure: true })
);

 

node 환경 외의 경우에는 아래 글을 참고해 해결합시다.

(https://web.dev/samesite-cookies-explained/?utm_source=devtools)

(https://ifuwanna.tistory.com/223)

(https://www.yceffort.kr/2020/01/chrome-cookie-same-site-secure/)