[React] JWT 토큰 저장 위치

안세웅·2023년 4월 25일

JWT React

React 사용 시 JWT를 어디에 저장해야할까?

1.웹 스토리지(web storage)

로컬 스토리지(local Storage)

세션 스토리지(sessionStorage)

React

목록 보기

7/8

React 사용 시 JWT를 어디에 저장해야할까?

서버와 API 연동을 할 때 JWT 토큰을 발급받아 인증 하고 있습니다.
연동 중 토큰을 어디에 저장해야 할까? 에 대한 의문이 들었습니다.

토큰을 저장하는 방식은 여러가지가 있지만 대표적으로 두가지를 확인 해보았습니다.

1.웹 스토리지(web storage)

웹 스토리지(web storage)는 데이터를 서버가 아닌 클라이언트에 저장 할 수 있도록 지원하는 기능입니다.
쿠키와 유사한 기능을 가졌습니다만, 쿠키는 4KB까지 밖에 저장공간을 가지지 못하는 반면 웹 스토리지는 약 5MB정도의 저장공간을 가질 수 있다는 부분에서 다르다고 볼 수 있습니다.

웹 스토리지는 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공하고 있습니다.

로컬 스토리지(local Storage)

로컬 스토리지(local storage)는 데이터를 브라우저에 반영구적으로 저장하며, 브라우저를 종료 후 재시작해도 데이터가 남아있습니다. 또한 다른 창과 브라우저를 통해서도 접근이 가능합니다.
자바스크립트를 통해 localstorage에 데이터를 저장 할 수 있습니다.

세션 스토리지(sessionStorage)

세션 스토리지(session storage)는 로컬 스토리지와 유사한 기능을 하고 있으나 브라우저가 닫히면 데이터는 사라지게 되며 다른 창과 브라우저로의 데이터 공유또한 불가능 합니다.

웹 스토리지는 자바스크립트로 제어 가능합니다. 즉 XSS공격에 대한 위험이 있습니다.
해커가 자바스크립트 코드를 웹페이지에 심어 해당 코드로 사용자의 정보를 탈취하는 일이 가능합니다.

XSS 공격
크로스 사이트 스크립팅(Cross Site Scripting, XSS).
공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것

2.쿠키(cookie)

쿠키는 유저들의 효율적이고 안전한 웹 사용을 보장하기 위하여 웹사이트에 널리 사용되고 있습니다.
쿠키는 웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일입니다.

쿠키 역시 자바스크립트로 접근이 가능하므로 HTTP Only 옵션을 걸어주어야 합니다. 또한 HTTPS가 적용되지 않은 이미지 등으로 인해 쿠키를 탈취당할 수 있으므로 secure 옵션도 걸어주어야 합니다. 이렇게 해주면 쿠키를 탈취당할 위험도 방지할 수 있고, 자바스크립트로 쿠키 값을 취득하는 것도 막을 수 있습니다. HTTP 통신 자체를 하이재킹 당하더라도, HTTPS로 암호화가 되어 있기 때문에 쿠키 값을 알아낼 수는 없습니다.

이렇게 보면 쿠키에 토큰을 담으면 안전할 것이라고 생각이되나
쿠키는 CSRF(Cross-Site Request Forgery) 공격에 취약합니다.

CSRF 공격
원클릭 공격 또는 세션 라이딩(Cross-Site Request Forgery).
CSRF는 링크 또는 스크립트를 사용하여 사용자가 인증된 대상 사이트로 원하지 않는 HTTP 요청을 전송.
쉽게말해 "로그인 된 상태로 특정 위험한 동작을 하게 만든다" 고 할 수 있습니다.