웹브라우저는 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: 서드 파티 쿠키 데모