실전프로젝트시 jwt 토큰(access, refresh token)을 받아 Cookie에 저장해주는 방식으로 인증,인가를 진행했었다.
localStorage와 sesssionStorage에 대한 정리와 jwt에 대해서도 더 알아보고자 정리해본다.
🙂 HTTP는 비연결성 및 무상태성이라는 특징을 가지기에 클라이언트의 이전 상태 및 정보를 남기지 않는다
서버는 클라이언트를 식별할 수 없기에 브라우저를 새로고침 누를 때마다 로그인을 해야한다
💥그래서 필요한 것이 브라우저를 새로고침해도 로그인이 유지가 되는 방법 ! 그것은 Web Storage와 Cookie, Session이다
Web Storage
- HTML 5 에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인
Web Storage(웹 스토로지) 스펙이 포함되었다 - Web Storage 는 '키/ 값' 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다
- 영구저장소(localStorage) 와 임시저장소(sessionStorage)를 따로 두어
데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다
👉 LocalStorage
- Window 전역 객체의 LocaStorage에서 컬렉션을 통해 저장과 조회가 가능
- 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관 가능 (브라우저 종료해도 데이터 계속 사용 가능)
- javascript로 삭제 가능
- 클라이언트측에서만 읽을 수 있음
- api 호출에 담을 수 없어 서버에 전송 불가능
👉 Session
- Window 전역 객체의 LocaStorage에서 컬렉션을 통해 저장과 조회가 가능
- 브라우저가 종료되면 데이터도 같이 삭제됨(session 기간에만 데이터 저장)
- 데이터는 서버로 전송되지 않는다
- 클라이언트측에서만 읽을 수 있음
Cookie 🍪
- 서버로 재전송해야하는 데이터를 저장한다
- 서버와 클라이언트 측에서도 읽을 수 있음
- 설정된 기간동안 지정
- 설정에 따라 api요청마다 함께 전송할 수 있다
- 로그인 요청시 서버에 응답을 받을 때, 응답헤더의 Set-Cookie에 담는다(key-value 형식)
- 이후 클라이언트는 요청을 보낼 때 마다 매번 저장된 쿠키를 요청하여 요청 헤더에 Cookie를 담아 보낸다
- 내가 사용한 방법 (
access-token과refresh-token사용)
- 내가 사용한 방법 (
- 🤢 쿠키🍪의 단점
- 웹 브라우저마다 쿠키에 대한 지원 형태가 다르기 때문에 브라우저간 공유가 불가능
- 용량 제한이 있다
- 보안에 취약하다 (
httpOnly플래그 사용시 LocalStorage보다 XSS 공격에 강하다, 요청시 쿠키의 값을 그대로 보낸다 )
- 요청 시 쿠키의 값을 그대로 보내기에 유출 및 조작 당할 위험이 있음
Session
- 일정 시간동안 같은 사용자(브라우저)로부터 들어오는 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술
- 웹 서버의 저장되는 쿠키(=세션 쿠키)
- 브라우저를 닫거나, 서버에서 세션을 삭제했을때만 삭제가 되므로,
쿠키보다 비교적 보안이 좋다. - 저장 데이터에 제한이 없다.(서버 용량이 허용하는 한...)
- 각 클라이언트 고유 Session ID를 부여한다(Session ID로 클라이언트를 구분하여 각 클라이언트 요구에 맞는 서비스 제공)
- 웹 서버에서 정보를 저장하고 불러오기에 서버 용량의 의존도가 크다
그렇다면 Cookie냐 Session이냐
- 세션이 쿠키에 비해 보안도 높은 편이나 쿠키를 주로 사용한다
그 이유는 세션은 서버에 저장되고, 서버 자원을 사용하기에 사용자가 많을 경우 소모되는 자원이 상당하다. 이러한 자원관리 차원에서 쿠키와 세션을 적절한 요소 및 기능에 병행사용하여, 서버 자원의 낭비를 방지하며 웹사이트의 속도를 높일 수 있다고 한다.
출처: https://hahahoho5915.tistory.com/32
출처: https://velog.io/@ejchaid
https://seunghyun90.tistory.com/43
https://m.mkexdev.net/59
http에 대하여 https://www.zerocho.com/category/HTTP/post/5b344f3af94472001b17f2da
https://hahahoho5915.tistory.com/32
winwin