2021.6.18(fri)_jwt 디코딩에 관한 고민

 

✱JWT 디코딩은 어느 쪽에서..?

 JWT 토큰을 서버에서 받아서 로컬스토리지에 저장을 했다. 토큰의 public claims로 사용자 이름, 프로필 사진 url이 인코딩되어 있다.이 정보를 사용하려고 할 때, 프론트에서 디코드를 하는 것이 맞는 것일까. 아니면 백엔드에서 디코드를 하고 응답으로 받는 것이 맞을까?

 

 16일에 적었던 글에 큐랑 이야기했던 부분에 대해 간단하게 정리했었다. 요약하면, 보안이 필요한 예민한 정보가 아니라고 하더라도, 프론트에서 디코드를 하는 것보다 백에서 해주는 게 맞을 것 같다는 내용. 그 이후에 백엔드 분과 회의할 때 디코딩을 어떻게 해야할지 말씀을 드려봤다. 백엔드 분께서는 jwt 토큰에 있는 내용들이 예민한 내용이 아니기 때문에 프론트에서 바로 디코딩을 해서 정보를 사용하면 될 것 같다고 하셨다. 그래서 또 듣고보니 그런 것 같기도 하고..

 

크롱에게 질문을 드리고 답을 받았다!! 찰떡같이 맞는 말인듯..왜 생각 못 했지!

Q. jwt토큰의 내용이 예민한 정보가 아니라면 클라이언트에서 디코드를 해도 되는 걸까요? 아니면, 예민하지 않다고 해도 클라이언트에서 서버로 요청을 보내 응답을 받는 게 좋을까요?
A. 토큰은 인증된 사용자를 증명하는 역할이고, 이곳에 데이터를 보관할수도 있지만 필요한 데이터는 따로 요청하는 게 좋겠어요.

 

 

✱디코드된 정보를 어떻게 가지고 있을까?

 내가 작성한 로그인 함수의 실행 순서가 다음과 같다.

1. 로그인 버튼(<a>)의 href=git oauth 임시코드요청 url
2. 쿼리의 code를 떼서 fetch get요청
3. 응답으로 받은 jwt를 로컬스토리지에 저장
4. jwt를 디코딩해서 로컬스토리지에 저장
5. useHistory로 url이동

 

로그인 이후 jwt를 로컬스토리지에 저장하고, jwt-decode 패키지로 디코딩하고, 그 정보를 atom을 사용해서 전역 상태로 관리하려고 했다. 5번에서 새로고침이 되면서 상태들이 초기화된다. 그래서 디코드된 정보를 전역 상태에 저장하지 않고, 로컬 스토리지에 저장했다. 프론트에서 디코드를 하는 것도 고민이 됐는데 디코드를 해도 어디에 가지고 있어야할지 고민이 된다ㅠㅠ

 

Gather의 로컬스토리지를 봐보니까 내 닉네임 정보가 저장되어 있었다.

Q. 디코드된 정보(사용자 id, name, avatar_url)를 로컬 스토리지에 저장해도 될까요?
A. 그 정보는 브라우저 닫으면 없어져야 할 정보인데, 왜 로컬스토리지에 남기나요?

 

그러게요ㅠㅠ 제가 왜 생각을 못 했을까요.. 브라우저가 닫으면 없어져야 할 정보니까 세션 스토리지에 담아야 하겠구나.

 

역시 혼자서만 계속 고민하면 나름대로는 굉장히 고민하는 것 같지만 고민의 폭이 좁은 것 같다.

다른 분들과 이야기하고 고민을 나누면 쉽고 훨씬 좋은 방법으로 해결되는 것 같다.