쿠팡이츠 클론 - csr과 ssr 의 jwt 로그인

프로젝트를 하면서 ssr 환경에서 JWT 로그인 방식을 구현하며 겪은 문제를 정리해보았습니다.

 

 

1. 로그인은 어떻게 이루어지나?

2. 브라우저 저장소와 보안 이슈

3. SSR로 하면서 겪은 이슈

---

로그인은 어떻게 이루어지나?

 

 

JWT 방식 ( AccessToken, RefreshToken)

 

유저가 로그인할 때 서버가 인증 정보를 보내주는데, 암호화나 시그너처 추가가 가능한 데이터 패키지안에 인증 정보를 담아 보내준다.(이 패키지가 JSON Web Token JWT다.) 

담기는 정보 중 AccessToken과 RefreshToken이 이후 유저 인증에 사용되는데 이 정보를 클라이언트에 저장해준다.

 

쉽게 풀어서 얘기하면 클라이언트에서 유저가 로그인 요청을 서버에 보내면 서버는 DB에 유저가 있는지 확인,

이후 DB에서 서버에 Token을 발급해주고 서버에서 클라이언트에 Token을 전달해준다. 그럼 이후 요청 시 다시 클라이언트에서 Token을 서버로 보내 검증을 받고 서버는 유저 정보를 클라이언트에 보내준다.

 

AccessToken, RefreshToken은 뭐가 다르지?

 

AccessToken은 실질적인 인증 정보를 처리하고 일정 (짧은) 시간이 지나면 만료하는 구조를 갖고 있다. 

RefreshToken은 AccessToken보다는 긴 시간 지속되며 AccessToken을 재발급받을 때 사용된다.

 

브라우저 저장소와 보안 이슈

 

1. XSS 공격

 

해커가 클라이언트 브라우저에 Javascript를 삽입해 실행하는 공격이다. 해커가 <input>을 통해 Javascript를 서버로 전송해 서버에서 스크립트를 실행하거나, url에 Javascript를 적어 클라이언트에서 스크립트 실행이 가능하다면 공격자가 사이트에 스크립트를 삽입해 XSS 공격을 할 수 있다. 이때 해커는 Javascript를 통해 사이트의 글로벌 변숫값을 가져오거나 그 값을 이용해 사이트 인척 API 콜을 요청할 수도 있다.

 

2. CSRF 공격

 

CSRF 공격은 웹 어플리케이션 취약점 중 하나로 인터넷 사용자(희생자)가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 만드는 공격이다. 이때 해커가 클라이언트에 저장된 유저 인증정보를 서버에 보낼 수 있다면, 제대로 로그인한 것처럼 유저의 정보를 변경하거나 유저만 가능한 액션들을 수행할 수 있다.

 

 

브라우저 저장소

 

1. localStorage에 저장

 

브라우저 저장소에 저장하는 방식이다. 이곳에 Token을 저장해두면 Javascript 내 글로벌 변수로 읽기/쓰기 접근이 가능하기 때문에  XSS 취약점을 통해 그 안에 담긴 값을 불러오거나, 불러온 값을 이용해 API 콜을 위조할 수 있다.

 

2. 쿠키에 저장

 

브라우저 쿠키에 저장하고, 클라이언트가 HTTP 요청을 보낼 때마다 자동으로 쿠키가 서버에 전송된다. Javascript 내 글로벌 변수로 읽기/쓰기 접근이 가능하기 때문에 역시 Token을 저장해두면 XSS 취약하다.

쿠키에 AccessToken을 저장해 인증에 이용하는 구조에 CSRF 취약점이 있다면 인증 정보가 쿠키에 담겨 서버로 보내진다. 그럼 해커는 유저 권한으로 정보를 가져오거나 액션을 수행할 수 있다.

 

 

그래서 어디에 저장했는지?

 

쿠키에 RefreshToken만 저장하고 새로운 AccessToken을 받아와 인증에 이용하는 구조에서는 CSRF 공격을 방어할 수 있다.

 

httpOnly 쿠키 저장 방식

 

브라우저에 쿠키로 저장되는 건 같지만 Javascript 내에서 접근이 불가능하다.

 

 

SSR로 하면서 겪은 이슈

 

처음 CSR 환경에선 이렇게 해주었다. 

 

 

• JWT로 유저 인증
• refreshToken을 httpOnly 쿠키로, AccessToken은 JSON payload로 받아와서 axios.default.header로 API 요청 시마다 헤더에 AccessToken을 담아  보내도록 설정해줬다.

이렇게 되면 CSRF 취약점 공격을 방어하고, XSS 취약점 공격으로 저장된 유저 정보 읽기는 막을 수 있다.

 

 

 

그러나 SSR시 페이지가 리프레쉬되기 때문에 redux store에 저장해둔 유저 정보가 초기화되었다.

그리고 SSR시 Data fetching을 하게 되는데 AccessToken을 갖고 유저 정보를 요청하는 api에서 

AccessToken은 브라우저 환경에서 저장되어있기 때문에 사용하지 못했다.

 

그래서 로그인 시 refresh 토큰만 쿠키로 받고 ssr시 쿠키에 있는 refreshToken 체크해 헤더에 넣어 getServerSideProps에서 AccessToken을 재발급받는 api 요청, 이후 그 AccessToken으로 유저 정보 가져오는 api 요청을 했다.

 

---

 

참고 링크

 

프론트에서 안전하게 로그인 처리하기

Refresh JWT 구현을 위한 배경지식과 설계