1월28일 - cookie와 path 설정

개요

로그인 할 때 서버에서 res.cookie를 통해 저장하던 쿠키를

document.cookie로 프론트에서 저장하게끔 변경하고 난 뒤에

middleware 등 다른 여러 요청들에서도 server에서 직접 cookie를 설정하는 부분들이 있어

그 부분들을 수정하고 있었다.

 

그중 middleware에서 특이한 현상을 발견했다.

 

access token이 만료되고 refresh token을 통해 access token을 재발급 -> 

다시 메인 페이지로 

return res.render('index', {
  redirect: req.path,
  message: 'access token 재발급',
  accessToken: newAccessToken,
});

보낸 뒤

  <script>
  <% if (locals.accessToken) { %>
  document.cookie = 'accessToken=<%= locals.accessToken %>';
  location.href='<%= locals.redirect %>';
  <% } %>
  </script>

새로운 access token을 다시 저장 후 요청했던 path로 다시 재요청 하는 코드를 만들었는데

 

이상하게 자꾸 새로 저장했을 access token에 대해

인증이 만료되어 재발급을 받는 것이었다. 

 

원인 파악

하도 이상해서 

로그인 할 때 처음 access token을 저장하는 곳과

만료되어 refresh token을 통해 다시 재발급 받은 access token을 저장하는 곳에다가 

test=1, test=2 쿠키를 저장하게 해보았다.

 

내 생각대로면 test=1의 쿠키가 덮어씌워져 test=2만 있어야 됐는데 

test도 access token도 저장한 Path에 따라 따로 저장되고 있었다.

 

너무 충격 받아서 구글링 해보니 JavaScript 공식 사이트에 이런 문구가 있었다.

https://ko.javascript.info/cookie#ref-1479

어쩐지 로그아웃 처리하려고 cookie 지우는 방법을 검색하다 얼핏

path 설정을 따로 안해줘서 헤맸다는 글을 본 것 같았다.

 

이렇게 저장하는 곳과 다루는 곳의 path가 다르면 접근하는 cookie도 달라진다는걸 새롭게 알게 되었다.

 

문제 해결

document.cookie = `accessToken=${res.accessToken}; path=/;`;
document.cookie = `refreshToken=${res.refreshToken}; path=/;`;
document.cookie = `test=1; path=/;`;

cookie를 저장할 때 뒤에 path=/ 에 대해서도 같이 저장하게 했더니

의도했던대로 덮어씌워져 저장되는 모습을 확인할 수 있었다.

또한, 새로 발급한 access token을 찾지 못해

반복적으로 access token을 만들어 리턴하던 현상도 마찬가지로 해결할 수 있었다.

 

예전처럼 cookie를 단순하게 사용하던 시절과 다르게

front-end, back-end의 분리와 middleware의 사용 등

여러 조건이 겹치니까 겪게 되는 머리 아픈 상황이 많은 것 같다.

 

그래도 이렇게 하나하나 문제를 파악해서 해결하고

그 과정에서 나중에 문제될 수 있었던 상황을 미리 겪을 수 있어 다행이다.