✅ 쿠키
웹사이트 접속 시 사용자의 컴퓨터(브라우저)에 저장되는 작은 텍스트 파일
이를 통해 웹사이트는 사용자의 웹 브라우저를 식별하고,
- 로그인 정보 유지
- 장바구니 정보
- 방문 기록 분석
등과 같은 정보를 저장한다.
이런 정보를 통해 개인 맞춤화 된 웹 경험을 제공하거나, 웹사이트 운영 및 마케팅 전략을 개선하는 데 사용된다.
쿠키는 웹사이트 간에도 전송될 수 있기 때문에, 보안상의 취약점이 발생할 수 있다.
이를 방지하기 위한 방법 중 하나가 sameSite 속성이다.
🌠 sameSite
쿠키에는 여러 속성이 있는데,
sameSite 속성은 웹사이트 간 요청에서 전송될 수 있는지 여부를 설정한다.
즉, 다른 도메인에서 요청할 때 쿠키를 보낼지 말지 결정하는 보안 설정이다.
sameSite 속성에는 세 가지 종류가 있다.
sameSite=Lax
- 기본 보안 수준(기본값)
- 사용자가 링크 클릭으로 사이트를 이동한 경우에만 쿠키를 전송한다.
sameSite=Strict
- 오직 같은 사이트 내에서만 쿠키가 전송된다(가장 보안이 강함)
- 다른 사이트에서 들어오는 모든 요청에는 쿠키를 전송하지 않는다.
sameSite=None
- 다른 사이트에서의 모든 요청에도 쿠키 전송을 허용한다.
- 단, 보안 강화를 위해 반드시 Secure 속성과 함께 설정해야하며, HTTPS 환경에서만 동작한다.
기타 알아두면 좋은 Attribute
HttpOnly
HttpOnly를 사용하면 쿠키를 자바스크립트로 사용하지 못하게 막을 수 있다.
Secure
Secure를 지정하면 Https 리퀘스트를 보낼 때만 쿠키를 보낸다.
Expires와 Max-Age
쿠키의 수명을 지정하는 속성
- Expires: 만료 시기 지정
- Max-Age: 쿠키 수명 지정
☑️ 세션 쿠키(Session Cookie)는 Expires나 Max-Age를 지정하지 않으면 만들 수 있다.
세션 쿠키: 브라우저를 닫으면 지워지는 쿠키
☑️ 영속적인 쿠키(Persistent Cookie)는 Expires나 Max-Age로 수명을 지정해서 만들 수 있다.
수명이 다하면 지워지는 쿠키
사용법
서버에서 리스폰스할 때
서버에서 set-cookie 헤더를 리스폰스로 보내주면 웹 브라우저는 알아서 쿠키 값을 저장해 둔다.
Set-Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;
session-id: 쿠키의 key 값1234: 벨류 값domain,path,samesite... : 쿠키의 attribute 값
클라이언트에서 보낼 때
리퀘스트를 보낼 때 주소에 해당하는 쿠키가 저장되어 있다면 웹 브라우저가 알아서 쿠키를 보내준다.
Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;
자바스크립트로 사용하기
보통은 서버가 쿠키 값을 만들고, 클라이언트에서는 웹 브라우저에 맡기고 건드리지 않는 것이 권장된다.
하지만, 클라이언트에서 자바스크립트로 쿠키를 생성/수정/참조 할 수도 있다.
-
추가, 수정하는 코드
document.cookie = "session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;"; -
값 지우기
Max-Age값을 0으로 업데이트하면 지워짐.
document.cookie = "session-id; Max-Age: 0;";
✅ 세션 스토리지와 로컬 스토리지
웹 브라우저에서 데이터를 저장하는 데 사용되는 두 가지 저장소 유형
둘의 주요 차이점은 데이터 지속성에 있다.
❗️ 두 저장소 모두 클라이언트 측에 데이터를 저장하므로 중요한 정보나 민감한 정보는 저장하지 않는 것이 좋다.
쿠키와 다른 점
🌠 쿠키를 사용하면 브라우저에서 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해서 데이터를 저장하는 걸까?
- 클라이언트가 만들고 관리하는 데이터
- 쿠키보다 사용할 수 있는 용량이 크다.
- 자바스크립트로 편리하게 조작할 수 있다.
- 만료 기간이 없다.
📂 세션 스토리지(SessionStorage)
특징
- 현재 탭에서만 유효한 저장소
- 탭을 닫으면 데이터가 사라진다.(비영구적)
- 다른 탭과 데이터는 공유되지 않는다.
🌠 사용 예시
폼 입력 값, 현재 페이지 데이터 등
// 값을 저장하는 코드. (이미 값이 있다면) 수정하는 코드
const data = inputElement.value;
sessionStorage.setItem('draft', data);
// 값을 참조해서 사용할 때
const draftData = sessionStorage.getItem('draft');
// 값 지우기
sessionStorage.removeItem('draft');📂 로컬 스토리지(LocalStorage)
특징
- 해당 사이트에서 유효한 저장소
- 탭을 닫거나 브라우저를 닫아도 데이터가 유지된다.(영구적)
- 여러 탭 사이에서도 데이터가 공유된다.
🌠 사용 예시
로그인 정보, 설정, 즐겨찾기 등
// 사용자가 사이드바 감추기 버튼을 클릭했을 때
// 값을 저장, 수정
localStorage.setItem('show-sidebar', 'false');
// 사용자가 처음 접속했을 때
const showSidebar = localStorage.getItem('show-sidebar') === 'true';
// 값 지우기
localStorage.removeItem('show-sidebar');스토리지가 변경되었을 때 처리하기
window.addEventListener("storage", () => {
const showSidebar = localStorage.getItem('show-sidebar') === 'true';
// showSidebar 값 적용하기
});Window storage evt - Web APIs | MDN
🌠 활용 사례
초안 임시 저장하기
텍스트를 입력하다 실수로 창을 닫아 버리더라도 내용이 남아있게 할 수 있다.
로컬 스토리지를 사용해 구현할 수 있다.
웹 앱
웹 기반으로 만들어진 프로그램(웹 앱)들은 세션, 로컬 스토리지를 사용한다.
예시) 피그마, 노션 등..
참고자료
코드잇 토픽
참고하면 좋은 자료
쿠키
HTTP 쿠키 - HTTP|MDN
리액트 쿠키 쉽게 사용하기
웹 스토리지
