니가 만든 쿠키(Cookie)

목표 D-day : 48 일

쿠키

HTTP 쿠키는 서버가 사용자의 웹 브라우저로 보내는 작은 데이터 조각입니다.

사용 목적

일반적으로 서버는 HTTP 쿠키의 내용을 사용하여 서로 다른 요청이 동일한 브라우저/사용자로부터 오는지 확인합니다.

1. 세션 관리 : 사용자 로그인 상태, 쇼핑 카트 내용, 게임 점수 또는 서버가 기억해야 하는 사용자 세션 세부 정보
2. 개인화 : 사용자 선호도( 예: 표시 언어 및 UI 테마)
3. 추적 : 사용자 행동을 기록하고 분석

쿠키 설정 방법

// 쿠키 생성
Cookie cookie = new Cookie("cookieName", "cookieValue");

// 쿠키 속성 설정
cookie.setPath("/"); // 경로 설정
cookie.setDomain("example.com"); // 도메인 설정
cookie.setMaxAge(60 * 60 * 24 * 7); // 만료일 설정 (7일, 초 단위)

// 쿠키를 응답에 추가
response.addCookie(cookie);

Expires 와 Max-Age

• Expires : 클라이언트 시간을 기준으로 설정하여 서버와 클라이언트의 시간이 다를 경우 오류가 발생할 수 있음
• Max-Age : 초 단위 명시하고 Expires보다 우선 순위가 높습니다.

오래된 브라우저는 Max-Age를 지원하지 않을 수 있어서 Expires도 같이 작성합니다.

쿠키 변경 및 삭제

서버는 Set-Cookie 헤더로 기존 쿠키의 이름과 새 값을 전송하여 쿠키를 업데이트할 수 있습니다.

예를 들어 사용자가 선호도를 업데이트하고 애플리케이션이 클라이언트 측 데이터에서 이를 반영하려는 경우 사용할 수 있습니다.

// 삭제할 쿠키와 동일한 이름으로 쿠키 생성
Cookie cookie = new Cookie("cookieName", null);

// 쿠키 경로 설정 (삭제하려는 쿠키의 경로와 동일해야 함)
cookie.setPath("/");

// 쿠키 만료 시간 0으로 설정 (즉시 삭제)
cookie.setMaxAge(0);

// 응답에 쿠키 추가
response.addCookie(cookie);

동일한 쿠키 설정을 하고 만료 시간을 0 으로 지정하면 유통기한이 지난 쿠키로 브라우저가 서버에 전송하지 않습니다.

데이터 저장

쿠키는 HTTP 프로토콜의 일부입니다. HTTP는 상태를 저장하지 않으므로 클라이언트에게 저장 목적으로 사용했습니다.

지금은 Web Storage API(localStorage 및 sessionStorage) 및 IndexedDB가 권장됩니다.

비교하기

• 쿠키 : 소량의 데이터(4KB 이하)를 서버와의 통신용으로 주로 사용합니다. 모든 HTTP 요청에 포함되므로 성능에 영향을 줄 수 있습니다.
• 로컬 스토리지 : 동기적 방식으로 작동하며, 약 5MB 정도의 작은 데이터 저장 용량을 가집니다.
• 세션 스토리지 : 로컬 스토리지와 비슷하지만, 브라우저 세션이 종료되면 데이터가 사라집니다.
• IndexedDB : 오프라인 웹 어플리케이션을 지원하는 목적으로 브라우저 내부에 영구적으로 저장하거나 오프라인 상태에서 데이터를 사용할 때 유용하다.

디스크와 메모리

• 디스크에 저장: 로컬 스토리지, 영구 쿠키, IndexedDB
• 메모리에 저장: 세션 스토리지, 세션 쿠키

영구 쿠키는 만료날짜가 설정되어있으면 브라우저가 닫혀도 디스크에 저장되고 만료일까지 유지됩니다. (크롬기준 최대 400일)

세션 쿠키는 만료날짜가 지정되지 않은 경우 브라우저가 닫힐 때 사라집니다.

쿠키가 저장되는 과정

When the user agent receives a Set-Cookie header, the user agent stores the cookie together with its attributes. Subsequently, when the user agent makes an HTTP request, the user agent includes the applicable, non-expired cookies in the Cookie header.

사용자가 Set-Cookie 헤더를 수신하면, 사용자는 쿠키와 해당 속성을 함께 저장합니다. 이후 사용자가 HTTP 요청을 보낼 때, 유효하고 만료되지 않은 쿠키를 Cookie 헤더에 포함시켜 서버에 전송합니다

쿠키를 포함하는 과정

The user agent includes stored cookies in the Cookie HTTP request header. The user agent MUST use an algorithm equivalent to the following algorithm to compute the “cookie-string” from a cookie store and a request-uri:

1. Let cookie-list be the set of cookies from the cookie store that meets all of the following requirements:
   • Either:
     • The cookie’s host-only-flag is true and the canonicalized request-host is identical to the cookie’s domain.
   • Or:
     • The cookie’s host-only-flag is false and the canonicalized request-host domain-matches the cookie’s domain.
   • The request-uri’s path path-matches the cookie’s path.
   • If the cookie’s secure-only-flag is true, then the request-uri’s scheme must denote a “secure” protocol (as defined by the user agent)

쿠키가 해당 서버에 전송되기 위해서는 도메인과 경로가 일치해야 하며, 경우에 따라 보안 연결(HTTPS)가 요구 됩니다.

브라우저는 대략적으로 HashMap<도메인,쿠키>와 비슷한 구조로 모든 쿠키를 관리한다고 볼 수 있습니다.

각 쿠키는 도메인, 경로, 보안 속성 등 다양한 정보를 가지고 있고, 브라우저는 이를 기준으로 적절한 쿠키를 전송합니다.

filter(e -> { ... }) 로직처럼 도메인이 매칭되고, 유효한 쿠키인지 확인하고, 보안 속성을 확인해서 조건에 맞으면 요청 헤더에 쿠키를 포함합니다.

보안

쿠키에 정보를 저장할 때, 기본적으로 모든 쿠키 값은 사용자에게 노출되며 변경될 수 있습니다.

쿠키에 접근하거나 수정하는 등 잘못된 사용을 막기 위한 보안 조치가 필요합니다.

• Secure 속성 : HTTPS 프로토콜을 통해 암호화된 요청과 함께 서버에 전송됩니다.

  해당 옵션이 있으면 https://site.com에서 생성한 쿠키는 http://site.com에서 접근할 수 없습니다.

  쿠키는 기본적으로 도메인만 확인하기 때문에 프로토콜을 제한할 때 해당 옵션을 사용합니다.

• HttpOnly 속성 : 자바스크립트로 쿠키를 수정할 수 없도록 하여, XSS (교차 사이트 스크립팅) 공격을 방지합니다.

  자바스크립트 같은 클라이언트 측 스크립트가 쿠키를 사용할 수 없게 합니다. document.cookie를 통해 쿠키를 볼 수도 없고 조작할 수도 없습니다.

cookie.setSecure(true); // HTTPS에서만 전송
cookie.setHttpOnly(true); // JavaScript에서 접근 불가

SameSite 속성

SameSite 속성은 서버가 교차 사이트 요청 시 쿠키가 전송되는 방식을 지정할 수 있도록 합니다.

이를 통해 CSRF(교차 사이트 요청 위조) 공격을 방지하고 사용자 프라이버시를 보호할 수 있습니다

쿠키가 설정된 사이트: https://example.com

외부 사이트: https://external-site.com

• Strict: 쿠키는 오직 동일한 사이트에서 발생하는 요청에 대해서만 전송됩니다.

  사용자가 다른 웹사이트에서 해당 사이트로 이동하는 링크를 클릭하거나, 다른 사이트에서 이 사이트로 리소스를 요청하는 경우 쿠키가 전송되지 않습니다.

  만약 사용자가 https://external-site.com에서 https://example.com으로 링크를 클릭한다면, Strict로 설정된 쿠키는 전송되지 않습니다. 이는 CSRF 방어에 매우 유용합니다.

• Lax: 사용자가 다른 사이트에서 클릭해 들어온 경우에도 쿠키가 전송됩니다.

  안전한 메서드의 경우에 해당됩니다. GET은 읽기 작업만 수행하고 쓰기나 데이터 교환 작업은 수행하지 않습니다

  https://external-site.com에서 https://example.com으로 링크를 클릭하면 쿠키가 전송됩니다.

  하지만 JavaScript를 사용하여 해당 사이트로의 POST 요청을 보내거나 리소스를 요청할 때는 쿠키가 전송되지 않습니다.

• None: 쿠키가 모든 요청에 대해 전송됩니다. 이 경우 Secure 속성도 설정해야 합니다.

  https://external-site.com에서 https://example.com으로 리소스를 요청하거나 사용자가 직접 방문해도 모든 요청에서 쿠키가 전송됩니다. 이것은 광고 추적기나 외부 리소스를 사용할 때 필요한 설정일 수 있습니다.

오래된 브라우저(2017년 이전 버전)에선 samesite 옵션을 지원하지 않습니다.

따라서 XSRF 토큰 같은 보안 기법과 함께 사용됩니다.

참고자료

• RFC6265

• 모던 자바스크립트
• MDN HTTP Cookie