본문으로 건너뛰기

Cookie

HTTP 프로토콜의 "통신이 끝나면 상태 정보를 유지하지 않는 특징(Stateless)" 때문에,브라우저에서 발생한 정보들이 페이지를 이동할 때 마다 초기화된다. 이러한 정보를 저장하기 위해 사용하는 것이 쿠키, 세션 그리고 웹 스토리지이다.

🧑🏻‍💻 Cookie​

서버가 아닌, 클라이언트에 키와 값 형태의 작은 파일을 저장할 수 있도록 하는 브라우저 저장소이다.

✅ 사용 목적​

  1. 세션 관리: 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보를 관리하기 위해

  2. 사용자 맞춤: 사용자가 선호하는 옵션이나 테마 등을 세팅하기 위해

  3. 사용자 추적: 사용자의 행동을 기록하고 분석하기 위해

✅ 사용 방법​

  • Response Header의 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있으며, 만들어진 쿠키는 브라우저가 Request Header에 넣어서 자동으로 매번 서버로 전송하게 된다.

✅ 종류​

  • Permanent Cookie: 사용 기한을 설정하여 클라이언트가 종료되어도 일정 기간 유지되는 쿠키이다.

  • Session Cookie: 클라이언트가 종료되면 삭제되는 휘발성 쿠키이다.

✅ 속성​

  1. Domain: Domain 속성은 쿠키가 서버에 어떤 도메인에서 접근 가능한지를 지정한다. 이 속성을 설정하면 쿠키는 해당 도메인과 그 서브도메인에서만 접근할 수 있다.

  2. Path: Path 속성은 쿠키가 서버에서 어떤 경로에 접근 가능한지를 지정한다. 이 속성을 설정하면 쿠키는 해당 경로와 그 하위 경로에서만 접근할 수 있다.

  3. HttpOnly: HttpOnly 속성은 보안을 강화하기 위한 속성으로, 이 속성이 설정된 쿠키는 JavaScript를 통해 접근할 수 없다. 이를 통해 XSS(크로스 사이트 스크립팅) 공격을 예방할 수 있다. 주로 세션 쿠키나 다른 중요한 정보를 저장할 때 사용된다.

✅ 문제점​

  1. 4KB의 작은 용량을 가진다.

  2. 모든 HTTP Request에 포함이 되어 트랙픽 비용이 발생한다.

  3. 영구 데이터 저장이 불가능하다.

  4. 문자열만 저장이 가능하다.

cookie의 문제점을 web storage가 보완해준다.

Request 메시지

  1. 4KB의 작은 용량 → 5MB의 큰 용량

  2. 모든 HTTP Request에 포함이 되어 트랙픽 비용 발생 → 클라리언트에만 데이터가 존재하고 서버로 전송되지 않음

  3. 영구 데이터 저장이 불가능하다. → local storage를 통해 영구 데이터 저장이 가능하다.

  4. 문자열만 저장이 가능하다. → 문자열 외에도 구조화된 객체를 저장할 수 있다.

참고 자료