JS => 토큰기반 인증?

CHO_velog·2021년 9월 12일

토큰기반 인증은 무엇?

세션 기반 인증은 서버(혹은 DB)에 유저 정보를 담는 인증 방식이다 (이전 Session 글 참고).
서버에서는 유저가 민감하거나 제한된 정보를 요청할 때마다,
"지금 요청을 보낸 유저에게 우리가 정보를 줘도 괜찮은가?" 를 확인하기 위해 가지고 있는 세션 값과 일치하는지 확인한다.

하지만 이는 서버의 일이 과중이 될 수가 있다.
매 요청마다 DB를 살펴보는 것이 불편하고, 이 부담을 덜어내고 싶다면 어떤 방법이 있을까?

이럴 때 사용할 수 있는 토큰기반 인증 중 대표적인 JWT (JSON Web Token) 이 있다.

클라이언트에서 인증 정보 보관

클라이언트에서 인증 정보를 보관하는 방법으로 토큰기반 인증이 고안되었다.
클라이언트가 토큰을 가지고 있다면 보통의 다른 유저들과는 다르게 서버에서 제공하는 다양한,
더 프리미엄한 기능을 요청할 수 있을 것이다.

그러나, 여기서 드는 의문점!
"클라이언트에 토큰을 저장하면 XSS 혹은 CSRF 공격에 노출될 수 있지 않나..?"라고 생각할 수 있다. 이 때문에 클라이언트에는 민감한 정보를 담고 있어서는 안된다.

그렇다면 토큰은 왜 클라이언트에 보관하는 것일까?
바로 토큰은 유저 정보를 암호화한 상태로 담을 수 있고, 암호화했기 때문에 클라이언트에 담을 수 있는 것이다.

JWT (JSON Web Token)의 종류

1. Access Token
2. Refresh Token

Access token은 보호된 정보들(유저의 이메일, 연락처, 사진 등)에 접근할 수 있는 권한부여에 사용한다.

클라이언트가 처음 인증을 받게 될 때(로그인 시),
"access token", "refresh token" 두 가지를 다 받지만,
실제로 권한을 얻는 데 사용하는 토큰은 access token 이다.

즉, 권한을 부여 받는데엔 access token만 가지고 있으면 되는 것이다.
만약 악의적인 유저가 얻어냈다면 어떻게 될까? 그럼 당신은 모든 것을 털릴...것이다..:)

그렇기 때문에 access token에는 비교적 짧은 유효기간 을 주어 탈취 되더라도 오랫동안 사용할 수 없도록 하는것이 좋다.

이때,
access token의 유효기간이 만료된다면 refresh token을 사용하여 새로운 access token을 발급받는다.

그런데 끈질긴 악의적인 유저가 refresh token 마저 탈취했다면?
그렇다면 오랜 기간동안 당신은 괴롭힘을 당할 것이다.

따라서 저의 편의보다 정보를 지키는 것이 더 중요한 웹사이트들은 refresh token을 사용하지 않는 곳이 많다.

JWT (JSON Web Token)의 구조

JWT는 위 그림과 같이 . 으로 나누어진 3부분이 존재한다.

1. Header
Header는 이것이 어떤 종류의 토큰인지(지금의 경우엔 JWT),
어떤 알고리즘으로 sign(암호화) 할지가 적혀있다.

JSON형태의 Header 예시
{
  "alg": "HS256",
  "typ": "JWT"
}
이 JSON 객체를 base64 방식으로 인코딩하면 JWT의 첫 번째(Header) 부분이 완성된다.

2. Payload
Payload에는 정보가 담겨 있다.
어떤 정보에 접근 가능한지에 대한 권한을 담을 수도 있고,
사용자의 유저 이름 등 필요한 데이터는 이곳에 담아 암호화 시킨다.

물론, 민감한 정보는 되도록 담지 않는 것이 좋다.

JSON형태의 Payload 예시
{
  "sub": "someInformation",
  "name": "phillip",
  "iat": 151623391
}
Header와 마찬가지로 base64 방식으로 인코딩하면 Payload 부분이 완성된다

3. Signature
첫번째, 그리고 두번째 부분이 완성 되었다면, 원하는 비밀 키(암호화에 추가할 salt)를 사용하여 암호화 한다.
base64 인코딩을 한 값은 누구나 쉽게 디코딩할 수 있지만,
서버에서 사용하고 있는 비밀키를 보유한게 아니라면 해독해내는데 엄청난 시간과 노력이 들어갈 것이다.

예를 들어, 만약 HMAC SHA256 알고리즘(암호화 방법중 하나)을 사용한다면 signature는 아래와 같은 방식으로 생성된다.

HMAC SHA256 알고리즘 Signature 예시
HMACSHA256(base64UrlEncode(header) + '.' + base64UrlEncode(payload), secret);

JWT (JSON Web Token)의 사용 예시

JWT는 권한 부여에 굉장히 유용하다.
새로 다운받은 A라는 앱이 Gmail과 연동되어 이메일을 읽어와야 한다고 생각해보자.

Gmail 인증서버에 로그인정보(아이디, 비밀번호)를 제공한다
성공적으로 인증시 JWT 를 발급받는다
A앱은 JWT를 사용해 해당 유저의 Gmail 이메일을 읽거나 사용할 수 있다

토큰기반 인증 절차

클라이언트가 서버에 아이디/비밀번호를 담아 로그인 요청을 보낸다.
아이디/비밀번호가 일치하는지 확인하고, 클라이언트에게 보낼 암호화된 토큰을 생성한다.
토큰을 클라이언트에게 보내주면, 클라이언트는 토큰을 저장한다.
3-1. 저장하는 위치는 local storage, cookie, react의 state 등 다양하다.
클라이언트가 HTTP 헤더(authorization 헤더)에 토큰을 담아 보낸다.
서버는 토큰을 해독하여 "아 우리가 발급해준 토큰이 맞네!" 라는 판단이 될 경우, 클라이언트의 요청을 처리한 후 응답을 보내준다.