웹 브라우저 Cookie 알아보기

Cookie란 무엇일까?

웹 브라우저를 사용해본적이 있다면 쿠키에 대해서 한번쯤은 들어 보았을 것이다. 그렇다면 대략적으로 무언가의 데이터라는 생각이 들텐데 정확히 어떤 데이터이고 어떤 용도인지 알 필요가 있다.

 

쿠키는 웹 서버가 사용자의 브라우저에 전송(저장)하는 작은 데이터 조각이다. 브라우저는 그 데이터 조각을 저장해 두었다가 동일한 서버에서 재요청이 온다면 저장된 데이터를 함께 전송한다. 이를 사용하면 Stateless 성향을 가진 HTTP 프로토콜에서도 서버와 클라이언트 간의 연결이 유지될 수 있다.

 

 Stateless (무상태, 불연속성)
웹 서버 입장에서 매 요청이 어떤 웹 브라우저가 보낸 것인지 알 수 없다.
클라이언트와 서버 관계에서 서버가 클라이언트 상태를 보존하지 않는 것을 의미한다.

Stateful (상태유지, 연속성)
클라이언트와 서버 관계에서 서버가 클라이언트의 상태를 보존한다.
일반적으로 브라우저의 쿠키 또는 서버의 세션에 저장되어 상태를 유지한다.

 

Cookie는 어디에 사용되나?

과거에 쿠키는 클라이언트 측에 정보를 저장하는 용도로 많이 사용되었다. 하지만 현재는 modern storage API를 사용해 정보를 저장하는 것을 권장한다. 모든 요청에 쿠키가 함께 전송되기 때문에 성능 저하의 원인이 될수도 있기 때문이다.

쿠키는 주로 아래 3가지 목적을 위해 사용한다.

• 세션 관리(Session management) : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
• 개인화(Personalization) : 웹사이트에 대한 사용자 선호, 테마 등의 세팅
• 트래킹(Tracking) : 사용자 행동을 기록하고 분석하는 용도

쿠키 사용 기준

웹 브라우저가 쿠리를 서버에 전송할지 여부는 쿠키에 설정된 도메인(Domain)과 경로(Path)에 따라 결정된다. 모든 쿠키는 특정 도메인과 경로에 연결되어 있으며 요청하는 URL의 도메인과 경로가 설정값과 일치하거나 해당 경로 하위에 있는 경우만 쿠키가 전송된다.

 

도메인과 경로 설정

1. h1 = w1 (Domain: a.com, Path: /)
2. h2 = w2 (Domain: a.com, Path: /user)
3. h3 = w3 (Domain: b.com, Path: /hello)
4. h4 = w4 (Domain: c.com, Path: /world)

요청에 따른 쿠키 전송

• a.com/user/name 요청: 1번 쿠키 + 2번 쿠키 전송 (도메인, 경로 모두 일치)
• a.com/ 요청: 1번 쿠키만 전송 (경로 /는 최상위)
• b.com/hello 요청: 3번 쿠키만 전송 (경로 일치)
• c.com/ 요청: 전송되는 쿠키 없음 (경로가 /world와 일치하지 않음)

Path의 역할

쿠키에 설정된 Path는 해당 경로와 그 하위 경로에 대한 쿠키 전송 여부를 결정한다. Path에는 '*'(와일드카드)가 사용되지 않고 '/'가 최상위 경로를 뜻한다. 

 

예를 들어 Path가 '/'로 설정된 쿠키는 아래 경로로 모두 전송된다.

• a.com/user
• a.com/payment
• a.com/product

만약 Path가 '/user'로 설정된 쿠키는 아래 경로와 아래 경로의 하위 경로에만 전송된다.

• a.com/user/profile
• a.com/user/settings

주의사항❗️
Path는 대소문자를 구분하므로 '/User'와 '/user'는 다른 경로로 인식된다.

 

쿠키 유효시간

쿠키의 유효시간은 두 가지 속성에 의해 나누어진다.

1. Persistent Cookie (지속 쿠키) : 'MaxAge' 또는 'Expires' 속성이 명시된 쿠키로 지정된 시간까지 유지된다.
   • MaxAge : 쿠키와 브라우저에 저장된 후 유지될 시간을 초 단위로 설정
   • Expires : 쿠키가 만료될 날짜와 시간을 지정
2. Session Cookie (세션 쿠키) : 유효 시간 속성이 설정되지 않으면 브라우저가 닫힐 때 삭제된다.

세션의 개념💡
로그인 세션 : 로그인 후 로그아웃할 때까지의 시간
HTTP 세션 : 클라이언트가 서버로 요청을 보내고 응답을 받을 때까지의 연결
브라우저 세션 : 브라우저 탭 또는 창이 열려 있는 동안 유지되는 기간

 

쿠키의 보안

쿠키는 주로 로그인 인증이나 개인 식별 정보를 저장하는데 사용되므로 이를 보호하기 위한 보안 설정이 필수적이다.

쿠키 보안을 위한 주요 옵션은 아래와 같다.

 

HttpOnly

'HttpOnly' 옵션이 설정된 쿠키는 클라이언트 측 자바스크립트에 접근할 수 없다. 이는 XSS 공격을 통해 쿠키를 탈취하려는 시도를 방지하는데 효과적이다.

XSS?
Cross Site Script의 약자로 공격자가 웹사이트를 넘어서 공격한다는 것으로 웹사이트 입력 또는 출력 부분에 스크립트를 심어 웹사이트 뿐만 아니라 다른 사용자 또는 서버도 공격 가능하다. 대표적으로 Reflected XSS, Stored XSS, Dom based XSS로 나누어진다.

 

Secure

'Secure'옵션이 설정된 쿠키는 HTTPS 프로토콜을 사용하는 경우에만 서버로 전송된다. 이로 인해서 패킷탈취(MITM) 공격을 방지할 수 있다. HTTP로 통신하는 경우에는 전송되지 않으므로 쿠키 탈취 위험을 줄일 수 있다.

MITM?
Man-in-the-Middle의 약자로 요청과 응답 사이에서 응답 패킷 탈취를 방지한다.

 

SameSite 

'SameSite'속성은 쿠키가 동일한 사이트에서만 전송되도록 하여 CSRF 공격을 방지한다. SameSite의 보안 수준은 3가지로 나누어진다.

 

SameSite 보안 수준

• 보안 높음 - Strict : 쿠키가 동일한 사이트 내에서만 전송된다. 외부 사이트에서의 모든 요청에 대한 쿠키 전송이 차단되므로 보안성이 가장 높다.
• 보안 중간 - Lax : 기본적으로 서드파티 요청에는 쿠키가 허용되지 않지만 사용자가 링크를 클릭하는 등 GET 요청에 한해 허용된다.
  • 특수 케이스 : GET 요청, <a>, <link rel="prerender">
• 보안 낮음 - None : 서드파티 쿠키도 전송이 허용되며 다른 도메인 간 쿠키 전송이 가능하다. 단, Secure 속성이 필수로 설정되어야 한다.

퍼스트 파티 쿠키와 서드파티 쿠키
퍼스트 파티와 서드 파티 판단은 Site Domain과 Cookie Domain의 일치여부로 결정된다.

퍼스트 파티 쿠키: 현재 보고 있는 웹사이트의 도메인에서 설정된 쿠키이다. 사용자가 로그인한 상태를 유지하기 위한 쿠키가 이것에 해당한다. 도메인이 일치하면 쿠키가 전송된다.

서드파티 쿠키: 현재 사이트와 다른 도메인에서 설정된 쿠키로 주로 광고 추적 및 마케팅 목적으로 사용된다. 다른 도메인에서 설정되어 크로스 사이트 요청 시에도 전송될 수 있다.

 

참고문헌

 

HTTP 쿠키 - HTTP | MDN

🌐 웹 브라우저의 Cookie 헤더 다루기