용어정리
1. 브라우저 저장소
- 데이터를 클라이언트측에 저장하기 위해 만들어진 저장소
2. 쿠키
- 서버와 클라이언트 간의 지속적인 데이터 교환을 위한 저장소
- 쿠키의 특징은 4KB까지 저장가능하며, 따로 요청하지 않아도, Request Header에 담겨 자동으로 서버에 전송됩니다.
3. JWT(Json Web Token)
- 웹의 사용자 인증을 위해 사용되는 암호화된 Json형식의 토큰으로, Session방식과 달리 서버의 부담을 줄일 수 있습니다.
4. XSS(Cross Site Scripting)
- 공격자가 의도하는 악의적인 js 코드를 서버에 삽입하여, 피해자 웹 브라우저에서 실행시키는 것입니다.
- 웹사이트에 스크립트를 삽입하여 공격하는 기법으로, 스크립트를 통해 유저의 정보를 빼올 수 있습니다.
5. CSRF(Cross-Site Request Forgery)
- 공격자가 게시판과 같은 기능을 통해, 공격 스크립트를 서버에 저장해두고, 일반적인 사용자가 이를 이용해, 의도와는 상관없이 악의적인 행동을 하게 만드는 공격입니다.
- 간단히, 일반사용자의 권한을 이용해, 서버에 악의적인 요청을 보내는 공격입니다.
JWT정보는 어디에 저장하고, 인증을 어떻게 처리해야 할까?
- JWT는 크게
Access Token과Refresh Token로 구분됩니다. - Access Token(AT) : 사용자를 인증하기 위한 토큰, 일반적으로 만료시간을 짧게 합니다.
- Refresh Token(RT) : AT를 재발급하기 위한 토큰, 만료시간을 AT보다 비교적 길게 합니다.
저장위치에 따른 장단점
- AT와 RT는 클라이언트의 브라우저에 저장이 되어야 하며, 탈취당하지 않도록 보안에 유의해야 합니다.
- 저장할 수 있는 옵션으로는 LocalStorage, SessionStorage, Cookie이 있습니다.
- LocalStorage
(추천)- 장점 : 개발자의 스크립트에 의해 토큰값이 요청헤더값에 담기기에
CSRF에 안전합니다. - 단점 : 스크립트로 접근이 가능하여,
XSS에 취약합니다.
- 장점 : 개발자의 스크립트에 의해 토큰값이 요청헤더값에 담기기에
- SessionStorage
- LocalStorage와 동일하나, 브라우저 탭간의 데이터공유가 되지 않고, 브라우저가 닫히면 데이터가 휘발됩니다.
- 휘발되는 특성 때문에, LocalStorage보다 사용하는 장점이 약합니다.
- Cookie
(추천)- 클라이언트에서 서버로 요청을 전송할 때, 사용됩니다.
httpOnly옵션을 서버에서 적용하여, 스크립트로 접근하지 못하게 할 수 있어,XSS공격에 완전하지 않지만 비교적 안전합니다.- 쿠키에 토큰을 저장해두면, 값 탈취 자체는 어려우나, 로그인된 상태로 특정동작을 하게 만들 수 있어,
CSRF에 취약합니다. secure,httpOnly옵션 사용가능
결론
RT(Refresh Token)은
쿠키에 저장합니다.
RT는 AT를 발급받기 위해서만 사용이 되므로, 악의적인 행동을 만들수는 없습니다.
AT의 저장위치는 개발상황에 따라,
LocalStorage와Memory variable로 구분됩니다.
1. Memory Variable
- 새로고침 시, 휘발되므로,
XSS와 CSRF에 모두 안전하지만, 매번 발급을 받아야 하는 불편함이 있습니다. - 다만, CSR과 같은 개발상황에서는 값이 계속해서 남아있기에, 상황에 따라 적합할 수 있습니다.
2. Local Storage
- AT의 만료시간을 짧게 설정한다면, 비교적
XSS를 보완할 수 있습니다. (공격자가 탈취해도, 시간이 제한되어 있기 때문) - 위에서 설명드린 장점대로
CSRF에서 안전합니다. - 보안과 개발편의 간의 중간타협을 본다면,
Local Storage를 사용할 것 같습니다.
참고 사이트
더 나은 개발경험을 생각하는, 프론트엔드 개발자입니다.