웹스토리지 & 쿠키

본 내용은 10분 테코톡 디토님의 강의를 토대로 작성하였습니다.

 

1. 쿠키

• 브라우저에 저장되는 작은 크기의 문자열

 

역사

• 매직 쿠키에서 유래
  • 프로그램이 수신한 뒤 변경하지 않고 보내는 데이터 패킷
• 넷스케이프 웹사이트 방문자가 이전에 사이트를 방문했었는지 여부를 판단하기 위해서 사용
• HTTP의 비연결성, 무상태성으로 인해 사용
  • 요청과 응답이 끝나면 연결이 끊김
  • 상태를 유지하지 않음

 

특징

• 서버에서 쿠키를 저장
  • 서버에서 주로 사용
• http 요청시 Headers에 실려서 서버로 전송
• 같은 도메인에서 만들어진 쿠키만 전송
• Expires 또는 Max-Age를 통해 만료기간을 정할 수 있음
  • 둘 다 존재하면 Expires는 무시됨
• 영구 쿠키: 만료 기간을 정한 쿠키
  • 브라우저 종료 시 삭제
• 세션 쿠키: 만료 기간을 정하지 않은 쿠키
  • 만료 기간이 끝난 후 삭제
• 퍼스트파티 쿠키(First party Cookie)
  • 같은 도메인에서 생성된 쿠키(서브 도메인 포함)
• 서드파티 쿠키(Third party Cookie)
  • 다른 도메인에서 생성된 쿠키
  • 스크립트, 이미지, 폰트, 아이프레임 등 다른 도메인에 요청해야할 경우에 생성
  • 주로 광고 목적으로 사용(사용자가 어느 사이트 방문했는지 추적 가능)

 

문제점

• CSRF: 사용자의 권한을 이용한 공격
  • 쿠키가 자동 전송되는 특징을 이용해서 로그인 시 악성 스크립트를 실행시켜 비밀번호 변경 또는 결제 요청을 시킴
• XSS: 사용자의 민감한 정보 탈취(토큰)
  • 악성 스크립트를 실행시켜 토큰을 탈취
• 부족한 저장 용량: 4KB
• HTTP 요청 시 자동으로 모든 쿠키 전송
  • 불필요한 트래픽 증가

 

2. 웹 스토리지

• 쿠키의 문제점을 해결하기 위해 HTML5에서 등장

 

특징

• 쿠키의 문제점 대부분 해결
• 5MB 저장 용량
  • 쿠키의 부족한 저장 용량 문제 해결
• 요청 시 Headers에 전송하지 않음
  • 쿠키의 CSRF, 트래픽 문제 해결
• 문자열만 저장 가능
  • 직렬화를 통해 객체 저장 가능

 

로컬 스토리지 vs. 세션 스토리지

• 동기적으로 실행됨

	로컬 스토리지	세션 스토리지
저장 범위	도메인 / 브라우저	도메인 / 브라우저 / 탭
삭제 시기	직접 삭제 시	탭 종료 시

 

웹 스토리지 사용 시 고려할 점

• 웹 스토리지는 문자열만 저장 가능
  • 객체를 저장하고 사용하기 위해서는 직렬화, 역직렬화 과정이 필요
• 직렬화를 할 때 순환 참조이거나, 역직렬화 할 때 JSON 형식이 아니면 에러 발생
• 대부분의 브라우저는 웹 스토리지를 지원하지만, 버전에 따라 지원하지 않는 경우 있음
• 웹 스토리지를 비활성화 할 수 있는 기능을 제공하는 브라우저도 존재하기 때문에 에러가 발생할 수 있음
  • ex) 사파리 브라우저 시크릿 모드에서 스토리지 할당량이 0으로 설정 됨
  • 반드시 에러처리를 해야 함

 

문제점

• XSS
  • 자바스크립트로 접근 가능
• 독립된 스토리지
  • 브라우저 / 탭(세션 스토리지) 간 공유 불가
• 만료 기간 설정 불가
• 동기적으로 실행
  • 메인 스레드 블로킹
  • 용량이 크다면 IndexedDB 고려

 

3. 정리

• 쿠키 & 웹 스토리지는 보안 문제가 있으므로 민감한 정보는 저장하지 말 것
• 쿠키: 기간 설정, 서버 전송(작은 용량)
  • n일 동안 보지 않기, 비로그인 장바구니
• 세션 스토리지: 탭 종료시 삭제되어도 괜찮을 때
  • 이전 페이지 저장, 이전 스크롤 위치 저장
• 로컬 스토리지: 브라우저 종료 시 유지되어야 할 때
  • 사용자 설정 저장, 글 임시 저장
• 특징을 잘 파악해서 프로젝트 성격에 알맞게 사용하는 것이 중요

 

쿠키 보안 문제 해결 방안

	해결 방안	이유
XSS	HttpOnly	자바스크립트로 접근 불가
CSRF	SameSite strict: 모두 허용하지 않음 Lax: 안전한 GET 요청만 허용(a tag)	같은 도메인의 요청에만 쿠키를 전송
	Referer 검증	요청 온 사이트의 도메인을 확인할 수 있음

 

웹 스토리지 보안 문제 해결 방안

	해결 방안	이유
XSS	innderHTML 사용 X 사용자의 입력이 자바스크립트 코드로 실행될 수 있는 코드 작성하지 않기 ex) innerHTML, eval, document.write	자바스크립트 코드 삽입 불가 사용해야 한다면, XSS 보안 라이브러리 사용 ex) sanitize-html, DOMPurify

 

Reference

[10분 테코톡] 디토의 웹스토리지 & 쿠키