서론

http는 비연결성과 무상태성을 가지고 있기 때문에
요청과 응답이 완결되면 연결이 끊기게 됩니다.

이 때 다음 요청 시, 서버는 클라이언트가 누군지 식별할 수 없게 되죠.
연결이 끊겨도 기억해야할 정보가 있다면 어떻게 할까요?

본론

쿠키

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

• 4KB 크기 제한
• 만료 시간 설정 가능, 설정하지 않는다면 브라우저 종료시 만료
• HTTP 요청시 따로 설정하지 않아도 자동으로 전달, 불필요한 트래픽 증가

클라이언트가 요청과 함께 헤더에 쿠키를 보내서 서버가 클라이언트를 식별할 수 있도록 합니다.

활용 예시

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

document.cookie=`modalClose=true; path=/; expires=${new Date(Date.now() + N * 24 * 60 * 60 * 1000).toUTCString()}`;

XSS

공격자가 악성 스크립트를 삽입하여 브라우저에서 실행

<script> 악성코드 </script>

XSRF

사용자인 척 악성 request 보냄

보안 해결

HttpOnly 속성으로 자바스크립트로 쿠키를 조회하는 것을 방지할 수 있습니다.
SamSite 속성으로 사이트와 같은 도메인 요청에만 쿠키를 전송할 수 있습니다. (Strict)

웹 스토리지

HTML5부터 지원하는 브라우저에 문자열을 저장할 수 있는 API

• 5MB의 정보 저장 가능
• Origin 단위로 접근 제한, CSRF로부터 안전 (프로토콜://도메인:포트번호)
• 자동으로 서버에 전송되지 않음

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

	로컬	세션
저장 범위	도메인 별	도메인/탭 별
삭제 기준	직접 삭제	브라우저/탭 닫기
활용 예시	글 임시 저장 / 사용자 설정 저장	입력폼 저장 / 일회성 로그인

단점

• 만료 기간 설정 불가
• 동기적으로 실행 -> 비동기적으로 처리되는 IndexedDB를 고려
• 사파리 시크릿 모드는 따로 에러처리 필요
• Integer형 데이터 작성 시, 문자열로 출력 -> JSON 형태로 데이터 저장

결론

쿠키와 웹 스토리지는 둘 다 클라이언트 측에서 정보를 저장하기 위한 방법입니다.

	쿠키	웹 스토리지
특징	서버로 요청과 함께 전달 서버와 클라이언트 간의 상태 유지에 적합	따로 서버에서 설정 안해도 됨 로컬 데이터 저장에 적합

매번 요청을 할 때마다 필요한 데이터인지, 저장하는 데이터의 용량인지,
만료기간 설정이 필요한지 고려하여 효율적인 설계를 해야겠습니다.