웹브라우저는 HTTP 프로토콜에 따라 웹사이트와 상호작용합니다. 다음은 커뮤니케이션을 위한 표준화된 규칙 집합입니다.
- 웹페이지를 방문하면 브라우저는 페이지의 리소스(예: HTML, CSS, JavaScript, 이미지)에 대한 HTTP 요청을 전송합니다.
- HTTP 서버(웹사이트를 호스팅하는 웹 서버)가 브라우저로부터 유효한 HTTP 요청을 수신하면 서버는 브라우저에 HTTP 응답으로 응답합니다.
- 요청과 응답에는 HTTP 헤더라고 하는 추가 정보가 포함될 수 있습니다.
예를 들어 사이트 cats.example.을 고려해 보겠습니다.
요청
cats.example 페이지에 액세스하면 다양한 도메인에 대한 요청 체인이 시작됩니다. 여기에는 cats.example 자체에 호스팅된 이미지에 대한 요청, analytics.example의 애널리틱스 스크립트에 대한 요청, 다른 도메인의 추가 리소스에 대한 기타 요청이 포함됩니다.
HTTP 요청을 HTTP 요청 헤더로 보강하여 브라우저에서 웹 서버로 보충 정보를 제공할 수 있습니다. 예를 들어 다음과 같은 헤더가 포함되는 경우가 많습니다.
Accept-Language: en-US
이 헤더는 사용자의 기본 언어를 나타냅니다(이 경우 영어(미국)).User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
이 헤더는 사용자의 브라우저 및 운영체제(이 경우 'Mozilla/5.0'(브라우저 제품군), 'Macintosh'(운영체제), 'Chrome/127.0.0.0'(브라우저 버전))에 관한 세부정보를 제공합니다.
응답
웹 서버가 브라우저로부터 유효한 요청을 수신하면 서버는 요청된 리소스('페이로드': HTML, CSS, JavaScript, 이미지 파일, 동영상 또는 기타 데이터)를 제공하는 응답을 브라우저에 전송합니다. 브라우저의 각 요청에 요청 헤더가 포함될 수 있는 것처럼 서버의 각 응답에 응답 헤더가 포함될 수 있습니다. 이러한 응답 헤더는 페이로드와 함께 전송됩니다.
응답에 포함된 Set-Cookie 헤더는 브라우저에 이름과 값이라는 텍스트를 저장하도록 지시합니다. 이를 HTTP 쿠키라고 합니다. cats.example/images/cat.jpg 요청에 대한 응답으로 cats.example 서버는 Set-Cookie:cat=tabby 헤더를 포함합니다. 이렇게 하면 브라우저에 값이 tabby인 cat이라는 쿠키를 저장하라는 지시가 전달됩니다.
그러면 해당 쿠키는 쿠키가 만료되거나 삭제될 때까지 후속 cats.example, 요청에 포함됩니다.
이렇게 하면 서버가 여러 웹페이지 또는 세션에서 사용자에 관한 정보를 유지할 수 있습니다. 예를 들어 사용자에게 고양이 이미지가 표시되었다고 가정해 보겠습니다.
| 헤더 | 작업 | 예 | 효과 | |
|---|---|---|---|---|
| HTTP 응답 서버에서 브라우저로 |
Set‑Cookie
|
웹 서버가 브라우저에 쿠키를 저장하도록 요청합니다. | Set‑Cookie:cat=tabby |
쿠키는 브라우저에 저장되며 설정된 서버에 대한 후속 요청에 제공됩니다. |
| HTTP 요청 브라우저에서 서버로 |
Cookie |
브라우저에서 쿠키를 제공합니다. | Cookie:cat=tabby |
쿠키는 요청의 대상인 서버에서 사용할 수 있습니다. |
데모
- 1pc.glitch.me: 퍼스트 파티 쿠키 데모
- 3pc.glitch.me: 서드 파티 쿠키 데모