브라우저 저장소의 차이점 (로컬/세션 스토리지), 쿠키와 세션

0. 배경설명

https://jh2021.tistory.com/13

인터넷을 통해 데이터를 보내려면 TCP/IP 프토토콜로 보내는 IP주소, 받는 IP주소, 순서, 검증 등의 정보로 데이터를 한번 감싸고 그안에 데이터는 HTTP 프로토콜이라는 규약으로 묶어서 데이터를 주고 받게 된다. 여기서 HTTP 프로토콜은 특징들이 있다.

🔸HTTP 프로토콜 특징
1) 무상태성
- HTTP는 각 요청과 응답이 독립적이며 서로 연결되어 있지 않다. 서버는 이전에 했던 요청에 대한 정보를 저장하고 있지 않다.
- HTTP 상태 정보를 기억하고 있지 않기 때문에 동일한 클라이언트가 재요청할 때마다 모든 정보를 다시 보내줘야한다. 
2) 비연결성
- 클라이언트가 서버에 요청을 보내면 서버는 클라이언트에 응답을 보낸 후 연결을 종료한다.
- HTTP/1.1 부터는 "Keep-Alive" 헤더를 통해 연결을 재사용하는 것이 가능해짐.
3) 비연속적
- 각각의 HTTP 요청은 독립적이므로 한번의 요청이 다음 요청의 상태에 영향을 주지 않는다. 

 

이 특징들은 클라이언트와 서버가 데이터를 주고 받을 때 서로 데이터를 기억하지 않으며, 연결은 계속해서 끊긴다는 것을 알 수 있다. 그런데 클라이언트가 서버와 연결이 끊겨도 기억하고 싶은 데이터가 있다면? 만약 로그인하는 과정에서 매번 페이지를 들어갈때마다 로그인을 해야한다면 너무 불편할 것이다. 그래서 데이터를 기억할 수 있도록 세션/쿠키/웹스토리지(로컬스토리지,세션스토리지) 가 등장하게 되었다. 

 

 

🔸쿠키와 세션 한번에 비교하기

	쿠키	세션
저장위치	사용자의 웹브라우저에 직접 저장된다. 따라서 서버에 추가적인 요청을 보낼 때마다 쿠키 정보가 함께 전송된다.	세션 정보는 서버에 저장된다. 사용자의 브라우저는 오로지 세션 ID만을 쿠키에 저장하고, 이를 통해 해당 사용자의 세션 정보에 접근한다.
생명주기	만료 시간이 지정되어 있을 경우 해당 시간까지 유지되며, 만료 시간이 지정되지 않았을 경우 브라우저를 종료할 때 제거된다.	사용자가 웹 사이트를 종료하거나 일정 시간동안 활동이 없을 경우 세션이 종료됨
보안	- CSRF(사이트 간 요청 위조) 위협 - 공격자가 사용자의 요청을 가로챈 뒤 사용자의 의지와 상관없이 보안적으로 위험한 행동을 하게끔 변조하여 부당 이익을 취하는 행위 - XSS (사이트 간 악성 Js 코드를 심는 행위)로부터 안전 ,  서버에서 쿠키의 httpOnly 옵션을 설정하면, Js에서 쿠키에 접근 자체가 불가능	정보가 서버 측에 저장되므로 쿠키보다는 상대적으로 안전하다. 그러나 세션 ID가 탈취될 경우 해당 사용자의 세션 정보에 접근이 가능하므로, 여전히 주의가 필요하다.
용량과 제한	클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20~50개의 값만 가질 수 있다, 하나의 쿠키값은 4KB까지 저장할수 있다.	서버의 저장 용량에 따라 결정된다. 그러나 너무 많은 세션 정보를 저장하면 서버의 메모리 부하가 발생할 수 있다.
용도	방문자의 설정,  로그인 상태(방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?", '아이디 자동완성' 기능),  개인화된 UI 설정, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크, 미 로그인 상태에서 '장바구니 담기' 기능 장기적으로 저장해야하는 정보에 적합	로그인된 사용자의 정보,  장바구니 항목,  일시적인 설정 값 등  짧은 시간 동안 저장해야 하는 정보에 적합

 

1. 쿠키

- 쿠키는 클라이언트와 서버의 연결이 끊겨도 필요한 정보를 기억하게 하기위해 서버에서 데이터를 묶어서 클라이언트의 컴퓨터 혹은 브라우저의 메모리에 저장되는 key value로 이루어진 작은 텍스트 파일이다.

 

🔸특징

- ‘Cookie-name : Cookie-value’ 형태의 저장소 구조를 갖습니다.

 

https://jh2021.tistory.com/13

 

🔸쿠키의 동작방식
1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 응답 헤더('Set-Cookie')에 쿠키를 포함 시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
5. 쿠키가 생성되고 나면, 클라이언트가 같은 요청을 할 경우(같은 웹사이트를 접속할때마다)  HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

2. 세션

- 쿠키는 클라이언트가 데이터를 가지고 있다.

-  세션은 서버에서 데이터를 관리하고 고유ID를 생성해 클라이언트를 식별하는 방법이다. (세션 데이터는 보통 서버의 메모리에 저장된다. 이는 사용자의 중요한 정보나 데이터를 브라우저에 직접 저장하지 않기 위한 방법이다.)

- 서버는 연결된 클라이언트의 브라우저에 단 1개의 세션 ID를 생성하여 이를 쿠키에 저장시켜서 클라이언트에 보내주게 된다.

- 해당 도메인에 클라이언트가 다시 들어오면 쿠키안에 저장된 ID를 보고 클라이언트를 식별하는 방식이다. 이를 세션쿠키라고 하는데 브라우저를 끄면 세션쿠키는 삭제되기때문에 보안면에서는 쿠키보다 좋다고 할 수 있다. 하지만 사용자가 많아질 수록 서버의 자원을 많이 사용하게 되는 단점이 있다. 그래서 중요한 정보 등을 기억하기 위해 사용한다. 주로 로그인 같은 상태를 유지할 때 사용한다.

https://jh2021.tistory.com/13

🔸세션 동작방식
1. 클라이언트가 서버에 접속 시 세션 ID를 발급.
2. 클라이언트는 세션 ID를 쿠키에 저장해서 가지고 있음
3. 클라리언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용.
4. 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라언트 정보를 가져옴.
5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답.

 

둘다 쿠키를 이용한다는 방식에서는 동작원리가 비슷하지만, 데이터를 누가 관리하느냐에 차이가 있다. 데이터가 저장되는 곳이 클라이언트냐 서버냐 또한 데이터가 언제까지 유지가 되느냐의 차이가 있을 수 있다.

3. 웹스토리지(로컬스토리지/세션스토리지)

- 웹스토리지는 HTML5 표준부터 지원하게된 클라이언트에 데이터를 저장하는 API 이다. 이또한 클라이언트에 데이터를 저장하는 기술인데, 쿠키의 단점을 보완하기 위해 웹스토리지 기술이 탄생했다.

 

- 쿠키는 4kb의 제한 용량이 있습니다. 웹스토리지는 모바일: 2.5MB, 데스크탑: 5~10MB 의 많은 정보를 저장할 수 있다.
- 또한 정보를 저장할 뿐 쿠키처럼 서버에 전송되지않고 클라이언트 내에서만 유효하다(상대적인 자원 소모가 적다).

- 서버에 전송되지 않기때문에 많은 용량을 저장할 수가 있다.
- 웹스토리지는 오리진(도메인,프로토콜,포트로 이루어진 식별자) 단위로 접근이 제한되는 특성 덕분에 CSRF(Cross Site Request Forgery)로 부터 안전하다.
- 웹스토리지는 데이터를 영구적으로 저장할 수 있다. 쿠키는 만료일자가 넘으면 삭제되고 세션은 서버가 종료되거나 브라우저를 종료하면 삭제된다. 웹스토리지의 로컬 스토리지는 강제적으로 삭제나 초기화를 할 때만 사라진다.

 

 

	로컬 스토리지	세션 스토리지
수명	- 데이터는 만료되지 않고, 브라우저를 닫거나 컴퓨터를 재부팅하더라도 지속적으로 저장됨. - 사용자가 명시적으로 데이터를 삭제하지 않는 한, 데이터는 영구적으로 유지됨.	- 탭이나 브라우저를 닫을 때 데이터는 사라진다.  - 다른 탭에서 동일한 페이지를 열면, 그 탭에는 다른 저장소 인스턴스가 있다.
접근범위	- 동일한 출처(즉, 도메인, 프로토콜, 포트)의 모든 페이지와 탭에서 localStorage에 저장된 데이터에 접근할 수 있다.	- 데이터는 오직 같은 탭 또는 페이지에서만 접근 가능하다. - 즉, 동일한 웹 페이지를 새 탭이나 창에서 열면 새로운 sessionStorage 인스턴스가 생성된다.
용량	5MB~10MB의 저장 용량	5MB~10MB의 저장 용량
보안	- 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전 - XSS로부터 위험 - local storage에 접근하는 Js 코드로 쉽게 접근 가능	- 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전 - XSS로부터 위험  - local storage에 접근하는 Js 코드로 쉽게 접근 가능
용도	- 로그인 화면에서 ‘자동 로그인' 기능	- 임시로 유지되는 입력 폼 정보 - 새로고침 시 데이터 유지 정보 - 일회성 로그인 정보

 

---

참고자료

https://jh2021.tistory.com/13

웹 스토리지(로컬 스토리지, 세션스토리지)의 모든 것 with 세션, 쿠키

https://adjh54.tistory.com/57

[JS] 쿠키 / 웹 스토리지(로컬 / 세션 스토리지) 비교하며 이해하기

https://racoonlotty.tistory.com/entry/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80%EC%99%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

쿠키와 세션 그리고 로컬 스토리지와 세션 스토리지