JWT 어디에 보관해야 하는걸까?

로그인 Auth를 구현하기 위해서는 두 가지 방법을 사용할 수 있는데요,

  1. 세션을 사용하는 방법.
  2. 토큰을 사용하는 방법.

세션과 토큰의 차이는 다음 블로그 글을 참고해주세요.

 

[개발 상식] 쿠키, 세션, 토큰 어떤 차이일까?

이번 글은, 세션과 토큰의 차이점을 공부하며 정리한 글입니다. 세션과 토큰의 차이점을 알고, 적시에 사용할 수 있는 프로그래머가 되어 봅시다! 우선 세션과 토큰을 설명하기 앞서, 쿠키라는

lurgi.tistory.com

 

❓세션과 토큰의 장단점?

토큰의 강력한 장점은 DBless한 구조를 만들 수 있다는 것입니다. 세션은 세션DB가 따로 필요하거든요.

따라서 사용자 수가 급증함에 따라 세션 구조를 사용하는 서비스는 서버 관리에 비용이 점차 증가하게 됩니다.

그래서 많이 사용하는 방법이 JWT 방법인 것이죠.

하지만 JWT는 Server에서 데이터를 100% 다루는 것이 아니기 때문에 보안에 취약할 수 밖에 없습니다.

  1. 세션은 보안에 강력하나, 비용이 많이 든다.
  2. 토큰은 비용이 적게 들지만, 보안에 취약하다.

 

❓JWT 보관은 어떻게 할까..?

토큰을 사용한 JWT(JSON Web Token) 방식을 사용하면, 사용자의 브라우저에 정보를 저장할 수 있습니다. 하지만 JWT 방식이 서명을 통한 보안을 사용한다 하더라도, 완전히 안전하진 않습니다.

토큰을 보관하는 방법에는 두 가지 방법이 있겠는데요,

  1. 로컬, 세션 스토리지에 저장한다.
  2. 쿠키에 저장한다.

로컬 스토리지, 세션 스토리지에 이 토큰을 저장하게 되면, 브라우저에 악성 스크립트를 심어 탈취하는 행위인 XSS(Cross Site Scripting) 공격에 굉장히 취약합니다.

쿠키를 사용하면 어떨까요? XSS 공격에는 안심이 되지만, 로그인 상태에서 특정 동작을 요청하게 만드는 CSRF(Cross-Site Request Forgery) 공격에 취약하게 됩니다.

 

❓그러면 도대체 어쩌라고..?

세션처럼 Server에서 보안이 필요한 정보를 다루지 않는 이상, Client에서는 100% 안전한 보안성을 만들어낼 순 없습니다. 그렇다고 모든 유저 정보를 Server에서 다루게 된다면, 비용이 어마어마하게 커질 것입니다.

서비스의 확장성과 비용, 보안성의 균형을 잘 맞춘 방법이 무엇일까요?

제가 공부한 바로는 JWT를 쿠키에 저장하는 방법입니다.

위에서 쿠키는 CSRF(Cross-Site Request Forgery) 공격에 취약하다고 했습니다. 이를 HTTPOnly 쿠키로 설정하여, 브라우저에서 쿠키에 접근할 수 없게 만들어, 이 공격에 대비할 수 있습니다.

또한 accessTokenrefreshToken 두 가지 토큰을 사용하여, Refresh Token Rotation 방식으로 토큰을 주기적으로 바꾸어주어 보안성을 높힐 수 있습니다.

 

❗제가 결론 내린 바로는 다음과 같습니다.

JWT + Cookie의 조합으로, HTTPOnly 쿠키, Refresh Token Rotation 방식을 사용하자.

 

✨Next.js에서 구현한 JWT 토큰

 

GitHub - lurgi/jwt-cookie-auth: jwt cookie practice

jwt cookie practice. Contribute to lurgi/jwt-cookie-auth development by creating an account on GitHub.

github.com

위 레포는 cookiejsonwebtoken 라이브러리를 통해 구현한 jwt 인증 입니다.

 

jsonwebtoken

JSON Web Token implementation (symmetric and asymmetric). Latest version: 9.0.2, last published: 4 months ago. Start using jsonwebtoken in your project by running `npm i jsonwebtoken`. There are 26035 other projects in the npm registry using jsonwebtoken.

www.npmjs.com

 

 

cookie

HTTP server cookie parsing and serialization. Latest version: 0.6.0, last published: 2 months ago. Start using cookie in your project by running `npm i cookie`. There are 3950 other projects in the npm registry using cookie.

www.npmjs.com