[Node.js] JWT(Json Web Token)를 이용한 로그인 인증 구현

🔑 JWT란?

JWT(Json Web Token)는 서버가 사용자의 로그인 정보를 인증한 후 발급하는 토큰(Token) 기반의 인증 방식이다.

기존의 Session 방식은 서버가 로그인한 사용자의 정보를 메모리나 DB에 저장하여 관리하지만,

JWT는 로그인 정보를 토큰 안에 담아 클라이언트에게 전달한다.

이후 클라이언트는 서버에 요청할 때마다 JWT를 함께 전송하고, 서버는 토큰의 유효성을 검사하여 사용자를 인증한다.

즉, 서버가 별도의 로그인 세션을 저장하지 않아도 사용자를 식별할 수 있다.

 

JWT 동작과정

JWT 인증은 다음과 같은 순서로 동작한다.

 

1. 사용자 로그인

2. 아이디 / 비밀번호 전송

3. 서버에서 사용자 확인

4. JWT 생성

5. HttpOnly Cookie 저장

6. 브라우저가 이후 요청마다 Cookie 자동 전송

7. 서버가 JWT 검증

8. 인증 성공 후 요청 처리

 

여기에서 왜 HttpOnly Cookie에 저장을 하는지 간략히 알아보자.

 

보통 JWT는 크게 세 곳에 저장을 할 수 있다.

 

 

1. LocalStorage

- 사용방식

localStorage.setItem("token", token)

 

• 브라우저를 종료해도 남아 있다.
• 컴퓨터를 재부팅해도 남아 있다.
• 사용자가 직접 로그아웃하거나 localStorage.removeItem()을 호출해야 삭제된다.

2. SessionStorage

- 사용방식

sessionStorage.setItem("token",token)

 

• 현재 브라우저 탭에서만 유지된다.
• 탭을 닫으면 사라진다.
• 다른 탭에서는 공유되지 않는다.

3. HttpOnly Cookie

- 사용방식

res.cookie("token",token, {
      httpOnly:true,
      maxAge:60*60*1000
})

 

근데 여기서는 2가지 방식인 Session Cookie, Persistent Cookie 로 나뉜다.

Session Cookie는

- res.cookie("token", token, { httpOnly: true })

maxAge나 expires를 지정하지 않으면, 브라우저를 종료하는 순간 삭제된다.

 

Persistent Cookie 는

- res.cookie("token", token, { httpOnly: true, maxAge: 1000 * 60 * 60 * 24 * 7 })

위와 같이 maxAge를 설정함으로써 7일동안 유지된다.

 

그래서 사용방식 아래에 있는 코드를 기준으로는

• 브라우저를 껐다 켜도 1시간 동안은 로그인 유지
• 1시간이 지나면 Cookie가 만료되어 다시 로그인해야 함
• JavaScript에서는 토큰을 읽을 수 없음
• 브라우저가 API 요청 시 Cookie를 자동으로 전송

와 같은 특징이 있다.

 

가장 큰 문제는 XSS(Cross Site Scripting) 이다.

만약 LocalStorage를 사용하는 상태에서 사이트에 악성 스크립트가 삽입되면

const token = localStorage.getItem("token")

이렇게 JWT를 그대로 읽어갈 수 있다.

물론 SessionStorage에서도

sessionStorage.getItem("token")

 

위와 같은 형대로 탈취당하기 쉬운 것은 마찬가지이다.

 

 

하지만 HttpOnly Cookie는 로그인을 하게 되면

res.cookie("token", token, {
    httpOnly: true
})

 

를 보낸다.

 

그러면 브라우저가 Cookie를 저장하는데, 이 Cookie는

document.cookie

 

에서도 보이지 않는다. 즉 JavaScript가 접근 자체를 못하기 때문에 토큰을 탈취하기 훨씬 어렵다.

 

물론 HttpOnly Cookie도 무적은 아니다.

 

Cookie는 자동으로 전송되기 때문에 CSRF(Cross-Site Request Forgery) 공격에 노출될 수 있다.

그래서 실제 서비스에서는 보통 다음과 아래와 같은 옵션을 함께 사용한다.

res.cookie("token", token, {
    httpOnly: true,
    secure: true,
    sameSite: "Strict"
})

• httpOnly: JavaScript에서 접근 불가
• secure: HTTPS에서만 전송
• sameSite: 다른 사이트에서 자동 전송 제한(CSRF 완화)

 

브라우저는 ex) localhost:3000 로 요청을 보내게 되면, Cookie를 자동으로 같이 보내게 된다.

 

그래서 이전에 설명한

axios.defaults.withCredentials = true

를 사용하는 것이다.

 

이 옵션을 켜면 Cookie, JWT 가 자동으로 함께 전송된다.

 

결국 늘 요청때마다 빈번히 넣었던

headers: {
    Authorization: ...
}

 

를 직접 넣지 않아도 된다.