[영상후기] [10분 테코톡] 파인의 쿠키와 웹 스토리지

• 쿠키 등장 배경

  • HTTP : 비연결성, 무상태성 특징 때문에 응답을 받으면 연결이 끊김
  • 서버는 클라이언트가 누군지 식별 불가
  • 만일 연결이 끊겨도 기억하고 싶은 정보가 있다는 생각에 쿠키 등장
  • 서버 응답 시 쿠키에 값을 넣어 보내주면, 클라이언트는 다음 요청 시 쿠키와 함께 요청하여 서버에서는 클라이언트가 누군지 식별할 수 있게 됨

• 쿠키 : 브라우저에 저장되는 key와 value로 이루어진 작은 크기의 문자열

  • 4KB의 크기 제한
  • 만료 시간 설정 가능(설정하지 않으면 브라우저 종료 시 삭제)
  • HTTP 요청 시 따로 설정하지 않아도 자동으로 전달

• 활용 예시

  • 로그인 유지
  • N일 동안 보지 않기

• 단점

  • 4KB의 작은 용량
  • HTTP 요청 시 모든 쿠키 자동으로 전달 -> 불필요 트래픽 증가
  • XSS 공격에 취약
    • 공격자가 악성 스크립트를 삽입하여 브라우저에서 실행
    • document.cookie -> 사용자 정보 탈취
    • HttpOnly 속성 : 자바스크립트로 쿠키 조회 방지
  • XSRF 공격에 취약
    • 사용자인 척 악성 request 보내는 공격
    • SameSite
      • strict: 사이트와 같은 도메인 요청만 쿠키 전송,
      • Lax : 안전한 메서드(Get 등), 작업이 최상위 레벨 Navigation에서 이루어지는 경우 다른 도메인이라도 쿠키 전공
      • Secure 속성 : HTTPS로 통신하는 경우에만 쿠키 전송

• 웹 스토리지 : HTML5부터 지원하는 브라우저에 데이터를 저장할 수 있는 API

  • 5MB의 정보 저장 가능
  • 자동으로 서버에 전송되지 않음(쿠키 트래픽 문제 해결)
  • 오리진 단위로 접근 제한(CSRF로 부터 안전)
    • 오리진 단위 : HTTP/ HTTPS 프로토콜 + 도메인 + 포트번호

• 종류

구분	로컬 스토리지	세션 스토리지
저장 범위	도메인 별	도메인/탭 별
삭제 기준	직접 삭제	브라우저나 탭 닫을 시
활용 예시	글 임시 저장, 사용자 설정 저장(다크모드 등 설정 저장)	입력 폼 저장(폼 정보 저장), 일회성 로그인

• 단점
  • 만료 기간 설정 불가
  • 동기적 실행(용량이 큰 데이터 -> 메인 쓰레드 블로킹되어 실행 -> 저장 시 비동기적으로 실행되는 indexDB 고려)
  • 미지원 브라우저, 사파리 시크릿 모드 에러처리 필요
  • XSS 공격에 취약, 사용자 입력이 JS코드로 실행될 수 있는 코드 작성 X
• JWT 토큰 저장의 정답? 정답은 없음

로컬 스토리지	쿠키
XSRF에 안전 / XSS에 취약	XSS에 안전한 편/ XSRF 공격에 취약
따로 서버에서 설정하지 않아도 됨	매번 서버로의 요청을 담아야하는 JWT와 쿠키의 특징
-	XSRF보다 XSS 공격이 더 다루기 힘들기에 쿠키 사용

-> 사용자 인증정보기에 매 요청마다 보내는 것이 맞고, XSRF보다 XSS 공격이 더 다루기 힘들기 때문에 쿠키를 사용한다는 의견이 있음

• 저장의 기준?
  • 매번 요청할 때마다 필요한 데이터인가?
  • 저장하는 데이터의 용량은 어느정도인지?
  • 만료기간이 필요한지?
  • 나의 페이지가 어떤 보안에 취약한지?