JWT Token 자동갱신
token을 사용하는이유
서버에서 만들어 준 토큰은 서명이 있기 때문에 무결성이 보장된다. 무결성이란 정보가 변경되나 위조되지 않았음을 의미하는데, 따라서 사용자가 로그인을 하면 서버에서 사용자에게 해당 사용자의 정보를 지니고 있는 토큰을 발급해주고, 추후 사용자가 다른 API를 요청하게 될때 발급받은 토큰과 함께 요청하게된다. 그러면 서버는 해당 토큰이 유효한지 검사하고, 결과에 따라 작업을 처리하고 응답한다. 이로 인한 장점은 서버에서 사용자 로그인 정보를 기억하기 위해 사용하는 리소스가 적다는것이다. 사용자 쪽에서 로그인 상태를 지닌 토큰을 가지고 있으므로 서버의 확장성이 매우높다. 서버의 인스턴스가 여러개로 늘어나도 서버끼리 사용자의 로그인 상태를 공유하고 있을 필요가 없기 때문이다.
브라우저에서 토큰을 사용하는 두가지 방법
localStorage & sessionStorage
localStorage & sessionStorage에 토큰을 담으면 사용하기가 매우편리하나, 만약에 누군가가 페이지에 악성 스크립트를 삽입한다면 쉽게 토큰을 탈취할수있다(XSS공격[Cross Site Scripting])
Cookie
쿠키에서도 위와 같은 문제가 발생할 수 있지만, httpOnly라는 속성을 활성화하면 자바스크립트를 통해 쿠키를 조회할수 없으므로 악성 스크립트로부터 안전하다. 그대신 CSRF라는 공격에 취약해진다.
CSRF는 CSRF토큰 사용 및 Refere 검증 등의 방식으로 제대로 막을수 있는 반면, xss는 보안 장치를 적용해 놓아도 개발자가 놓칠 수 있는 다양한 취약점을 통해 공격을 받을수있다.
예제
react에서 refreshToken으로 accessToken을 자동으로 갱신 해주는 방법에 대하여 알아보자.
보안을 위해서 accessToken의 만료기간을 짧게하고, refreshToken도 함께 발급하여 accessToken이 탈취되더라도 금방 만료되게 하여 최대한 안전하게 인증이 가능하게하도록 한다. refreshToken는 접근에 필요한 accessToken이 만료 되었을 때 갱신하기 위하여 필요하다.
그래서 refreshToken으로 accessToken을 자동으로 갱신하게 해주도록 해보자.
accessToken과 토큰 만료시간은 로컬스토리지, refreshToken은 httpOnly cookie에 저장되어 있따고 가정한 상태이다.
1.실행
axios라는 http 통신 라이브러리에는 interceptor가 존재한다. 이는 http 통신을 하기 직전에 함수를 실행하여 AxiosRequestConfig를 수정할수있다.
axios.interceptors.request.use()함수에 실행할 함수를 매개변수로 넘기면 정상적으로 interceptor가 등록된다.
import axios, {AxiosRequestConfing} from 'axios';
import Cookie from 'react-cookie';
import {RefreshTokenResponse} from 'util/types/Response';
import {server} from 'config/config.json';
import moment from 'moment';
const refresh = async ()=>{
const refreshToken = Cookie.get('refeshToken')
}수정중
