ウェブブラウザは、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 Cookie と呼ばれます。cats.example/images/cat.jpg のリクエストに応じて、cats.example サーバーはヘッダー Set-Cookie:cat=tabby を含めます。これにより、ブラウザは tabby という値の cat という名前の Cookie を保存します。
この Cookie は、Cookie が期限切れになるか削除されるまで、cats.example, への後続のリクエストに含まれます。これにより、サーバーは複数のウェブページやセッションにわたってユーザーに関する情報（たとえば、ユーザーにトラ猫の画像が表示されたことなど）を保持できます。
| ヘッダー | アクション | 例 | 効果 | |
|---|---|---|---|---|
| HTTP レスポンス サーバーからブラウザ |
Set‑Cookie
|
ウェブサーバーがブラウザに Cookie の保存を要求します。 | Set‑Cookie:cat=tabby |
Cookie はブラウザに保存され、その Cookie を設定したサーバーへの後続のリクエストで提供されます。 |
| HTTP リクエスト ブラウザからサーバー |
Cookie |
ブラウザが Cookie を提供します。 | Cookie:cat=tabby |
この Cookie は、リクエストの宛先であるサーバーで利用できるようになります。 |
デモ
- 1pc.glitch.me: ファーストパーティ Cookie のデモ
- 3pc.glitch.me: サードパーティ Cookie のデモ