[Web] 쿠키, 웹 스토리지 (로컬 스토리지, 세션 스토리지)

쿠키란?

1. 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미
2. 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장 (↔세션)
3. 매번 서버에 전송되므로 크기가 클 경우 서버에 부담이 갈 수 있다
4. SameSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다 (CSRF 취약)
5. 대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재
6. 대부분의 브라우저가 지원

 

• document.cookie하면 현재 쿠키 정보가 나옴
• 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지
• 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질수 있다
• Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다
• 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송

SameSite란?
Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합으로 서버의 쿠키 전송 여부를 결정하게 됩니다
사용가능한 옵션
1. Lax : Cross-Origin 요청이면 'GET' 메소드에 대해서만 쿠키를 전송할 수 있습니다
2. Strict : Cross-Origin이 아닌 same-site인 경우에만 쿠키를 전송 할 수 있습니다
3. None : 항상 쿠키를 보내줄 수 있습니다. 다만 쿠키 옵션 중 Secure 옵션이 필요합니다

 

 

쿠키의 구성 요소

1. 이름(Name): 각각의 쿠키를 구별하는 데 사용되는 이름
2. 값(Value): 쿠키의 이름과 관련된 값
3. 유효시간(Expires): 쿠키의 유지시간
4. 도메인(Domain): 쿠키를 전송할 도메인
5. 경로(Path): 쿠키를 전송할 요청 경로

 

https://velog.io/@kante/HTTP-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98

 

쿠키의 동작 방식

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 헤더에 쿠키를 포함시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

서버에서 클라이언트로 쿠키를 처음 전송하게 된다면 헤더에 Set-Cookie라는 프로퍼티에 쿠키를 담아 쿠키를 전송
이후 클라이언트 혹은 서버에서 쿠키를 전송해야 한다면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송

HTTP 프로토콜 환경에서 서버는 클라이언트가 누구인지 확인이 필요

-> HTTP 프로토콜이 connectionless, stateless한 특성이 있기 때문

 

클라이언트는 전달받은 쿠키를 요청과 같이 전송하여 Stateless 한 인터넷 연결을 Stateful 하게 유지 가능

-> 쿠키는 오랜 시간 동안 유지될 수있고, 요청을 할 때마다 기본 4kb의 데이터를 사용해야 합니다

-> 4kb 중에는 서버에 필요하지 않은 데이터가 있거나 민감한 정보가 노출될 위험도 있습니다 (쿠키의 단점)

 

웹 스토리지

1. 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다
2. 키(Key)와 값(Value)의 쌍 형태로 데이터를 저장
3. 쿠키와 달리, 서버에 전송되지 않으므로 서버에 부담이 가지 않는다 (명시적으로만 전송 가능)
4. 쿠키와 달리, 필요한 경우에만 꺼내 쓰는 것이므로 자동 전송의 위험성이 없다. 다른 도메인에서 요청하는 경우에는, 꺼내 쓰고 싶어도 도메인 단위로 접근이 제한되는 특성 덕분에 값을 꺼내 쓸 수 없다 (CSRF 안전)
5. 쿠키와 달리, 대략 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않는다
6. HTML를 지원하지 않는 브라우저에서는 사용할 수 없다

 

로컬 스토리지

1. window.localStorage 객체
2. 브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 한 영구적으로 저장
3. 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능
4. 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용
5. 지속적으로 필요한 정보를 저장하기 좋다

 

localStorage.setItem('name', 'wooyoung');
localStorage.setItem('birth', '1992');

localStorage.getItem('name'); // wooyoung
localStorage.getItem('birth'); // 1992 (문자열)

localStorage.removeItem('birth');
localStorage.getItem('birth'); // null (삭제됨)

localStorage.clear(); // 전체 삭제

 

localStorage.setItem(키, 값)으로 로컬스토리지에 저장
localStorage.getItem(키)로 조회
localStorage.removeItem(키)하면 해당 키 삭제
localStorage.clear()하면 스토리지 전체가 삭제

 

세션 스토리지

1. window.sessionStorage 객체
2. 세션 쿠키와 달리, 탭/윈도우 단위로 세션 스토리지가 생성
3. window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭/윈도우를 닫을 시 데이터 삭제
4. 동일한 탭/윈도우라도 다른 도메인이라면 또 다른 세션 스토리지 생성
5. 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작
6. 윈도우 복제로 생성된 경우, 혹은 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성
7. 잠시 동안 필요한 정보를 저장하기에 유용 (ex. 새로고침시 데이터 유지/ 로그인 유지)

 

// clear, getItem, setItem, removeItem, key 등 모든 메소드가 같습니다.

 

	쿠키 (Cookie)	로컬 스토리지 (Local Storage)	세션 스토리지 (Session Storage)
매번 요청마다 전송?	O	X	X
용량 제한	4KB	모바일: 2.5MB 데스크탑: 5MB~10MB	모바일: 2.5MB 데스크탑: 5MB~10MB
어떻게 얻는지	document.cookie	window.localStorage	window.sessionStorage
영구적인가?	유효기간 존재	사용자가 지우지 않는 한 영구적	윈도우나 브라우저 탭을 닫으면 제거
저장 방식	Key-value	Key-value	Key-value