24년 6월 18일(화요일) - 83번째 TIL : Access token, Refresh token 응답 및 저장 방식

 

 

지금까지 프로젝트에서는 헤더에 JWT를 담아 보냈었다. 

근데 부트캠프 최종 프로젝트의 옆 팀의 분께서 쿠키에도 보내는 방식이 있다는 걸 알려준 후로 머릿속에 두긴 했는데, 이번에는 쿠키에 넣어서 프로젝트를 진행해보기로 했다. 

 

https://velog.io/@0307kwon/JWT%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%A0%80%EC%9E%A5%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C-localStorage-vs-cookie

JWT는 어디에 저장해야할까? - localStorage vs cookie

이 글을 참고했는데 아주 잘 작성을 해두셨다. 

 

로컬스토리지에 저장

장점

- CSRF 공격에는 안전함

단점

- XSS 에는 취약함

 

쿠키에 저장 

장점

- XSS 공격으로부터 로컬스토리지에 비해 안전하다

단점

- CSRF 공격에 취약함

 

 

 

위 글에서는 로컬스토리지가 베스트 옵션이라고 했지만, 많은 글에서 access token 은 헤더로 보내서 localStorage에 저장하고, refresh token 은 쿠키로 보내서 자동으로 주고 받는다. 

 

https://velog.io/@jihostudy/ReactNode.js-%EC%BF%A0%ED%82%A4%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-refresh-token-%EA%B5%AC%ED%98%84

[React/Node.js] 쿠키를 이용해 refresh-token 구현

 

아마

1. 두 토큰을 다른 저장소에 두어 분리시킴

2. 쿠키의 httpOnly 옵션으로 JS를 이용하여 토큰을 가져오지 못하게 함

때문인 것 같다.