해당 포스팅은 우아한 테크코스 10분 테코톡 디토의 웹스토리지 & 쿠키를 보고 정리한 글입니다.
📍쿠키
- 브라우저에 저장되는 작은 크기의 문자열 (최대 4KB까지 저장 가능 )
🔍 쿠키가 필요한 이유
- HTTP는 비연결성/무상태성이라는 특징을 가지고 있기 때문에 클라이언트-서버가 연결을 한 번 맺은 후 요청-응답이 끝나면 연결을 끊고 상태를 저장하지도 않기 때문에 현재 요청한 사용자의 정보를 알 수 없다.
🔍 쿠키의 특징
- 주로 서버에사 사용된다.
- HTTP요청 시 Headers에 전송된다. (같은 도메인에서 만들어진 쿠키만 전송 가능)
- 만료 기간 지정 가능
🔍 쿠키의 종류
만료 시점에 따라
영구 쿠키 (Persistent Cookie)
- 만료 기간이 정해져있다.
- 만료 기간이 끝난 후 삭제 된다.
세션 쿠키 (Session Cookie)
- 만료 기간이 정해져있지 않다.
- 브라우저 종료시 삭제 된다.
도메인에 따라
퍼스트파트 쿠키 (First Party Cookie)
- 같은 도메인에서 생성된 쿠키
- 서브 도메인 (naver.com & m.naver.com) 도 포함 된다.
써드파티 쿠키 (Third Party Cookie)
- 전혀 다른 도메인에서 생성된 쿠키
- 스크립트, 이미지, 폰트와 같이 다른 도메인으로 요청을 보내야 하는 경우 생성된다.
- 서드파티 쿠키는 사용자의 방문 사이트를 파악 할 수 있기 때문에 광고 목적으로 사용되기도 하지만, 이는 사용자 프라이버시 침해의 문제도 있기 때문에 크롬에서는 서드파티 사용을 중단하겠다고 발표하기도 했다.
🔍 쿠키의 문제점
CSRF
- 쿠키가 자동으로 저장된다는 특징을 이용하여, 사이트에 로그인 되어있는 사용자에게 악성 스크립트를 실행시켜 악의적 요청(비밀번호 변경/ 결제 요청) 을 한다.
해결 방법
SameSite 옵션 적용 혹은 Referer 검증을 통해 요청 온 도메인을 확인 한 후 쿠키 전송을 허용 할 수 있다.
XSS
- 악성 스크립트를 실행시켜 사용자의 토큰과 같은 민감한 정보를 탈취한다.
해결 방법
Http Only 적용하여 자바스크립트로 접근이 불가하도록 설정할 수 있다.
부족한 저장 용량
HTTP 요청 시 자동으로 모든 쿠키 전송
- 이 경우 불필요한 트래픽 증가 시킬 수 있다.
📍 웹 스토리지
- 5MB 의 저장 용량 -> 쿠키의 부족한 저장용량 문제 해결
- 요청 시 Headers에 전송하지 않는다. -> 쿠키의 CSRF,트래픽 문제 해결
- 문자열만 저장 가능하기 때문에, 직렬화를 통해 객체 저장도 가능하다.
🔍 웹스토리지의 종류
로컬 스토리지
- 도메인 / 브라우저 별로 독립된 스토리지를 사용한다.
- 만료 기간이 없어서 직접 삭제할 때 까지 저장된다.
세션 스토리지
- 도메인 / 브라우저 / 탭 별로 독립된 스토리지를 사용한다.
- 탭 종료시 까지 저장된다.
🔍 웹 스토리지의 문제점
XSS
- 자바스크립트로 스토리지에 접근할 수 있는 문제점이 있다.
해결 방법
innerHTML, eval, document.write 과 같이 사용자의 입력이 자바스크립트 코드로 실행 될 수 있는 코드를 작성하지 않도록 한다.
꼭 사용해야 한다면 XSS 보안 라이브러리(sanitize-html, DOMPurify)를 사용하자!
독립된 스토리지
- 브라우저 / 탭 (세션 스토리지) 간 공유가 불가능하다.
만료 기간 설정 불가능
동기적으로 실행
- 메인 스레드 블록킹하게 된다.
- 용량이 크다면 IndexedDB를 고려해야한다.
📍 언제 무얼 사용할까?
쿠키
기간 설정 , 서버 전송
- n일 동안 보지 않기
- 비로그인 장바구니
세션 스토리지
탭 종료 시 삭제되어도 ok
- 이전 페이지 저장
- 이전 스크롤 위치 저장
로컬 스토리지
브라우저 종료 시 유지
- 사용자 설정 저장
- 글 임시 저장
기록