[Web] JWT

JWT 기반 인증은 쿠키/세션 방식과 유사하게 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별한다.

 

📘 구조

JWT는 Header, Payload, Sigmature 세가지로 구분된다.

 

Header

{
  "alg": "HS256",
  "typ": "JWT"
}

• alg: 정보를 암호화할 해싱 알고리즘
• typ: 토큰의 타입

 

Payload

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

• Payload는 토큰에 담을 정보를 지님
• 주로 클라이언트의 고유 ID 값 및 유효 기간 등이 포함
• key-value 형식으로 이루어진 한 쌍의 정보를 클레임(Claim)이라고 한다
• 클레임을 공개(public) 혹은 비공개(private) 할 것인지 등록(registered)할 것인지 결정할 수 있다

 

Signature

HMACSHA256(
  base64UrlEncode(header) + "." +base64UrlEncode(payload),
	256-bit-secret
)

• Signature는 인코딩된 Header와 Payload를 더한 뒤 비밀키로 해싱하여 생성
• Header와 Payload는 단순히 인코딩된 값이기 때문에 제 3자가 복호화 및 조작할 수 있지만, Signature는 서버 측에서 관리하는 비밀키가 유출되지 않는 이상 복호화할 수 없다. → 따라서 Signature는 토큰의 위변조 여부를 확인하는데 사용

 

📒 동작방식

[출처] https://velog.io/@junghyeonsu/프론트에서-로그인을-처리하는-방법

1. 클라이언트 로그인 요청이 들어오면, 서버는 검증 후 클라이언트 고유 ID 등의 정보를 Payload에 담는다
2. 암호화할 비밀키를 사용해 Access Token(JWT)을 발급
3. 클라이언트는 전달받은 토큰을 저장해두고, 서버에 요청할 때 마다 토큰을 요청 헤더 Authorization에 포함시켜 함께 전달
4. 서버는 토큰의 Signature를 비밀키로 복호화한 다음, 위변조 여부 및 유효 기간 등을 확인
5. 유효한 토큰이라면 요청에 응답

 

📕 토큰을 유지하는 위치

secure httpOnly 쿠키, 로컬 스토리지, 쿠키 등이 존재한다

• 쿠키: XSS(Cross-site scripting)와 CSRF(Cross-site request forgery): 다른 도메인에서 우리 도메인으로 API Call을 날리는 공격에 취약
• localStorage: 공격자가 클라이언트 브라우저에 스크립트를 삽입해 공격하는 XSS(Cross-site scripting)에 취약
• secure httpOnly 쿠키: CSRF 공격에 취약하다.

 

📗 구현 

프로젝트를 진행하면서 클라이언트의 쿠키에 JWT를 저장하도록 하는 방식을 사용했다.

클라이언트에서 로그인 요청을 보내게 되면 서버에서는 클라이언트에게 받은 데이터를 조회하고 등록된 유저인 경우 또는 Oauth를 통해 응답받은 값이 정상적일 때 JWT를 resopnse와 함께 클라이언트에게 보내준다.

 

const createToken = (accessToken: string, expirePeriod: string) => {
  return jwt.sign({ accessToken }, process.env.JWT_SECRET_KEY, {
    expiresIn: expirePeriod,
  });
};

const decodeToken = (accessToken: string) => {
  return jwt.verify(accessToken, process.env.JWT_SECRET_KEY || '');
};

const { data: requestToken } = await axios.post(baseURI, body, {
  headers: { Accept: 'application/json' },
});

const { access_token: accessToken } = requestToken;

res.cookie('accessToken', createToken(accessToken, '7d'), {
  maxAge: 1000 * 60 * 60 * 24 * 7,
  httpOnly: true,
});

위 코드는 Oauth를 활용했던 코드인데 baseURI로 post 요청을 하고 받아온 access token을 JWT의 payload로 넣어준 코드이다. 

 

클라이언트에서는 로그인 이후 로그인 권한이 필요한 어떠한 요청을 할 때마다 서버 측에서 JWT를 통한 검증이 이루어지고 올바를 경우에만 제대로 된 응답을 클라이언트 측으로 전송해주도록 했다. 검증이 이루어지는 과정은 JWT의 payload를 해석하고 이를 통해 올바른 유저인지 확인했었는데 세션을 사용해서 서버측에서 검증할 수 있는 값을 가지고 있는다면 훨씬 효율적인 코드가 될 것 같다.