Cookie, sessionStorage, localStorage에 관하여

Cookie, sessionStorage, localStorage 모두 웹에서 사용되며,

무엇인가의 상태를 저장한다는 공통점을 가지고 있다.

 

각각의 차이점에 대해 하나씩 알아보자.

---

🍪HTTP 쿠키(웹 쿠키, 브라우저 쿠키)

Using HTTP cookies - HTTP | MDN

서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다.

브라우저측에서 해당 데이터조각들을 저장해놓았다가, 동일한 서버에 재 요청시 저장된 데이터를 함께 담아 전송한다.

쿠키는 서로 다른 요청이 동일한 브라우저에서 들어왔는지를 판단할 때 주로 사용한다.

 

예를 들어 웹사이트에 로그인 시, 서버가 Set-Cookie 헤더로 쿠키 값을 보내주면 이걸 클라이언트가 저장했다가 서버에 request를 보낼 때마다 매번 Cookie 헤더로 인증서 정보를 포함해 보내서 로그인 된 사용자라는 것을 인증받고 서비스에 접근할 수 있게 되는것이다.

 

[서버에서 response하는 경우]

Set-Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;

 

[클라이언트에서 request하는 경우]

☄️ requset시 주소에 해당하는 쿠키가 있으면, 웹브라우저에서 알아서 쿠키를 보내준다!!

Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;

 

 

✔️서버로부터 리스폰스로 Cookie를 받으면 클라이언트에서는 별도로 작업을 해주지 않아도 웹브라우저가 알아서 저장하고, request를 보낼 때도 웹 브라우저가 알아서 저장하고 리퀘스트를 보낼 때도 웹 브라우저가 알아서 보낸다.

✔️ MaxAage 값으로 수명을 지정할 수 있고, 컴퓨터를 껐다 키터라도 쿠키값은 유지되므로 사이트를 한번 로그인하면 일정 기간 동안은 로그인하지 않아도 로그인이 유지된다.

 

 

JavaScript에서는 쿠키를 직접 생성, 변경, 삭제 할 수 있다.

보통은 서버에서 쿠키값 생성하고, 클라이언트측에서는 건드리지 않는 것이 권장되지만, 방법을 한번 알아보자.

 

1) 쿠키 추가 및 수정

document.cookie에 session-id 및 여러 attribute 정보를 지정한다.

아래 코드는 새로운 쿠키를 추가하거나, 기존에 동일한 session-id라는 쿠키가 있다면 쿠키 정보를 수정하게 된다.

document.cookie = "session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;";

 

Get cookie by name

 

 

🍪 쿠키가 가지고있는 Attribute값에 대해 간단히 알아보자.

Domain	브라우저가 쿠키를 보낼 도메인을 지정한다. Domain = korea.kr이라고 하면, https://seoul.korea.kr이나나 https://jungju.seoul.korea.kr 같은 서브도메인에 request할때도 쿠키를 보내준다.
Path	브라우저가 쿠키를 보낼 경로를 지정한다. 예를들어 Path=/ 로 설정하면, /의 하위경로들 (ex) /abc, /abc/def) 같은 경로에 리퀘스트를 보낼 때도 모두 쿠키를 보낸다.
HttpOnly	document.cookie를 자바스크립트로 사용할 수 있으면, 해터들이 XSS같은 악성 코드를 사용자들에게 유포해 쿠키를 훔칠 수 있다. 이때 HttpOnly를 사용하면 쿠키를 자바스크립트로 사용하지 못하게 막을 수 있다.
Secure	Secure를 지정하면 HTTPS request를 보낼 때만 쿠키가 보내진다. + SameSite = None 지정 시, 반드시 Secure도 함께 지정해야한다.
SameSite	XSRF를 방지하기 위해 제 3자 사이트에서 쿠키르 ㄹ보내지 못하게  SameSite를 지정한다. SameSite의 속성값은 쿠키 전송 유무에 따라 크게 3가지로 나뉜다. 1) SameSite = Strict 2) SameSite = Lax 3) SameSite = None

SameSite의 속성값	SameSite = Strict	SameSite = Lax	SameSite = None
다른사이트에서 우리사이트로 request 보낼 때	X	X	O
다른 사이트에서 이미지 파일등을 받아올 때	X	X	O
다른 사이트에서 사용자가 링크를 클릭해 우리 사이트로 이동할 때	X	O	O
우리 사이트에서 우리 사이트로 reqeust를 보낼 때	O	O	O

 

 

 

⚠️XSRF(Cross-site request forgery, CSRF, XSRF)란?

자신이 의도하지 않은 요청을 서버에 보내게 하여 피해를 입히는 방법이다.

피해자는 웹사이트에 로그인하여 인증된 세션을 가지고 있다.

이때 피해자가 공격자의 악성 사이트나 기타 피싱 이메일 링크 등을 클릭한다.

악성사이트는 사용자가 방문하고있는 브라우저를 통해 백그라운드에서 원래의 웹사이트로 요청을 보낸다.

이미 사용자가 로그인한 세션을 사용하기때문에 인증된 요청으로 인식되고 서버는 해당 요청을 처리한다.

 

 

2) 쿠키 삭제

Max-Age 값을 0으로 업데이터 하면 쿠키 수명이 0이되면서 쿠키가 삭제된다.

document.cookie = "session-id; Max-Age: 0;";

 

✍️Expires와 Max-Age

쿠키의 수명을 지정하는 속성이다.

Expires로 만료될 시기를 지정하거나, Max-Age로 쿠키의 수명을 지정할 수 있다.

🍪Session Cookie:  Expires나 Max-Age 속성을 지정하지 않는 경우, 브라우저를 닫으면 지워지는 쿠키이다.

🍪Persistent Cookie: Expires나 Max-Age로 수명을 지정해서 만들 수 있다. 수명이 다하면 지워진다.

 

 

☄️☄️ react-cookie 쉽게 사용하기

react-cookie 쉽게 사용하기

 

---

sessionStoage와 localStorage에 관하여

 

localStorage와 sessionStorage

웹용 스토리지  |  Articles  |  web.dev

 

 

클라이언트측 데이터를 저장하는 방법에 대한 필요성으로,

sessionStorage, localStorage를 사용한다.브라우저 내에 key-value 쌍을 저장할 수 있게 해준다.

 

sessionStorage

현재 탭에서만 유효한 저장소이므로 탭을 닫으면 데이터가 사라진다.

다른 탭과는 공유되지 않는 데이터이다.

 

현재의 input값을 저장하고 참조하는 코드를 예시로 sessionStorage의 데이터를 관리하는 간단한 코드에 대해 알아보자.

const data = inputElement.value;
sessionStorage.setItem('draft', data);

//값 창조해서 사용할 때
const draftData = sessionStorage.getItem('draft');

//sesstionStorage값 삭제하기
sessionStoage.removeItem('draft');

 

세션스토리지는 탭이 열려있는 동안만 데이터가 유지되므로, 단기 데이터를 저장할 때 주로 쓰인다.

ex) 쇼핑 카트, 일회성 양식(Form) 데이터 등

 

localStorage

해당 사이트에서 유효한 저장소로, 탭을 닫거나 브라우저를 닫아도 데이터가 유지된다.

여러 탭 사이에서도 데이터가 공유된다.

사용자가 명시적으로 데이터를 삭제하지 않는 한, 무기한 저장되는 데이터이다.

 

이 또한 JavaScript 내에서 localStoage 데이터를 추가, 수정, 삭제하는 방법에 대해 알아보자.

//localStorage 데이터 추가 or 수정
localStoage.setItem('show-sidebar', 'false');

//사용자가 처음 접속했을때
const showSideBar = localStoage.getItem('show-side-bar') === 'true';

//localStorage 데이터 삭제
localStorage.removeItem('show-side-bar');

로컬 스토리지는  브라우저를 닫고 열어도 사용자가 명시적으로 삭제하지 않는 한 데이터가 유지되므로 비교적 장기데이터를 저장할 때 많이 사용된다.

ex) 사용자 설정, 로그인 상태 유지 등

 

 

 

⭐쿠키 vs 세션,로컬스토리지의 다른 점⭐

세션, 로컬스토리지의 경우, 

1) 클라이언트가 만들고 관리하는 데이터이다.

2) 자바스크립트로 편리하게 조작할 수 있다.

3) 만료기간(수명)이 없다.(-> 세션 스토리지의 경우, 현재 브라우저라 열려있는 동안만 데이터가 유지되며 로컬 스토리지의 경우 브라우저를 닫고 다시 열어도 데이터가 유지된다는 차이점이 있음.)

4) 쿠키보다 사용할 수 있는 용량이 크다.