서론
로그인 기능을 혼자서 구현해 본 적 없는 나는 사용자의 토큰을 어디에 저장해야 더 현명하고 안전하게 관리할 수 있을지 고민한 적이 없었다. 놀랍게도 이 경험 없음은 면접에서도 안 좋게 작용했다. 세션, 쿠키, 로컬 스토리지의 장단점을 이야기해 보라는 질문에 달달 외운 쿠키 이야기만 하고 나왔었다.
하지만! 로그인 기능을 구현하며 본격적으로 알아보기로 했다. 로컬 스토리지는 과거 프로젝트를 진행하며 로그인 기능을 구현하던 팀원에게 설명을 들은 적이 있어 어떤 방법으로 사용하는지 알고 있지만, 쿠키는 최근에 처음 사용했다. 사용 방법을 찾으려 검색해 보다 본 글에서 쿠키가 더 안전하다는 이야기를 본 게 화두였다. 정말 쿠키가 더 안전할까?
본론
JWT를 저장하기 위해 사용할 수 있는 방법은 두 가지가 있다.
로컬스토리지
- 장점
- CSRF 공격으로부터 안전하다.
쿠키는 request에 자동으로 담기지만 로컬스토리지는 헤더에 담긴다. 고로 공격자가 정상적인 request인 척 보내는 것이 어렵다.
- 단점
- XSS 공격에 취약하다.
쿠키
- 장점
- 로컬 스토리지보다 XSS 공격으로부터 비교적 안전하다.
쿠키의 httpOnly 옵션을 사용하면 JS 코드를 이용한 접근이 불가능하기 때문에 XSS 공격으로 쿠키를 탈취할 수 없다.
- 단점
- XSS 공격으로부터 완전히 안전한 것은 아니다.
httpOnly 옵션으로 쿠키의 내용을 볼 수 없다 해도 JS로 request를 보낼 수 있으므로 자동으로 request에 실리는 쿠키의 특성 상 사용자의 컴퓨터에서 요청을 위조할 수 있기 때문이다. - CSRF 공격에 취약하다.
공격자가 request url만 안다면 사용자가 관련 link를 클릭하도록 유도하여 위조하기 쉽다.
결론
결론은 뭐가 더 나으니 이걸 사용해라!는 없다. 각각의 장단점을 고려해 사용하는 것이 좋다.
-
로컬 스토리지를 쓰고 싶다.
쿠키 사용 시 api에 내가 사용하는 쿠키를 위한 설정을 요구해야 하기 때문에 백엔드 개발자와 잘 이야기된 경우에는 사용해도 좋을 듯하다. 그러나 서드파티 api의 경우 로컬 스토리지가 더 현명할 수 있다. mdn은 ModernStorage를 추천하고 있다. -
쿠키를 쓰고 싶다.
CSRF 공격은 다루기 쉽지만 프론트엔드 크기가 크면 클수록 XSS 공격을 막기 위한 작업이 복잡해지기 때문에 쿠키 사용을 추천한다.
🔗 참고
JWT는 어디에 저장해야할까? - localStorage vs cookie
LocalStorage vs Cookies
프론트에서 안전하게 로그인 처리하기 (ft. React)
