쿠키, 로컬 스토리지, 세션 스토리지

박효상·2022년 4월 21일
20

BACKEND-TIL

목록 보기
7/21
post-thumbnail

쿠키, 웹 스토리지(로컬 스토리지, 세션 스토리지) 생성 배경

  • HTTP는 요청과 응답으로 이뤄지는 하나의 사이클이 끝나면, 연결이 끊어지는 무상태성을 띄어서 클라이언트의 상태를 보존하지 않는다
  • 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 서버에 전달하는 방식으로 HTTP의 단점을 보완하고자 쿠키와 웹 스토리지를 사용한다

쿠키란?

  • 만료 기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일
  • 요청과 응답만이 존재했던 HTTP 웹세계에 이전에 서버와 클라이언트가 주고 받은 내역을 기억하고 불러올 수 있는 혁신적인 역할을 수행

쿠키 종류

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

쿠키 동작 원리

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

쿠키 특징

장점

  • 대부분의 브라우저가 지원
  • 데이터 유효기간 지정 가능 (ex. 1 hour, 1 day)
  • XSS (사이트 간 악성 Js 코드를 심는 행위)로부터 안전 - 서버에서 쿠키의 httpOnly 옵션을 설정하면, Js에서 쿠키에 접근 자체가 불가능
    단점
  • 매우 작은 데이터 저장 용량 (4kb)
  • 매번 서버에 HTTP 요청시 같이 전달되어 서버에 부담
  • 암호화가 안되어 있어 유저 정보 도난 위험
  • CSRF(사이트 간 요청 위조) 위협 - 공격자가 사용자의 요청을 가로챈 뒤 사용자의 의지와 상관없이 보안적으로 위험한 행동을 하게끔 변조하여 부당 이익을 취하는 행위
  • 문자열만 저장 가능

웹 스토리지란?

  • 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소
  • 로컬 스토리지와 세션 스토리지가 존재
  • key와 value 쌍의 형태로 데이터 저장
  • window 객체의 프로퍼티로 존재

웹 스토리지 특징

장점

  • 서버에 불필요하게 데이터 저장 x
  • 넉넉한 데이터 저장 용량 (모바일: 2.5MB, 데스크탑: 5~10MB)
  • 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능
  • 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전
    단점
  • HTML5를 지원하는 브라우저만 사용 가능
  • XSS로부터 위험 - local storage에 접근하는 Js 코드로 쉽게 접근 가능

로컬 스토리지와 세션 스토리지 차이점

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

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

  • 쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때
    • 다시 보지 않음 쿠키 팝업창 , 로그인 자동 완성
  • 로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때
    • 자동 로그인
  • 세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
    • 일회성 로그인, 입력 폼 저장, 비로그인 장바구니
profile
집념의 백엔드 개발자

0개의 댓글