쿠키와 세션, 로컬스토리지와 세션 스토리지
웹 프론트엔드 개발에서는 여러개의 저장소를 사용해야한다. 로그인에서 사용되는 쿠키나 세션, 브라우저의 정보를 저장하는 로컬 스토리지와 세션 스토리지.. 등이 있다. 해당 정보에 대해서 자세히 정리해보고자 한다.
쿠키
- 쿠키는 클라이언트 로컬에 저장되는 key, Value 형태의 작은 데이터
- document.cookie 를 하면 현재 쿠키 정보가 나온다.
- 사용자 이증의 제한 시간을 걸어둘 수 있기 때문에 로그인에서 주로 사용됨
- 쿠키는 클라이언트 상태 정보를 저장했다가 참조, 서버에 전달하기도 함
- 클라이언트에 최대 300 개 까지 저장 가능, 하나의 도메인에 20개의 값만 가질 수 있고, 하나의 쿠키값은 4kB 까지 저장
- Response Header 에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있음
- 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 시에 헤더에 넣어서 전달
구성요소는 아래와 같다.
- 이름(Name = key)
- 값(Value)
- 유효시간(Expires)
- 도메인(Domain)
- 경로(Path)
쿠키의 동작 방식
- 클라이언트가 페이지를 요청
- 서버에서 쿠키를 생성
- HTTP 헤더에 쿠키를 포함시켜서 응담
- 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관
- 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
- 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 업데이트
로컬 스토리지
HTML5 에서 추가된 저장소이다. 간단한 키와 값을 저장할 수 있다.
사용자가 지우지 않는다면 데이터가 영구적으로 저장된다. 자동 로그인 여부정도를 기억 할 수 있다.
세션 스토리지
로컬 스토리지처럼 클라이언트 브라우저에 저장된다. 하지만 윈도우, 탭 닫을 때마다 제거되는 것이 차이점이다. 일회성 로그인 정도에 활용 될 수 있다.
세션
- 세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에서 저장하는 쿠키와는 다르게 서버측에서 관리 할 수 있는 저장소로 이해하면 된다
- 서버에서는 클라이언트를 구분하기 위해 세션 ID 를 부여해서 웹 프라우저가 서버에 접속할떄까지 인가를 할 때 사용한다
- 접속시간에 제한을 두어 일정 시간 응답이 없다면 정보가 지워지게 설정할 수 있다
- 사용자 정보를 서버에 저장한다는 것 자체가 메모리에 큰 부담
- 동시 접속자가 많은 서버인 경우 토큰을 이용하는 것이 나을 수 있음
- 클라이언트가 Request 를 보내면 해당 서버의 엔진이 클라이언트에게 유일한 ID 를 부여하는데 이것이 세션 ID
세션의 동작 방식은 아래와 같음
- 클라이언트가 서버에 요청하고 서버에서 세션 ID 발급
- 클라이언트는 세션 ID 에 대해 쿠키를 저장
- 서버에 요청할때마다 쿠키를(세션 ID) Request 헤더에 넣어서 함게 전송
- 서버는 해당 세션 ID 를 전달받아서 클라이언트 정보를 확인
- 응답
결과적으로 보안면에서는 우수한 성능을 보일 수 있지만 메모리문제와 동시접속자 문제가 보완이 필요하다.
토큰
쿠키/세션에 한계로 인해 토큰이 등장했다. 토큰은 서버의 상태를 저장하지 않는다. 순서는 아래와 같다.
- 사용자 로그인 요청
- DB에서 사용자 정보 확인
- Access Token(JWT) 발급해서 Response 와 함께 전달
- 이후 데이터 요정할때마다 JWT 를 함께 전달
- 검증후 Response 전달
위에서 언급한 바와 같이 세션을 통해 서버에서 정보를 저장하는 것이 아닌 JWT 라는 암호화된 인증방식을 통해서 전달하는 것이다. 이것 또한 만료기한을 짧게해서 보안에 신경쓸 수 있다.
정리
[1] 차이 정리
-
쿠키의 단점을 보완해 HTML5에서 '웹스토리지'라는 기술 탄생.
1-1) 웹스토리지 : 로컬스토리지, 세션스토리지.
1-2) 웹스토리지는 Key와 Value 형태로 이루어짐.
1-3) 웹스토리지는 클라이언트에 대한 정보를 저장.
1-4) 웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장.
- 로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장 ex) 자동 로그인 저장
-
세션스토리지는 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제 ex) 입력 폼 정보 저장
3-1) 로컬&세션스토리지
장점1 : 서버에 불필요하게 데이터를 저장하지 않는다.3-2) 로컬&세션스토리지
장점2 : 용량이 크다. (약 5Mb, 브라우저마다 차이 존재)
3-3) 로컬&세션스토리지 단점 : HTML5를 지원하지 않는 브라우저의 경우 사용 불가
-
쿠키는 만료 기한이 있는 Key, Value 형태의 저장소
4-1) 쿠키 장점 : 대부분의 브라우저가 지원
4-2) 쿠키 단점1 : 매 HTTP요청마다 포함되어 api호출로 서버에 부담.
4-3) 쿠키 단점2 : 쿠키의 용량이 작음 (약 4Kb)
4-4) 쿠키 단점3 : 암호화 존재 x -> 사용자 정보 도난 위험
