쿼카러버의 기술 블로그

[Session Management (1/3)] 쿠키란 무엇인가? (What is Cookie?) 본문

웹 개발

[Session Management (1/3)] 쿠키란 무엇인가? (What is Cookie?)

quokkalover 2022. 1. 23. 22:47

Session Mangement는 크게 3가지 페이지로 구성된다.

 

1) 쿠키란 무엇인가

2) 세션이란 무엇인가

3) Javascript로 구현하고 이해하는 Session Management 

 

학습 방법 : 

필자는 이 글에서 쿠키가 무엇인가에 대해 그냥 한번 훑고나서 3번 페이지인 Session Managment를 읽고 난 뒤 다시와서 한번 더 읽는 것을 추천한다. 

 

 

본 글은 첫 번째 장인 쿠키란 무엇인가에 대해 다룬다. 

 

 

 

 

쿠키란?

  • 쿠키는 클라이언트의 효율적인 웹 사용을 보장하기 위해 웹사이트에서 널리 사용되고 있다.
  • 클라이언트의 개인 장치(브라우저) 저장되는 'key-value'쌍의 데이터 파일을 의미한다.

 

쿠키의 특징

  • 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장한다.
  • 사용자가 따로 처리 안해도 HTTP가 Request시 header에 자동으로 넣어준다.
  • 최대 300개 / 하나의 도메인당 20개 까지 / 하나의 쿠키는 4KB까지 가능하다.

 

쿠키의 구성요소

1) 이름(key) : 각각의 쿠키를 구별하는데 사용되는 이름

2) 값(value): 쿠키의 이름과 관련된 값

그리고 위와 같이 key value형태로 아래와 같은 정보를 기본적으로 저장한다.

  • Expires(유효시간) : 쿠키의 유지시간
  • javascript_study/server.js at main · getveryrichet/javascript_study
  • MaxAge: 현재 시간으로 얼마나 쿠키를 유지할지 정한다.
  • Domain : 쿠키가 전송되게 될 호스트를 명시한다.
  • Path : 쿠키 Header전송을 위해 요청되는 URL경로를 명시한다.
  • HttpOnly: Cross-site 스크립트 공격을 방지하기 위해 사용
  • SameSite : 쿠키가 cross-site요청과 함께 전송되지 않음을 요구 → 위조 공격에 대한 보호방법

 

동작방식

1. 클라이언트가 HTTP Request 를 서버에게 보냄

2. 서버에서 유효성(회원인지)확인 후 쿠키를 생성하고 HTTP Response 헤더에 쿠키 넣어 응답
javascript_study/cookie.js at main · getveryrichet/javascript_study

  • 위 예시처럼 Response header에 Set-Cookie 속성을 사용하면 쿠키를 만들 수 있음

3. 클라이언트는 HTTP Response의 header에서 쿠키를 추출하여 저장해둔다.

4. 클라이언트가 Request하고 싶을 때, HTTP가 해당 쿠키를 찾아 header에 자동으로 넣어서 전송

 

쿠키의 Lifecycle

  • 쿠키는 유효시간을 명시할 수 있다.
  • 브라우저가 종료되어도 유지된다.
  • 클라이언트에 저장했다가 참조할 수 있다.

 

쿠키를 사용하는 이유

  • 페이지 탐색, 웹사이트의 보안영역 접속, 그리고 검색을 포함한 웹사이트의 기본적인 기능의 활성화를 목적으로 사용
  • 기능 쿠키는 웹사이트가 접속자의 지역 및 언어 등 웹사이트의 행태 및 외관에 영향을 줄 수 있는 접속자 설정을 저장
  • 정보의 익명 수집 및 보고를 통해 웹사이트 운영자가 방문자와 웹사이트 사이의 상호작용을 이해하는데에 도움

 

쿠키를 사용하는 직관적인 예시

  • 팝업창 다시보지 않기
  • 아이디 / 비밀번호 저장
  • 장바구니

 

 

참고자료

https://lovefor-you.tistory.com/247

https://kobrekim.com/footer-ko-kr/cookie-policy-ko-kr/what-are-cookies-and-why-we-use-them-ko-kr/

https://velog.io/@neity16/NodeJS-인증쿠키-세션-토큰

Comments