<aside> ✔️ Cookie에 토큰을 저장하고, middleware에서 각 페이지 진입 시 갱신하는 방식
</aside>
자동 로그인 유지는 보안을 위해서는 BE에서 하는 게 정석이라고 하지만, 우리는 FE에서 진행하기로 결정했다.
이유는 (1) BE 개발자는 분류 모델 관련한 작업에 시간을 투자하고 있었고 (2) 마침 프론트도 SSR로 돌아가고 있으니, 프론트 서버 사이드에서 돌아간다면 안전할 것이라 생각했다.
하지만 막상 구상하고 구현하는 과정에서 많은 어려움이 있었는데… 여러 시행착오 끝에 내가 결정한 방식은 Cookie에 토큰을 저장하고, 미들웨어 단에서 이를 갱신하는 구조였다.
Q. 토큰을 어디에 저장할까?
JWT 토큰은 일반적으로 LocalStorage 또는 Cookie에 저장한다.
둘의 큰 차이점으로는 LocalStorage는 브라우저 데이터이기에 JavaScript로 접근이 가능하고, Cookie는 접근이 불가하다는 것이다.
| LocalStorage | Cookie | |
|---|---|---|
| 👍 | pure JavaScript로서 편리 | JavaScript로 접근이 불가능 |
| & 자동으로 모든 HTTP 요청에 포함되어 보내짐 | ||
| 👎 | XSS 공격에 취약 | 사이즈 제한이 있음 |
| → Header 영역에 토큰 넣어서 전공 | → 서버에서 Cookie 확인 |
LocalStorage vs. Cookies: JWT 토큰을 안전하게 저장하기 위해 알아야할 모든것
사실 프론트 개발자로서 가장 간단하게 구현하는 건, 로컬스토리지에 다 때려박아 저장해 두고 사용하는 방법일 것이다. 하지만 보안에 안전하다는 두번째 방식을 사용해 보고 싶었다!
일단 첫번째 방식은 많이 사용해 보기도 했고, 나는 미들웨어 단에서 이를 갱신하는데 마운트 이전이라 그런지 로컬스토리지에 접근이 안되는 문제가 발생했다. (그 당시 아직 CSR과 SSR의 정확한 경계를 몰라서 발생한 것 같기도,, 했다)
또, 우리는 SSR을 사용하기에 프론트 서버단 작업을 해 보고 싶었달까,, 비록 아직은 API가 Header 영역에 Bearer 방식으로 토큰을 전송해 사용하지만, 후에 서버 단에서 Cookie로 확인하는 식으로 수정해 간다면 보안 상으로 & 구조 상으로 더 깔끔해질 수 있을 것이라 생각했다!