[Web] Cookie, Web Storage

jellybrown·2021년 8월 2일
0

1. HTTP

HTTP는 서버와 클라이언트가 데이터를 주고받기 위한 프로토콜이다.
웹 서비스라면 사용자를 식별해서 무언가를 해야할텐데(맞춤 추천, 장바구니 유지 등)
HTTP는 stateless 프로토콜이기 때문에, 사용자를 식별하거나 임시 데이터를 저장하기 위해서는 상태관리가 필요하다.

HTTP의 stateless는 무슨 의미일까?

  • 통신이 끝나면 상태를 유지하지 않는 특징.
  • 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.

2. Cookie

  • HTTP 통신을 통해 주고받는 데이터 조각
  • 클라이언트를 식별하기 위해 사용
  • 임시 저장하는(파기일이 있는) session cookie(세션 쿠키)와 디스크에 저장되는 persistent cookie(지속 쿠키)가 있다.

2-1. Cookie의 사용 예시

  • 세션 관리: 서버에 저장해야할 로그인, 장바구니, 스코어
  • 개인화: 사용자 테마
  • 트래킹: 사용자의 행동 기록,분석

2-2. Cookie의 단점

  • 용량 제한 : 도메인당 20개, 개당 4KB의 데이터 저장 제한이 있다.
  • 보안 취약 : 암호화 되지 않은 상태로 주고받기 때문에, 임의로 수정하거나 가로채기 쉽다.

3. Web Storage

  • HTML5 이후 나온 웹 저장소 (이전에는 Cookie만 있음)
  • HTTP 통신을 하지 않는 저장소
  • 시크릿 모드에서는 동작하지 않음

3-1. Session Storage & Local Storage 비교

비교Session StorageLocal Storage
파기일세션이 끝날 때 파기지우지 않으면 영구 보관
범위세션(동일 탭)도메인
보안여전히 보안 이슈 있음여전히 보안 이슈 있음
사용일회성 로그인민감하지 않은 데이터

3-2. 보안 문제

Local Storage는 디스크에 저장되기 때문에 웹 브라우저가 종료되더라도 디스크에 데이터가 남아 있게 된다. 데이터를 지우도록 프로그램을 개발 했다고 하더라도 웹 브라우저가 비정상적으로 종료되는 경우 데이터가 삭제되지 않을 수 있기 때문에 보안적으로 문제가 되는 데이터의 저장시 보안 이슈를 해결할 수 있는 대책을 마련하지 않고는 사용해서는 안된다.

많은 참고자료에서 공통적으로 하는 말이 있다. Cookie도 보안 이슈가 있는데, Web Storage도 여전히 보안이 좋지 않다고 한다.
결론적으로 민감한 데이터는 암호화를 해서 저장해야하며, Local Storage만 쓸게 아니라, 탭 내에서만 사용할 수 있는 Session Storage를 적절히 사용하는 것이 좋을 것 같다.

3-3. Local Storage 사용 방법

(1) 가져오기

// Local Storage에서 userData로 저장된 정보를 가져온다.
JSON.parse(localStorage.getItem('userData'));

(2) 저장하기

// Local Storage의 userData라는 이름으로(key)
// updatedData를 저장한다.(value)
const updatedData = {[id: 1, name: 'jelly'], [id: 2, name: 'brown']};
localStorage.setItem('userData', JSON.stringify(updatedData));

(3) 여러가지 저장 방식

value를 하나만 저장

  • keyname : valueyujin
  • 간단하게 사용해도 되는 경우에 사용
  • ex) 토큰, 이름

value를 간단한 array 형태로 저장

  • keyproductId : value[ 355, 211, 393, 2, 50 ]
  • 리스트의 특정한 값만 저장해야 (+ 갱신) 할때
  • ex) 조회 이력

value를 객체 array 형태로 저장

  • keydata : value[ { id: 1, name: 'yujin' }, { id: 2, name: 'coffee' } ]
  • 많은 리스트의 개별 정보를 저장하고 갱신해야 할 때
  • ex) 상품 정보 + a 기록 필요시

Reference

HTTP 완벽 가이드, "클라이언트 식별과 쿠기", 305p
HTTP & Network Basic, "쿠키를 사용한 상태관리", 58p
"쿠키와 세션", https://devuna.tistory.com/23
MDN, "Web Storage API", https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
웹 스퀘어, "HTML5 Web Storage", https://inswave.com/confluence/pages/viewpage.action?pageId=9667510
"Web Storage!", https://kamang-it.tistory.com/entry/Web%EC%A1%B0%EA%B8%88-%EB%8D%94-%EC%9E%90%EC%84%B8%ED%9E%88cookie%EB%8A%94-%EB%84%88%EB%AC%B4-%EA%B5%AC%EC%8B%9D%EC%95%84%EB%83%90-%EC%9D%B4%EC%A0%9C%EB%B6%80%ED%84%B4-Web-Storage

0개의 댓글