<TIL> 46. cookie, local storage, session storage 차이점

쿠키와 웹 스토리지 생성 배경

HTTP는 요청과 응답으로 이뤄지는 한 사이클이 끝나면 연결이 끊어짐 -> 무상태성
=> 클라이언트의 상태를 보존 x

클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내 서버에 전달하는 방식으로 HTTP 단점을 보완하고자 쿠키와 웹 storage를 사용

cookie?

만료기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일
요청과 응답만 존재한 HTTP에서 이전에 서버와 클라이언트가 주고 받은 내역을 기억, 불러올 수 있는 역할

cookie의 종류

• Session Cookie: 메모리에만 저장, 만료시간 O, 브라우저 종료시 삭제
• Persistent Cookie: 파일로 저장, Max-Age 설정을 통해 장기간 유지 가능, 브라우저 종료와 관계 없이 사용 가능한 cookie
• Secure Cookie: HTTPS에서 사용되는 암호화된 쿠키. 비교적 안전 but, 실질적 보안 제공되지 않아 민감한 데이터 저장XXX
• Third Party Cookie: 다른 도메인에 요청이 필요할때 생성하는 쿠키, 주로 광고 목적으로 사용. 유저 개인정보 악용의 문제 발생.

쿠키 동작 원리

• 클라이언트가 서버에 HTTP 요청
• 서버가 HTTP 응답시 set-cookie를 통해 쿠키 생성하여 전달
• 클라이언트는 이제부터 매 HTTP Request시 HTTP Header에 쿠키 담아 전송
• 만료기간 전이면, 쿠키는 브라우저에 저장되어 있고, 항상 요청시 사용 가능
• 만료시, 클라이언트가 새로 서버에 요청해 쿠키 새로 발급

쿠키 특징

장점

• 대부분의 브라우저가 지원
• 데이터 유효기간 지정 가능
• XSS(사이트 간 악성 Js 코드를 심는 행위)로 부터 안전
  -> 서버에서 쿠키의 httpOnly 옵션 사용시 Js에서 쿠키에 접근 불가

단점

• 매우 작은 데이터 저장 용량
• 매번 서버에 HTTP 요청시 같이 전달되어 서버 부담
• 암호화가 안되어있어 유저 정보 도난 위험
• CSRF(사이트 간 요청 위조)위협
  -> 공격자가 사용자의 요청을 가로챈 뒤 사용자의 의지와 상관없이 보안적으로 위험한 행동을 하게끔 변조하여 부당 이익을 취하는 행위
• 문자열만 저장 가능

Web storage?

• 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 데이터 저장소
• Local storage와 session storage 존재
• Key, value 쌍의 형태로 데이터 저장
• window 객체의 property로 존재

Web storage의 특징

장점

• 서버에 불필요하게 데이터 저장x
• 넉넉한 데이터 저장 용량
• 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능
• 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전

단점

• HTML5를 지원하는 브라우저만 사용 가능
• XSS로부터 위험 - local storage에 접근하는 Js 코드로 쉽게 접근 가능

Local storage와 session storage의 차이점

• 로컬 스토리지는 데이터 영구 저장 가능, 세션 스토리지는 브라우저 탭/윈도우가 닫히면 스토리지 초기화

• 로컬 스토리지는 window.localStorage, 세션스토리지는 window.sessionStorage
  객체 사용

  쿠키, 로컬, 세션 스토리지 사용처

• 쿠키: 일시적으로 필요한 가벼운 데이터 저장
  ex) 다시 보지 않음 쿠키 팝업창, 로그인 자동완성

• 로컬 스토리지: 지속적으로 필요한 데이터 저장
  ex) 자동 로그인

• 세션 스토리지: 일시적으로 필요한 데이터 저장
  ex) 일회성 로그인, 입력 폼 저장, 비로그인 장바구니