Frontend - 쿠키, 세션, 웹 스토리지

 

 

쿠키, 세션, 웹 스토리지가 왜 필요한지 알려면 HTTP 프로토콜의 특징을 알아야합니다.

 

 

HTTP 프로토콜 특징

 

1. 비연결지향 ( Connectionless ) : 서버가 클라이언트의 Request에 Response하면 연결이 끊긴다

 

2. 무상태 ( Stateless ) : HTTP 프로토콜은 상태 정보를 저장하지 않는다.

 

 

즉, 사용자의 로그인 정보 등 서버에 접속한 경우 유지되어야하는 데이터들을 HTTP 프로토콜은 처리하지 못합니다.

 

요청에 응답하면 연결이 끊기고, 상태 정보를 저장하지 않기 때문에 페이지를 이동할때마다 유지되는 데이터가 존재하지 않습니다.

 

페이지를 이동할때마다 새로 로그인을 해야한다면 굉장히 불편할것입니다.

 

위 문제를 쿠키, 세션, 웹 스토리지를 이용해 해결합니다.

 

 

쿠키

 

 

클라이언트(브라우저) 로컬에 저장되는 key-value로 구성된 작은 파일. 

 

---

쿠키의 사용 용도

 

페이지 변경에도 유지시킬 데이터를 저장할 용도

쇼핑몰 장바구니 기능

웹 사이트 아이디, 비밀번호 저장

 

---

쿠키의 동작 순서

 

 

 

1. 클라이언트 측에서 HTTP 요청

2. 서버는 쿠키를 HTTP 헤더에 담아서 응답 ( Set-Cookie )

3. 클라이언트는 쿠키를 포함한 HTTP 재요청

4. 응답 

 

---

쿠키의 구성 요소

 

이름 : 다른 쿠키와 구별하는데 사용하는 이름

값  : 해당 쿠키의 값

만료일 : 쿠키 저장 기간

경로 : 쿠키 전송 요청 경로

도메인 : 쿠키 전송 도메인

 

---

쿠키 특징

 

클라이언트에 총 300개의 쿠키를 저장 가능

 

하나의 도메인 당 20개의 쿠키 소유 가능

 

하나의 쿠키 최대 용량은 4KB(4096byte)

 

---

쿠키 단점

 

보안이 취약하다

 

네트워크를 통해 서버로 전송되는 특징 때문에 보안이 약함.

 

장기간 유지되는 쿠키는 타인이 빼돌릴 가능성이 존재.

 

암호화되지 않은 쿠키를 전송할 경우 쿠키 정보를 탈취하는 스니핑(Sniffing) 공격에 취약.

 

 

 

세션

 

세션이란?

 

쿠키와 구성은 비슷하지만 클라이언트(브라우저) 측 로컬에 파일로 저장되는 쿠키와는 달리 서버 측에 저장되는게 세션

 

클라이언트를 구분하기 위해 서버가 세션 ID를 부여하고 클라이언트의 접속이 종료될때까지 유지

 

브라우저를 닫거나, 서버에서 세션을 삭제했을때만 세션이 삭제됨 -> 쿠키보다 보안이 좋음

 

---

세션의 동작 과정

 

1. 클라이언트가 서버에 http 요청
2. 서버는 http 헤더에 쿠키를 확인하여 SessionId 있는지 확인
3. 없다면 새로운 세션 ID 발급하여 클라이언트에 set-cookie 값으로 SessionId 전달 + 발급한 SessionId는 쿠키로 서버에 저장
4. 클라이언트가 전달된 세션 ID를 받으면 다음 요청부터는 자동으로 세션 ID + 쿠키를 http 헤더에 포함하여 요청
5. SessionId가 있다면 클라이언트가 필요한 데이터 전송

---

세션 사용 예시

 

웹 사이트 로그인 상태 유지

 

---

세션 단점

 

속도면에서 쿠키보다 느림

 

서버에 부하가 심해짐

 

 

쿠키와 세션의 차이

 

 

	쿠키	세션
저장 위치	클라이언트 PC	서버
용량 제한	클라이언트에 총 300개 한 도메인 당 20개 한 개의 쿠키 = 4KB(4096Byte)	서버가 허용하는 한 용량제한 없음
속도	세션보다 빠름	쿠키보다 느림
보안	세션보다 취약	쿠키보다 강함

 

 

웹 스토리지

 

웹 스토리지란?

 

클라이언트에 데이터를 저장할 수 있도록 하는 HTML5의 새로운 기능

 

key-value 형태로 데이터 저장

 

쿠키와 달리 데이터가 서버에 전달되지 않음

 

쿠키와 유사하지만 최대용량이 5MB로 더 크다

 

로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 존재

 

 

로컬 스토리지

웹 스토리지의 한 종류

브라우저나 OS를 종료해도 데이터가 브라우저에 유지됨. 데이터를 반영구적으로 저장이 가능하다.

접근하려는 domain이 다른 경우 로컬 스토리지에 접근 불가

 

세션 스토리지

웹 스토리지의 한 종류

각 세션마다 데이터가 개별적으로 저장됨

세션이 종료되면 세션 스토리지의 데이터로 제거됨

같은 domain이라도 세션이 다르면 접근 불가

 

 

웹 스토리지와 쿠키 차이

 

1. 쿠키는 요청할때마다 전송

 

쿠키가 설정되면 클라이언트 요청이 일어날때마다 같이 서버에 전송됩니다.

웹 스토리지에 저장된 데이터는 서버 측에 전달되지 않기때문에 네트워크 부하가 줄어듭니다.

 

2. 용량 차이

 

한 개의 쿠키 최대용량은 4KB 지만 웹 스토리지의 용량은 5MB로 차이가 큼

 

3. 데이터 저장 기간

 

웹 스토리지는 쿠키와는 다르게 브라우저에 영구적으로 유지하는것이 가능합니다.

쿠키는 만료일자를 넘기면 제거됩니다.

만료일을 길게 설정하여 영구 보존되도록 할 수 있습니다 (Persistent Cookie).

 

 

 

로컬 스토리지와 세션 스토리지 차이

1. 로컬 스토리지는 영구 저장 가능

 

로컬 스토리지는 브라우저에 데이터를 영구 저장할 수 있지만 세션 스토리지의 데이터는 세션이 종료될 경우 같이 제거됩니다.

 

 

 

 

출처

https://ykss.netlify.app/web/storage_session_cookie/

https://interconnection.tistory.com/74

https://doqtqu.tistory.com/306

https://ko.javascript.info/localstorage