ウェブブラウザは、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 を含めます。これは、cat という名前の Cookie を tabby という値で保存するようブラウザに指示します。
Cookie は、Cookie が期限切れになるか削除されるまで、cats.example, への後続のリクエストに含まれます。これにより、サーバーは複数のウェブページやセッションにわたってユーザーに関する情報を保持できます（たとえば、ユーザーにタビー猫の画像が表示されたことなど）。
| ヘッダー | アクション | 例 | Effect | |
|---|---|---|---|---|
| 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 のデモ