[메인 프로젝트] Token으로 로그인 방법 공부

지난 번 sessionId를 이용한 로그인 구현 시 이론과 실재 간의 큰 벽을 느꼈다.

이번엔 나중에 헤메지 않도록 미리 몇가지 튜토리얼을 보고 어떻게 사용하는지 공부하기로 했다.

 

참고자료

* 토큰과 JWT 필기 내용

https://couch.tistory.com/175

[SEB TIL] 54일차 / Token OAuth

 

* JWT 이해하기

백엔드 측에서의 설명이지만 JWT를 사용하는 과정에 대해 설명이 잘 되어 있어서 이해에 도움이 된다. 쿠키와 세션에 직접 부딪혀본 뒤 다시 읽어보니 특징이 더 잘 이해돼서 좋았다.

https://brunch.co.kr/@jinyoungchoi95/1

JWT(Json Web Token) 알아가기

* 클라이언트에서 JWT 처리하기

https://hololo-kumo.tistory.com/236

 

* localstorage에 token 저장하는 예시 코드

https://velog.io/@yunsungyang-omc/React-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%9B%84-token-%EC%A0%80%EC%9E%A5-%EC%84%9C%EB%B2%84%EC%97%90-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0

 

* React에서 JWT 처리하기 (1)

https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

🍪 프론트에서 안전하게 로그인 처리하기 (ft. React)

 

* React에서 JWT 처리하기 (2)

https://5xjin.github.io/blog/react_jwt_router/

[React17]React에서 JWT 인증 구현하기

 

* 미들웨어 사용해 refresh token 관리하는 방법

https://velog.io/@lgj9172/JWT-access-token-refresh-token-auto-refresh-axios%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%86%A0%ED%81%B0-%EC%9E%90%EB%8F%99-%EB%B0%9C%EA%B8%89

JWT, access token, refresh token, auto refresh, axios를 이용한 토큰 자동 발급 받기

 

이해한 것

• 토큰은 브라우저에 저장되고 서버가 아니라도 값을 확인할 수 있으므로 민감한 정보는 담지 않고 "식별을 위한 정보"만 담는 것이 좋다.
• JWT의 인증 과정은 쿠키와 비슷하지만, 개인키/공개키를 이용해 서명된 토큰이다.
• access token과 refresh token의 구조는 기본적으로 동일하며, 구분은 서버에서 만들기 나름이다. (JWT의 payload에는 사용자 정의 속성을 추가할 수 있으며, 이를 이용해 'token_type' 과 같은 커스텀 속성을 만들 수 있다)
• 보통 서버에서 refreshToken은 secure httpOnly 쿠키에, accessToken은 JSON payload에 담아 전달한다.
• 각 토큰을 어디에 저장할지는 선택하기 나름이다. (대체로 access token은 localstorage에 '노출'하지 않는 것 같다)
  
  • 방식(1) access token은 cookie에 저장하고, refresh token은 local storage에 저장한다.
  • 방식(2) accessToken은 웹 어플리케이션 내 로컬 변수에 저장해 사용하고 refreshToken만을 secure httpOnly 쿠키에 저장해 CSRF 공격을 방어한다.
  • 방식(3) Access Token은 Redux를 이용하여 store에, Refresh Token은 브라우저 저장소(Cookie)에 저장하여 사용할 예정이다.
• 웹 어플리케이션이 mount 될 때 마다 refreshToken을 이용해 새로운 accessToken을 받아와 웹 어플리케이션 내 지역 변수에 저장하고 사용한다.

아직 이해하지 못한 것

• 이 방식으로 CSRF 취약점 공격과 (다른 선택지보다) XSS 공격에서 안전할 수 있다. 하지만 웹 어플리케이션이 XSS 공격에 취약하다면 어떤 방식을 선택하던 보안이 위험하기에 꼭 XSS 처리를 해야 한다.

---

멘토님께 조언을 구한 결과 큰 프로젝트도 아니고 보안 이슈가 중요한 서비스가 아니니 localstorage에 access를 저장해두고 쓰는게 편하게 구현할 수 있는 방법인 것 같아 local에 한번 저장하고 그걸 redux로 받아서 사용하기로 했다.