쿠키, 세션, 웹스토리지

쿠키(cookie) 🍪

쿠키(cookie)란?

• 만료기간이 있는 클라이언트(브라우저) 단에 저장하는 키와 값이 들어가있는 작은 데이터 파일

쿠키(cookie)의 특징

• 브라우저를 종료하더라도 유지된다
• 쿠키의 저장구조는 cookie-name = cookie-value 형태의 구조로 저장된다
• 하나의 String내에 속성을 세미콜론(;)을 기준으로 구분을 짓는다
• 텍스트 파일의 형태로 최대 4KB의 용량 제한을 가지고 있는다(value값의 제한을 의미)
• 요청과 응답만이 존재했던 HTTP 웹세계에서 이전에 서버와 클라이언트가 주고받은 내역을 시억하고 불러올 수 있는 역할을 수행한다
• 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되어도 인증이 유지된다
• Authentication 인증 정보 또는 세션에 저장된 토큰 값 등 보안에 필요한 정보를 저장하는 용도로도 사용한다
• 특정 시간 초과 후에 쿠키 데이터를 무효화하는 것이 중요하다
• 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다
• 클라이언트 상태 정보 저장 : 쿠키는 클라이언트의 브라우저에 작은 데이터 조각을 저장하여 정보를 유지하거나 추적한다
• 자동 전송 : 사용자가 요청하지 않아도 쿠키는 모든 HTTP 요청과 함께 자동으로 서버로 전송된다

쿠키의 구성요소

• 이름(name) : 각각의 쿠키를 구별하는데 사용되는 이름
• 값(value) : 쿠키의 이름과 관련된 값
• 유효시간(expires) : 쿠키의 유지시간
• 도메인(domain) : 쿠키를 전송할 도메인
• 경로(path) : 쿠키를 전송할 요청 경로

쿠키의 동작 원리

1. 클라이언트가 서버에 HTTP 요청
2. 서버가 HTTP 응답 시 set-cookie를 통해 쿠키를 생성하여 전달
3. 클라이언트는 이제부터 매 HTTP Request시 HTTP Header에 쿠키를 담아서 전송
4. 만료기간 전이라면 쿠키는 브라우저에 저장되어 있으며 항상 요청 시 사용 가능
5. 만료가 됐다면 클라이언트가 새로 서버에 요청하여 쿠키 새로 발급

쿠키의 장단점

장점

• 대부분의 브라우저가 지원함
• 데이터 유효기간이 지정가능함
• XSS(사이트간 악성 js 코드를 심는 행위)로 부터 안전함

단점

• 매우 작은 데이터 저장용량(4KB)
• 매번 서버에 HTTP 요청 시 같이 전달(불필요할시에도)
• 암호화가 되어있지 않아 정보 도난의 위험이 있음

세션(session)

세션(session)이란?

• 일정 시간 동안 같은 사용자(브라우저)로 부터 들어오는 일련의 요구를 하나의 상태로 보고, 그 상태를 유지시키는 기술
  *일정시간은 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점부터 웹 브라우저를 종료하여 연결을 끝내는 시점

세션(session)의 특징

• 서버 측 상태 유지 : 세션은 사용자의 상태 정보를 서버 측에서 관리한다
• 세션 ID 부여 및 유지 : 서버는 클라이언트를 구분하기 위해 세션 ID를 부여하고, 이를 통해 사용자의 인증 상태를 브라우저 종료 시까지 유지한다
• 세션 ID의 쿠키 전송 : 데이터 자체는 클라이언트에 전송되지 않고, 세션 ID만 쿠키를 통해 클라이언트와 주고받는다
• 접속시간에 제한을 두어 일정시간 응답이 없다면 정보가 유지되지 않게 설정 가능하다
• 데이터를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질 수록 서버 메모리를 많이 차지하게 된다

💡쿠키(cookie) vs 세션(session)

	쿠키	세션
데이터 저장위치	클라이언트	서버
보안	저장위치 때문에 스니핑 당할 우려가 있음	쿠키보다 보안성이 더 높음
라이프사이클	브라우저를 종료해도 만료기간이 남아있으면 남아있음	브라우저 종료시 만료기간에 상관없이 종료

웹 스토리지(web storage)

웹 스토리지(web storage)란?

• 서버가 아닌 클라이언트 내에서 데이터를 저장할 수 있도록 지원하는 저장소
• 쿠키의 단점을 보완하기 위해서 HTML5에서 추가된 로컬 스토리지 와 세션 스토리지 를 의미한다
• key-value 쌍의 형태로 데이터 저장

웹 스토리지(web storage)의 특징

• 데이터 저장 목적 : 데이터를 서버에 저장하는 것이 아닌, 클라이언트 측에 저장해야 할 때 사용된다
  중요하지 않은 데이터의 경우 서버 저장이 낭비일 수 있다
• javascript 제어 : 웹 스토리지의 데이터는 서버로 자동으로 전송되지 않으며 javascript를 통해 제어된다
• 모바일은 최대 2.5KB의 용량 제한, 브라우저는 최대 5KB의 용량 제한을 가지고 있다
• 값(value)은 오직 문자열(string) 데이터만 지원한다
• 이외의 타입은 string 타입을 파싱하여 JSON 혹은 numger 타입으로 전환하여 사용하여아 한다
• 쿠키와 다르게 네트워크 요청 시 서버로 저장이 되지 않는다
• 서버의 DB에 저장하는 데이터에 비해 중요도가 낮거나 유실되어도 무방한 데이터를 저장하는 것을 권장!

로컬스토리지(local storage)란?

• 만료기간이 존재하지 않으며 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되는 저장소

특징

• 직접 로컬스토리지를 초기화 하거나 제거하지 않는다면 만료기간이 존재하지 않아서 데이터를 영구적으로 저장 가능하다
• 페이지를 변경하거나 브라우저를 닫더라도 값은 유지된다
• 도메인이 다른 경우에는 로컬스토리지 공유가 불가능하다

세션스토리지(session storage)란?

• 브라우저의 탭 안에 유효한 저장소이며, 브라우저를 닫는 경우 소멸되는 저장소

특징

• 브라우저 세션이 유지되는 동안만 데이터를 저장한다
• 브라우저가 다른 경우 해당 저장소 값은 유효하지 않다
• 같은 도메인이라도 세션이 다르면 접근이 불가능하다

참고
https://joyhong-91.tistory.com/51
https://adjh54.tistory.com/57