리액트 스터디 과제로 JWT 이론 공부 및 실습 코드 구현에 관한 과제를 진행하였다.
과제 내용은 다음과 같다.
https://www.notion.so/week4-56b6baa3246d46cd9c4e38a224dc2d71
JWT의 뜻?
Json Web Token의 약자
풀 네임에서 알 수 있듯이 "웹 상에서 Json 형태로 토큰을 주고받는 인증"을 뜻한다.
왜 사용하나요?
JWT를 사용하는 이유를 설명하기에 앞서 다른 인증 시스템을 알아보자.
쿠키 인증 방식
먼저 쿠키에 대해서 간단히 알아보자.
쿠키는 Key와 Value로 구성된 작은 정보 파일이다.
이를 활용해서 서버에서 로그인에 성공한 클라이언트에게 인증을 위한 쿠키를 전송하고,
클라이언트는 해당 쿠키를 매 요청에 같이 보내는 방식으로 인증을 수행한다.
단점?
간단한 방식에는 단점이 있는 법.
쿠키 인증 방식의 단점은 다음과 같다.
- 보안에 취약함(XSS 공격)
- 네트워크 부하
- 용량 제한으로 한정된 정보 저장
세션 인증 방식
다음으로 세션 방식에 대해서 간단히 알아보자.
세션은 쿠키에 서버로부터 받은 세션 id를 넣어 인증하는 방식이다.
쿠키 인증 방식과 다른 점..?
여기까지만 공부를 했다면 이런 의문이 생길 수 있다.
세션 인증도 쿠키를 사용한다면 XSS 공격과 같이 보안상의 위험은 피차일반인데 다른 점이 뭘까?
그건 바로 쿠키에 어떤 정보를 저장하는가? 이다.
단순한 쿠키 인증 방식에 대해서 조금만 더 생각을 해보자.
클라이언트에서 매 요청마다 서버에 인증정보를 전송해야 하는데, 어떤 정보를 쿠키에 담아야 할까?
그렇다. 아이디와 패스워드 같은 민감한 정보를 쿠키에 담아 요청하는 방식 말고는 없다!
그에 반해 세션 인증 방식은 로그인 성공 시 서버로부터 받은 세션 ID를 쿠키에 저장하여 요청하므로 쿠키가 탈취되어도 아이디와 패스워드와 같은 중요한 정보가 유출될 위험은 없다!
그렇기 때문에, 인증의 책임이 서버로 향하게 되고 클라이언트에서 중요한 정보를 저장하는 위험을 피할 수 있게 된다.
단점?
세션 방식에도 당연히 문제점이 있다.
- 100% 안전하지 않다.
쿠키 인증 방식에도 나왔듯이, XSS 공격을 통해 세션 ID가 탈취되면 유효기간이 만료되지 않는 이상 해커가 해당 세션 ID를 통해 정보를 요청할 수 있다. - 규모가 커질 경우 서버의 부하가 커진다.
세션 서버를 서버에서 운영해야 하기 때문에 당연히 부하가 커질 수밖에 없다. 또한, DB에 접근해야 하기 때문에 오버헤드도 무시할 수 없다. - 확장성이 떨어짐
서버는 무상태성(Stateless)을 가져야 한다.
하지만 세션 방식은 로그인부터 로그아웃까지의 세션을 서버에서 관리해야 하기 때문에, 서버 확장 시 세션 불일치에 대한 문제 해결이 필요해진다.
JWT 인증 방식
이제 우리가 궁금했던 JWT 인증 방식에 대해 알아보자.
JWT는 세션의 두 가지 단점(서버의 부하, 확장성)을 어느 정도 해결할 수 있는 인증 방식으로,
로그인 성공 시 서버에서 제공하는 토큰을 통해 인증을 하는 방식이다.
사용자의 간단한 정보와 시크릿키(서버에서 생성)를 통해 암호화된 토큰을 클라이언트에 제공하고,
HTTP 헤더를 통해 인증을 요청할 수 있다.
이를 통해 토큰이 변조되어도, 서버에서 시크릿 키를 통해 토큰을 복호화한 후 유저 정보의 일치 여부를 판단하여 DB에 접근할 필요 없이 빠른 인증이 가능해진다.
단점?
JWT도 단점이 존재한다.
- 토큰의 길이가 세션보다 훨씬 긴 편으로 네트워크 부하가 발생할 수 있다.
- 토큰에 유저에 대한 정보가 들어가기 때문에 주의해야 한다.
- 토큰 자체가 탈취될 경우 만료기간 동안 위험에 노출될 수밖에 없다.
정리
쿠키, 세션, JWT에 대해서 간략하게 알아보았다.
사실 인터넷에 잘 정리된 글이 너무 많기 때문에 이 글에서는 간략한 정리만 하고 보안 측면에 대해 다음 글에서 조금 더 심화해서 알아볼 예정이다.
'React' 카테고리의 다른 글
| [React] onKeyDown이 두 번 적용되는 현상을 분석해보자 (5) | 2025.07.29 |
|---|---|
| [React] firebase + github action CI/CD 파이프라인 구축 (1) | 2025.03.19 |
| [React] JWT 어떻게 관리하는 게 좋을까? (4) | 2025.03.19 |