로그인을 구현해 봅시다

 

 

 

 

 

 

 

 

1. 클라이언트에서 로그인한다. - 리덕스 사가로 비동기 요청
2. 서버는 클라이언트에게 Access Token과 Refresh Token을 발급한다. 동시에 Refresh Token은 서버에 저장된다.
3. 클라이언트는 쿠키에 두 Token을 저장한다.
4. 매 요청마다 Access Token을 헤더에 담아서 요청한다.
5. 이 때, Access Token이 만료가 되면 서버는 만료되었다는 Response를 하게 된다.
6. 클라이언트는 해당 Response를 받으면 Refresh Token을 보낸다.
7. 서버는 Refresh Token 유효성 체크를 하게 되고, 새로운 Access Token을 발급한다.
8. 클라이언트는 새롭게 받은 Access Token을 기존의 Access Token에 덮어쓰게 된다.

 

 

 

jwt가 안전하려면 

 

 

 

가장 좋은 방법으로는
refresh token을 사용하는 방법이 있다.

백엔드 api 개발자와 소통이 가능하다면
refresh token을 httpOnly 쿠키로 설정하고
url이 새로고침 될 때마다 refresh token을 request에 담아
새로운 accessToken을 발급 받는다.
발급 받은 accessToken은 js private variable에 저장한다.

이런 방식을 사용하는 경우,
refresh token이 CSRF에 의해 사용된다 하더라도
공격자는 accessToken을 알 수 없다.

CSRF는 피해자의 컴퓨터를 제어할 수 있는 것이 아니기 때문이다.
요청을 위조하여 피해자가 의도하지 않은
서버 동작을 일으키는 공격방법이기 때문에
refresh token을 통해 받아온 response(accessToken)는
공격자가 확인할 수 없다.

따라서 쿠키를 사용하여 XSS를 막고
refresh token 방식을 이용하여 CSRF를 막을 수 있다.