이 글은 우아한테크코스 테코톡 디토님의 영상을 보고 정리한 글입니다.

🍪 Cookie

• 브라우저에게 저장되는 작은 크기의 문자열 (최대 4KB까지 저장 가능)

쿠키가 필요한 이유❓

• HTTP는 비연결성/무상태성이라는 특징을 가지고 있기 때문에 클라이언트-서버가 한 번 맺은 후, 요청-응답이 끝나면 연결을 끊고 상태를 저장하지도 않기 때문에 현재 요청한 사용자의 정보를 알 수 없다.

쿠키의 특징

• 주로 서버에서 사용된다.
• HTTP 요청시 Headers에 전송된다. (같은 도메인에서 만들어진 쿠키만 전송 가능)
• 만료 기간 지정 가능 (expired, max-age)

쿠키의 종류

만료 시점에 따른다.

영구 쿠키 (Persistent Cookie)

• 만료 기간이 정해져 있다.
• 만료 기간이 끝난 후 삭제된다.

세션 쿠키 (Session Cookie)

• 만료 기간이 정해져 있지 않다.
• 브라우저 종료시 삭제 된다.

도메인에 따라

퍼스트파티 쿠키 (First Party Cookie)

• 같은 도메인에서 생성된 쿠키
• 서브 도메인 (naver.com, m.naver.com)도 포함된다.

써드파티 쿠키 (Third Party Cookie)

• 전혀 다른 도메인에서 생성된 쿠키
• 스크립트, 이미지, 폰트와 같이 다른 도메인으로 요청을 보내야하는 경우 생성된다.
• 서드파티 쿠키는 사용자의 방문 사이트를 파악할 수 있기 때문에 광고 목적으로 사용되기도 하지만, 이는 사용자 프라이버시 침해의 문제도 있기 때문에 크롬에서는 서드파티 사용을 중단하겠다고 발표하기도 했다.

쿠키의 문제점

CSRF

• 쿠키가 자동으로 저장된다는 특징을 이용하여, 사이트에 로그인 되어있는 사용자에게 악성 스크립트를 실행시켜 악의적 요청(비밀번호 변경/결제 요청)을 한다.

해결 방법
SameSite 옵션 적용 혹은 Referer 검증을 통해 요청 온 도메인을 확인한 후 쿠키 전송을 허용할 수 있다.

XSS

• 악성 스크립트를 실행시켜 사용자의 토큰과 같은 민감한 정보를 탈취한다.

  해결 방법
  Http Only를 적용하여 자바스크립트로 접근이 불가하도록 설정할 수 있다.

부족한 저장 용량

HTTP 요청 시 자동으로 모든 쿠키 전송

• 이 경우 불필요한 트래픽을 증가시킬 수 있다.

---

🥞 Web Storage

• 5MB 의 저장 용량 -> 쿠키의 부족한 저장용량 문제 해결
• 요청 시 Headers에 전송하지 않는다. -> 쿠키의 CSRF,트래픽 문제 해결
• 문자열만 저장 가능하기 때문에, 직렬화를 통해 객체 저장도 가능하다.

웹 스토리지의 종류

로컬 스토리지

• 도메인/브라우저 별로 독립된 스토리지를 사용한다.
• 만료 기간이 없어서 직접 삭제할 때까지 저장된다.

세션 스토리지

• 도메인/브라우저/탭 별로 독립된 스토리지를 사용한다.
• 탭 종료시까지 저장된다.

웹 스토리지의 문제점

XSS

• 자바스크립트로 스토리지에 접근할 수 있는 문제점이 있다.

해결 방법
innerHTML, eval, document.write와 같이 사용자의 입력이 자바스크립트 코드로 실행될 수 있는 코드를 작성하지 않도록 한다.
꼭 사용해야한다면 XSS 보안 라이브러리(santize-html, DOMPurify)를 사용하자!

독립된 스토리지

• 브라우저/탭 (세션 스토리지) 간 공유가 불가능하다.

만료 기간 설정 불가능

동기적으로 실행

• 메인 스레드 블록킹하게 된다.
• 용량이 크다면 IndexedDB를 고려해야한다.

📍 언제 무얼 사용할까?

쿠키

기간 설정 , 서버 전송

• n일 동안 보지 않기
• 비로그인 장바구니

세션 스토리지

탭 종료 시 삭제되어도 ok

• 이전 페이지 저장
• 이전 스크롤 위치 저장
• 비로그인 장바구니

로컬 스토리지

브라우저 종료 시 유지

• 사용자 설정 저장
• 글 임시 저장
• 자동 로그인