[Cookie] 브라우저가 쿠키 저장에 실패한다면

안녕하세요 :)

 

하루종일 쿠키문제로 시달리다가 겨우겨우 문제를 해결했네요 ㅠㅠ

혹시나 관련해서 문제를 겪고 있는 분들에게 도움이 되길 바라며 포스팅을 올립니다.

 

분명 서버로부터 Set-Cookie에 쿠키가 담겨 응답이 왔는데 브라우저 개발자 도구에서 쿠키가 보이지 않는다면,

아래처럼 오른쪽에(크롬기준) 경고 표시가 없는지 살펴보시길 바랍니다.

 

경고 표시 위에 커서를 올리면 자세한 설명이 나오는데요, 저의 경우 아래와 같은 경고문이 나왔습니다.

 

This Set-Cookie header didn't specify a "SameSite" attribute and was blocked because it conform a cross-site repsonse which was not the response to a top-level navigation. The Set-Cookie had to have been set with "SameSite = None" to anable cross-site usage.

 

위 문제를 풀기 위해서는 아래 두 개념을 이해해야 합니다.

• same-site
• cross-site

여기서 cross-site란 쉽게 말해 서로 다른 도메인으로부터 쿠키가 넘어왔다는 의미입니다.

예를 들어 같은 로컬 호스트상의 서버 "locallhost:8000"에서 "localhost:3000"으로 쿠키를 전송한다면 같은 도메인으로부터 전송되었으니 same-site입니다. 하지만 apple.com 서버에서 banana.com으로 쿠키를 전송한다면 서로 다른 도메인으로부터 전송되었기 때문에 cross-site가 되는 것입니다.

 

쿠키에는 보안을 위한 여러 플래그(설정)를 붙일 수 있는데, same-site란 해당 쿠키가 같은 도메인에서만 사용가능한 것인지 아니면 다른 도메인에서도 사용가능한지를 설정할 수 있는 플래그 입니다.

 

서버 쪽에서 온 쿠키를 살펴보니 "SameSite" 설정이 없는 상태였습니다. 만약 SameSite 설정이 없다면 크롬기준으로 자동 "SameSite = Lax"로 인식하게 됩니다. Lax란 안전 하다고 판단되는 요청에만 쿠키 사용이 가능하도록 설정하는 것입니다. 자세한 사항은 다른 페이지들에서 잘 설명이 되어있는데, 요지는 "post" 요청이고 cross-site 요청이라면 쿠키는 사용할 수 없는 것입니다. 그렇기 때문에 크롬에서는 쿠키를 헤더에 받아 왔더라도 브라우저에 저장하기를 거부한 것이죠.

 

따라서, cross-site에서도 사용해도 된다는 의미로 "SameSite = None" 설정을 쿠키에 넣어서 보내주면 문제는 해결되는 것.... 같지만 여기서 또다른 문제가 생깁니다. "SameSite = None"으로 설정하면 보안상 취약하다는 문제입니다. 다른 도메인에서도 사용할 수 있으니 CSRF 공격에 노출되게 됩니다. 그래서 크롬과 같은 브라우저에서는 "SameSite = None"이 설정된 쿠키는 "Secure = true" 설정을 강요합니다.

 

"Secure = true"의 의미는 해당 쿠키는 https 통신에서만 사용할 수 있다는 설정입니다. 안타깝게도 제가 작업하던 로컬호스트의 경우 http 통신을 이용하고 있었기 때문에 "Secure = true"가 들어간 쿠키를 사용할 수 없었습니다. 결국 https 환경에 코드를 배포해 테스트하는 수밖에 없었습니다.

 

따라서 위 문제가 발생한다면 백엔드에 아래 설정을 추가해 줄 것을 요청하면 됩니다.

 

httpOnly: true
same-site: None
secure: true