쿠키, 세션, 웹 스토리지

🍪 HTTP 프로토콜의 특징

• 비연결 지향(Connectionless): 클라이언트가 서버에게 Request를 보내고, 서버가 클라이언트에게 Response를 보내면 TCP/IP 연결을 끊는 특성
• 무상태(Stateless): 통신이 끝나면 상태 정보를 유지하지 않는다.

이러한 HTTP 프로토콜의 특징으로, 클라이언트의 로그인 정보나 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화되는 것!

이러한 문제점을 해결하기 위해 데이터 저장에 사용하는 것이 쿠키, 세션, 웹 스토리지 개념입니다!

 

🍪 쿠키

출처: https://jh2021.tistory.com/13

• 클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일이다.
• 클라이언트에 300개까지 쿠키 저장 가능, 하나의 도메인당 20개의 값만 가질 수 있으며, 하나의 쿠키 값은 4KB까지 저장이 가능하다.
• Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 보관할 수 있다.
• 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버로 전송한다.
• 쿠키의 만료일을 지정하면 영속 쿠키(Persistenct Cookie), 지정하지 않으면 세션 쿠키라고 합니다.
  • 세션 쿠키는 브라우저를 닫으면 자동으로 삭제 되고, 영속 쿠키는 지정한 만료일이 지나면 삭제됩니다. 만료일을 넉넉하게 잡으면 반영구적으로 쿠키를 사용할 수 있습니다.
  • 여기서 세션 쿠키는 쿠키의 한 종류이지, 세션을 저장하는 쿠키를 의미하는게 아닙니다.
  • 브라우저를 닫고 다시 열었을 때에도 로그인 상태로 남겨두고 싶다면 영속 쿠키에, 그게 아니라면 세션 쿠키에 세션 ID를 담도록 개발해야 합니다.

 

쿠키 동작 과정

1. 클라이언트가 서버로 페이지를 요청한다.
2. 서버에서 클라이언트 측에 저장하고 싶은 정보를 담아 쿠키를 생성한다.
3. Response HTTP 헤더의 Set-Cookie에 쿠키를 포함시켜 응답한다.
4. 클라이언트는 쿠키를 보관한다. 이 때, 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있는다.
5. 브라우저가 서버로 요청을 보낼 때 HTTP 헤더에 쿠키를 함께 보낸다.
6. 서버에서 쿠키를 읽어 이전 상태를 변경 할 필요가 있을 때 쿠키를 업데이트 하며, 변경된 쿠키를 HTTP 헤더에 포함시켜 응답한다.

 

쿠키 단점

• 요청 시 쿠키의 값을 그대로 보내기 때문에 유출 및 조작당할 위험이 존재하므로 보안에 취약함
• 용량 제한
• 쿠키의 사이즈가 커질수록 네트워크에 부하가 심해짐

 

🍪 세션

출처: https://jh2021.tistory.com/13

• 사용자 정보를 파일 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.
• 서버에서 클라이언트를 구분하기 위해 고유한 세션 ID를 부여하여 쿠키에 저장시켜 클라이언트에게 보내준다. (세션쿠키)
• 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태를 유지한다.
• 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정 가능하다.
• 데이터를 서버에 두고 브라우저를 끄면 세션 쿠키(영속 쿠키가 아니라 세션 쿠키에 세션 ID를 저장한 경우)는 사라지기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 자원을 많이 차지하게 된다.

 

세션 동작 과정

서버에 설정된 것에 따라 다르겠지만, 일반적으로 서버는 처음 요청을 받았을 때 등록된 세션 ID가 없으면 새로운 세션을 생성하여 응답할 때 클라이언트에게 알려준다.

1. 클라이언트가 웹사이트에서 로그인하면 세션이 서버 메모리 혹은 데이터베이스에 저장된다.
2. 생성된 세션을 쿠키 값에 담아 응답에 포함해서 함께 보낸다.
3. 클라이언트는 이 후 요청을 보낼 때 쿠키에 세션 ID를 저장하여 함께 보낸다.
4. 서버는 이미 세션 ID를 가진 클라이언트라고 인식할 수 있다.

 

세션 단점

• 쿠키를 포함한 요청이 외부에 노출되더라도 세션 ID 자체는 유의미한 개인정보를 담고 있지 않지만, 세션 ID 자체를 탈취하여 클라이언트인 척 위장할 수 있다는 한계가 존재한다.
• 사용자가 많아질수록 서버 자원을 많이 차지하게 된다.

 

쿠키 vs 세션

• 데이터 저장 위치: 쿠키는 클라이언트, 세션은 서버
• 보안: 저장 위치 때문에 쿠키는 스니핑에 당할 우려가 있지만, 세션은 쿠키를 이용해 세션 아이디만 저장하고 서버에서 처리하기 때문에 보안성은 쿠키보다 세션이 높다.
• 라이프 사이클: 쿠키는 브라우저를 종료해도 만료 기간이 남아있으면 존재하지만, 세션은 브라우저 종료 시 만료 기간에 상관없이 종료됨
• 속도: 쿠키 > 세션

 

🍪 웹스토리지

• 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소
• 간단한 Key-Value 스토리지 형태
• 쿠키와 달리 자동으로 서버로 전송되지 않음 -> 따라서 저장 용량이 더 큼!
• 오리진(도메인, 프로토콜, 포트) 단위로 접근이 제한됨
• 쿠키보다 큰 저장 용량 지원(모바일 2.5MB, 데스크탑 5~10MB)
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음 (웹 스토리지 객체 조작은 Javascript 내에서만 수행)
• 오직 문자형 데이터 타입만 지원
• 유효 범위와 보존 기간에 따라 로컬 스토리지와 세션 스토리지로 나뉘며, 같은 Storage 객체를 상속하기 때문에 메서드가 동일함

로컬 스토리지 (Local Storage)

• 사용자가 직접 데이터를 지우지 않는 이상, 브라우저를 종료해도 계속 브라우저에 남아있음 (반영구적)
• 동일한 도메인을 사용하면 세션 스토리지와 다르게 새 창을 띄워도 동일한 로컬 스토리지에 접근할 수 있음
• 지속적으로 필요한 데이터 저장 (자동 로그인 등)

세션 스토리지 (Session Storage)

• 데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거됨
• 일시적으로 필요한 데이터에 사용함 (일회성 로그인 정보 등)

 

 

🍪 References

https://doqtqu.tistory.com/306#1.%20%EC%BF%A0%ED%82%A4(Cookie) 

쿠키 vs 세션 vs 웹 스토리지(로컬 스토리지, 세션 스토리지)

https://jh2021.tistory.com/13

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

https://interconnection.tistory.com/74

쿠키와 세션 개념

https://thecodinglog.github.io/web/2020/08/11/what-is-session.html

세션 동작 원리 - 쿠키와 세션의 관계