メニュー

クッキーの仕組み:サードパーティクッキーの基礎知識2

サードパーティクッキーの基礎知識

更新日:2022年7月26日(初回投稿)
著者:ひぐぺん工房 松浦 健一郎、司 ゆき

前回は、サードパーティクッキーが話題になっている現状を紹介しました。今回は、クッキーの仕組みをより詳しく学びます。Webブラウザを使って実際のクッキーを確認したり、WebサーバとWebブラウザの間でクッキーを送受信する様子を観察してみましょう。

今すぐ、技術資料をダウンロードする!(ログイン)

1. 実際のクッキーを見てみよう

前回解説したように、クッキーはWebサーバが発行し、Webブラウザが保存します。ここでは、代表的なWebブラウザの一つであるChromeを使って、保存されたクッキーを見てみましょう。

次のように操作してみてください(以下の手順は、Windows 11とmacOS 12のChrome 100で確認しています)。

1:Chromeを起動し、適当なWebページを開きます。例えば、Tech Noteを開いてみます。

2:Windowsの場合はCtrl+Shift+Iキー、macOSの場合はoption+command+Iキーを押します。あるいは、Chromeの右上にある「⁝」(縦の3点リーダ)ボタンをクリックし、メニューから「その他のツール」→「デベロッパーツール」をクリックします。

3:デベロッパーツール(開発者ツール)が開きます(図1)。デベロッパーツールは、ウェブサイトの開発やテストに役立ちます。

4:表示が日本語ではない場合には、デベロッパーツールの右上にある歯車ボタンをクリックし、Preferences(環境設定)のLanguage(言語)で、「Japanese-日本語」を選択します。そして、右上の×ボタンをクリックして環境設定を閉じた後に、「Reload DevTools」(デベロッパーツールを再読み込み)をクリックします。

5:デベロッパーツールの配置を変えたい場合は、デベロッパーツールの右上にある⁝ボタンをクリックし、メニューの「固定サイド」で好きな配置を選びます。

図1:デベロッパーツール

図1:デベロッパーツール

デベロッパーツールを使うと、保存されたクッキーを確認できます。次のように操作してみてください。

1:デベロッパーツールの上にある「アプリケーション」をクリックし、左に表示される「▶Cookie」の▶をクリックします。

2:Cookieの欄には、クッキーの発行元が表示されます。例えば、イプロスのウェブサイト(https://www.ipros.jp)をクリックしてください。

3:クッキーの一覧が表示されます(図2)。表の見出し(名前、値など)はクッキーの属性を示します。見出しをクリックすると、その属性に基づいて一覧をソート(並べ替え)できます(なお、図ではクッキーの値を伏せています)。

図2:クッキーの表示

図2:クッキーの表示

クッキーにはさまざまな属性があります。ここではDomain(ドメイン)に注目してみてください。ドメインとは、インターネット上のホスト(コンピュータやその他のデバイス)を識別する名称の一部です。クッキーのDomain属性は、そのクッキーを受け取ることができるホストを示します。

ウェブサイトを提供するホストとDomain属性が一致しているクッキーは、ファーストパーティクッキーです。Tech Noteの場合、Domain属性が「.ipros.jp」や「www.ipros.jp」などのクッキーが相当します。一方、ウェブサイトを提供するホストとDomain属性が一致しないクッキーは、サードパーティクッキーです。他のウェブサイトでもクッキーを確認してみてください。ファーストパーティだけではなく、多くのサードパーティクッキーが使われていることが分かります。

もし、クッキーが表示されない場合は、Webブラウザの設定を確認してください。Webブラウザがクッキーを受け付けない設定になっているかもしれません。Chromeの場合は、右上にある⁝をクリックし、メニューから「設定」→「プライバシーとセキュリティ」→「Cookieと他のサイトデータ」を開きます。「すべてのCookieをブロックする」以外を選択すれば、クッキーが表示されます。

2. WebサーバからWebブラウザにクッキーを送る

続きは、保管用PDFに掲載中。ぜひ、下記よりダウンロードして、ご覧ください。

3. WebブラウザからWebサーバにクッキーを送る

続きは、保管用PDFに掲載中。ぜひ、下記よりダウンロードして、ご覧ください。

ピックアップ記事

tags