[Network] HTTP 헤더 살펴보기 - 쿠키(HTTP Cookies)

 

HTTP 프로토콜은 기본적으로 무상태(Stateless) 속성을 가지고 있습니다.

 

서버가 클라이언트의 요청을 기억하지 못하기 때문에 클라이언트는 매 요청 시 필요한 데이터를 추가로 전송해야 하며, 이로 인해 이전과 후속 요청이 같은 사용자의 것인지를 판단하기 어려워집니다.

 

예를 들어, 서버는 로그인 상태 또한 기억하지 못하며 모든 요청에 사용자 정보를 포함해야 합니다.

 

여기서 쿠키라는 개념이 등장합니다.

1. HTTP 쿠키란 무엇인가요?

HTTP 쿠키(HTTP Cookies)는 서버와 클라이언트 간 전달되는 작은 데이터 조각입니다.

 

서버가 브라우저에게 웹 페이지를 전송할 때 쿠키를 포함할 수 있습니다. 브라우저는 해당 쿠키를 저장해두었다가 동일한 서버에 재요청 시 그 쿠키를 도로 전송합니다.

 

이로써 무상태 환경에서 클라이언트를 식별하고, 데이터를 복기하여 상태를 유지하는 개념을 가능하게 합니다.

2. HTTP 쿠키의 메커니즘

브라우저와 서버는 HTTP 헤더를 통해서 쿠키를 주고 받습니다.

 

2-1. Set-Cookie

서버가 HTTP 요청을 받으면, 브라우저에 데이터를 저장하도록 지시하기 위해 Set-Cookie 응답 헤더를 반환합니다.

 

Set-Cookie 헤더에는 브라우저가 수신해야 할 쿠키 정보가 명시되어 있습니다.

 

하나의 Set-Cookie 응답 헤더에는 하나의 쿠키(key=value)만 담을 수 있습니다. 따라서 여러 개의 쿠키를 보낼 때는 아래와 같은 모습이 됩니다.

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length:
Set-Cookie: items=16
Set-Cookie: headercolor=blue
Set-Cookie: footercolor=green
Set-Cookie: screenmode=dark, Expires=Sun, 1 Jan 2023 12:00:00 GMT
Set-Cookie: job=111; Max-Age: 3600; Secure; HttpOnly

 

2-2. Cookie

이렇게 서버로부터 쿠키를 응답 받은 브라우저는 해당 쿠키를 클라이언트 컴퓨터의 하드디스크에 저장합니다.

 

그리고 동일한 서버에 HTTP 요청을 할 때 보관해놓은 쿠키를 Cookie 라는 요청 헤더에 포함해서 전달합니다.

 

Cookie 요청 헤더는 여러 개의 쿠키를 ;로 구분하여 나열합니다.

GET / HTTP/1.1
Host: www.example.re
Cookie: items=16; headercolor=blue; screenmode=dark; job=111

브라우저는 Cookie 헤더를 통해 일정 시간 동안 반복해서 서버로 쿠키를 돌려보내게 됩니다.

3. HTTP 쿠키의 유효 기간

브라우저가 쿠키를 얼마동안 돌려보내야 하는지는 서버가 Set-Cookie 응답 헤더를 보낼 때 결정합니다.

서버가 만료일을 설정하지만, 만료 날짜는 브라우저에 의해 관리됩니다.

 

3-1. 세션 쿠키(Session cookie)

세션 쿠키는 유효 기간이 별도로 명시되지 않은 쿠키로, 브라우저의 세션이 종료될 때 함께 만료됩니다.

 

3-2. 영속 쿠키(Permanent cookie)

반대로, 영속 쿠키는 세션과 무방하게 특정 기간이나 시점까지 유효합니다.

 

Set-Cookie 응답 헤더에 Expires 또는 Max-Age 속성을 포함하여 쿠키의 유효 시간을 명시합니다.

이로써 특정 만료일까지만 쿠키가 유지되도록 할 수 있습니다.

Set-Cookie: Expires=Sat, 26-Dec-2020 04:39:21 GMT
Set-Cookie: Max-Age=3600 (3600초)
Set-Cookie: key=value; Max-Age=0

Max-Age 속성은 쿠키가 만료될 때까지의 초 수이며, 0이나 음수를 지정하면 해당 쿠키가 삭제됩니다.

 

Expires 속성과 함께 있을 때는 Max-Age가 우선하며, 두 속성이 모두 없다면 해당 쿠키는 세션 쿠키가 되어 브라우저의 세션이 종료될 때 만료됩니다.

4. HTTP 쿠키의 적용 범위

4-1. 도메인 제한

브라우저는 기본적으로 쿠키를 보낸 서버가 속한 도메인으로만 쿠키를 되돌려 보냅니다. 하지만 도메인을 지정하여 쿠키를 보낼지 말지를 제어할 수도 있습니다.

 

Set-Cookie 응답 헤더에 Domain 속성을 명시하면, 서브 도메인까지 포함되도록 쿠키의 범위가 확장됩니다.

Set-Cookie: key=value; Domain=example.org

예를 들어 Domain 속성을 Domain=example.org로 설정하면, 브라우저는 쿠키를 dev.example.org과 같은 하위 도메인에도 보내게 됩니다.

 

이처럼 도메인을 지정함으로써 더 넓은 액세스 권한을 부여할 수 있습니다.

반대로 도메인을 생략하면 현재 문서 기준 도메인만을 적용하며, 하위 도메인은 제외됩니다.

 

4-2. 경로 제한

Domain 속성이 쿠키의 범위를 확장하는 데 사용되는 방식과 유사하게, Path 속성은 해당 도메인의 특정 경로로 쿠키의 범위를 제한할 수 있습니다.

Set-Cookie: key=value; Path=/news/

쿠키에 경로를 설정하면, 해당 페이지 경로에서만 쿠키 사용 접근이 가능합니다.

다시 말해, 지정된 경로를 포함해 하위 경로 페이지로만 쿠키가 전송됩니다.

 

일반적으로 루트 경로 (path=/)로 지정하는데, 한 도메인 안에서 모든 경로에 쿠키가 유효하길 바라기 때문입니다.

 

e.g. Path=/news/ 속성이 포함된 경우, /news 경로에 쿠키를 저장하게 됩니다.

 

Path	Match
/news or /news/	Yes – Exact match
/news/current	Yes – Valid subdirectory
/news/current/world	Yes – Valid subdirectory
/	No – The root directory is not accessible
/oldnews	No – Different subdirectory

 

5. HTTP 쿠키의 용도

HTTP 쿠키는 일반적으로 세 가지 목적으로 사용됩니다.

 

1. 트래킹(Tracking): 특정 브라우저에서 사용자의 브라우징 활동(방문한 페이지, 페이지에 머무른 시간, 클릭한 링크 등)을 기록하여 분석 데이터를 수집하거나 광고 개제를 위해 사용됩니다.
2. 인증(Authentication): 현재 서버에 로그인한 사용자의 정보를 저장하여 HTTP 요청이 발생할 때마다 다시 인증하지 않도록 합니다.
3. 개인화(Preferences): 웹 사이트에 대한 사용자 지정 설정(글꼴 크기, 선호하는 테마 등)은 HTTP 세션 간에 유지되어 사용자 경험을 개선할 수 있습니다.

6. HTTP 쿠키의 한계점

쿠키는 브라우저, 즉 클라이언트 측에 저장되며, 쿠키 정보는 모든 HTTP 요청과 함께 *서버에 전송됩니다.

 

따라서 중복된 데이터가 반복해서 전송되어 불필요한 네트워크 트래픽이 추가로 소비될 수 있습니다.

 

또한 정보가 클라이언트 측에서 관리되기 때문에 악용될 우려가 있고, 보안에 취약하여 정보를 탈취 당할 위험성이 존재합니다.

 

그러므로 쿠키는 세션 id나 인증 토큰 등 최소한의 정보만 사용해야합니다.

 

* 만약 서버에 전송하지 않고 웹 브라우저 내부에 데이터를 저장하고 싶다면 웹 스토리지(localStorage, sessionStorage)를 사용할 수 있지만, 보안에 민감한 데이터는 주의해야 합니다.

7. 보안 및 접근 제한

쿠키는 인증 정보를 유지할 수 있는 기능이 있기 때문에 보안을 위해 접근을 제어하는 것이 필요할 수 있습니다. 이를 위해 사용할 수 있는 속성에 대해 알아봅시다.

 

7-1. Secure

쿠키는 기본적으로 HTTP와 HTTPS를 구분하지 않고 전송됩니다. Secure 속성을 적용하면 쿠키는 HTTPS인 경우에만 전송됩니다.

Set-Cookie: jobid=111; Secure;

 

7-2. HttpOnly

HttpOnly 속성이 명시된 쿠키는 브라우저에서 자바스크립트로 Document.cookie 객체를 통해 접근할 수 없습니다.

 

이로써 *XSS 공격 을 방지할 수 있습니다.

Set-Cookie: jobid=111; HttpOnly;

 

*크로스 사이트 스크립팅(Cross Site Scripting, XSS): 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것을 말합니다.

 

7-3. SameSite

서버는 SameSite 속성을 사용하여 브라우저에게 쿠키를 *서드 파티 사이트로 보낼지 여부를 알릴 수 있습니다.

 

* 도메인이 해당 리소스를 호스팅하는 서버와 일치하는 경우를 퍼스트 파티 쿠키(First-party cokkies)라고 합니다. 반대로 도메인이 다른 경우, 이를 서드 파티 쿠키(Third-party cokkies)라고 합니다. 서드 파티 쿠키는 주로 웹 사용 추적과 광고 목적으로 사용되며, 예시로는 웹 페이지의 광고 배너가 있습니다. 이들은 하나의 도메인에 표시되지만 다른 곳에서 호스팅됩니다.

 

SameSite 속성은 *CSRF 공격에 대한 보호를 제공하기 위한 것으로, 요청 도메인과 쿠키에 설정된 도메인이 같은 경우에만 쿠키를 전송하게 됩니다.

 

*CSRF(Cross-Site Request Forgery): 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 하는 공격을 말합니다. 사용자가 의도하지 않았지만, 자신도 모르게 서버를 공격하게 되는 경우라고 할 수 있습니다.

---

참고

• 모든 개발자를 위한 HTTP 웹 기본 지식
• HTTP 쿠키
• 쿠키 1부: HTTP로 설명하는 쿠키(cookie)
• HTTP Cookies