[영상후기] [10분 테코톡] 🦄 디토의 웹스토리지 & 쿠키

쿠키 : 브라우저에 저장되는 작은 크기의 문자열(최대 4KB)

• 쿠키가 없다면 방문한지 여부 파악 불가능

• HTTP 특성(비연결성, 무상태성) -> 요청 처리가 완료되면 요청을 끊고, 상태를 유지하지도 않기에 사용자 정보를 알 수 없음

• 쿠키 등장

• 특징

  • 주로 서버에서 사용(set Cookie)
  • 요청 시 Header에 전송(같은 도메인에서 만든 쿠키만)
  • 만료 기간 지정 가능(Expires 와 Max-Age 동시 -> Expires 무시)

• 종류

  영구 쿠키	세션 쿠키
  만료기간 O	만료 기간 X
  기간 이후 삭제	브라우저 종료 시 삭제

• 도메인에 따라 나눔

ex) botobo.kr 접속 시, botobo.kr에서 생성한 것은 퍼스트파티 쿠키

• 서드파티쿠키는 botobo 사이트에 페이스북 스크립트 존재할 때 생성
• 스크립트 뿐만 아니라 폰트, 아이프레임 등 다른 도메인으로 요청해야 하는 경우 언제든 생성 가능
• 서드파티쿠키 : 광고 목적 사용 -> 사용자가 어떤 사이트에 방문했었는지 알수 있음 => 프라이버시 침해 및 개인정보 악용 우려 => 크롬에서 서드파트쿠키 지원 중지 계획 발표
• 문제점
  • CSRF : 사용자 권한 이용 공격(로그인 된 사용자 링크 클릭 -> 비밀번호 변경, 결제 요청 등)
  • XSS : 사용자의 민감 정보 탈취(토큰)
  • 부족한 저장 용량 : 4KB
  • HTTP 요청 시 자동으로 모든 쿠키 전송 : 불필요 트래픽

웹스토리지 : 쿠키의 문제점 어느 정도 해결, HTML5 등장

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

• 다른 웹사이트 or 브라우저 변경 시 로컬 스토리지 동일하지 않음

• 세션 스토리지는 탭만 바뀌어도 다름

• 따라서 탭 종료 시 삭제될 데이터는 세션 스토리지에 저장

• data를 저장/사용하기 위해 직렬화/역직렬화 과정 필요

  • 직렬화 : 순환 참조 / 역직렬화 : JSon 형식 아닌 경우 에러 발생

• 대부분 브라우저 웹스토리지 지원, 버전에 따라 지원하지 않을 수 있음

  • 비활성화 하는 옵션이 있는 브라우저가 있어 에러 발생할 수 있음
  • 따라서 에러 처리 필수

• 문제점

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

정리

• 사용처 : 쿠키 & 웹스토리지 보안 문제가 있어 민감한 정보 저장 X
  • 쿠키 : 기간 설정 or 서버 전송(작은 용량)
    ex) n일 동안 보지 않기, 비로그인 장바구니
  • 세션 스토리지 : 탭 종료 시 삭제되어도 ok
    ex) 이전 페이지 저장, 이전 스크롤 위치 저장
  • 로컬 스토리지 : 브라우저 종료 시 유지
    ex) 사용자 설정 저장, 글 임시 저장
• 쿠키 보안 문제 해결 방안
  • XSS : HttpOnly 적용 -> 자바스크립트로 접근 불가
  • CSRF : SameSite -> 같은 도메인의 요청에만 쿠키 전송
    Referer 검증 -> 요청 온 사이트의 도메인 확인할 수 있음
    
• 웹 스토리지 보안 문제 해결 방안
  • XSS : innerHTML 사용 X -> 자바스크립트 코드 삽입 불가
    => 사용자의 입력이 자바스크립트 코드로 실행될 수 있는 코드 작성하지 않기.
    => 사용해야 한다면 XSS 보안 라이브러리 사용