[React] JWT 인증키 저장하기

현재 프로젝트에서 JWT 인증키를 이용해서 로그인을 구현하려고 한다.

이때, 이 인증키를 어디에 저장해야할까?

 

현재 다른 데이터들은 Redux - persist를 이용해서 session storage에 저장하고 있다.

로컬을 쓰지 않은 이유는 창을 닫으면 정보를 삭제하고 싶었기 때문..(이후 수정할지도..)

 

 

여튼, JWT Token을 local storage나 session storage 같은 Web storage에 저장하면

클라이언트에서 자바스크립트에서 요청을 담아 보내기 때문에 XSS 공격에 취약하다고 한다.

 

XSS이란?

= Cross Site Scripting

공격하려는 사이트에 악의적인 스크립트를 삽입해서 해당 스크립트가 당하는 사람에게 동작하도록 하는 것

이를 통해서 당하는 사람은 개인 정보와 쿠키 정보등을 탈취당하고 악성코드 감연, 세션 하이재킹 공격등을 당한다.

 

• http 프로토콜을 통작하는 과정에 발생
• 웹 응용프로그램이 사용자로부터 입력받은 값을 제대로 검사하지 않고 사용할 경우 나타남

---

그럼 어떤 방법을 써야하나..

# 쿠키(Cookie) 

쿠키는 웹사이트 접속 시 접속자의 개인장치에 저장됨

하지만, 쿠키도 자바스크립트로 접근이 가능하기 때문에 HTTPOnly 옵션을 걸어줘야함

또한 secure옵션도 걸어줘야함

 

이렇게 해도 쿠키는 CSRF 공격에 취약하다..

CSRF란?

사용자가 자신의 의지와 무관하게 공격자가 의도한 행동을 하여

특정 웹페이지를 보안에 취약하게 하는 공격 방법

 

XSS 공격은 악성코드가 클라이언트에서 발생하고, CSRF 공격은 서버에서 발생함

 

 

그래서 Refresh Token이나 Access Token으로 나눠서 인증을 해야한다.

1. 사용자가 로그인하면, 인증 서버는 Access Token과 함께 Refresh Token을 발급
2. 사용자는 Access Token을 이용해서 리소스에 접근 가능
3. Access Token이 만료되면 Refresh Token을 이용해 인증 서버에 요청을 보내 새로운 Access Token을 발급 받음
4. Refresh Token까지 만료되면 재로그인을 해야함

이러한 흐름으로 진행된다.

하지만 이 방법을 이용하면 너무 프로젝트의 볼륨이 커짐...

 

 

---

 

여튼, 그래서 우리 프로젝트는 아마도? 사용자 인증 관련은 쿠키에 저장할 것 같음

대신 HttpOnly와 Secure은 같이 걸어줘야할 것 같다.

 

 

어렵다 보안...릳액트,..