Cookieだけじゃない！ Web... - Qiita

Cookieだけじゃない！Webの裏側で“あなたの行動”はこう見られている #初心者 - Qiita 407 いいねしたユーザー一覧へ移動 386 X（Twitter）でシェアする Facebookでシェアする はてなブックマークに追加する more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete @ nucomiya in 株式会社Nuco Cookieだけじゃない！Webの裏側で“あなたの行動”はこう見られている HTTP 初心者 cookie セッション 407 最終更新日 2025年06月18日 投稿日 2025年06月16日 はじめに 「さっき見てた商品の広告が、別のサイトにも出てきた…なんで？」 そんな経験、一度はあるのではないでしょうか。 ネットを使っていると、まるで誰かに見られているかのように、自分の行動が広告やコンテンツに反映されることがあります。最初はちょっと便利だと感じても、あまりに的確すぎると、少し不気味にすら感じることもありますよね。 この“見られている感覚”の裏側には、Cookieという仕組みだけでなく、LocalStorage、ブラウザフィンガープリント、アクセス解析ツールなど、さまざまな追跡技術が関わっています。そしてそれらの一部は、ユーザーが意識的にブロックしても簡単には防げないものだったりします。 こうした技術の仕組みを理解することで、「なぜこんな挙動になるのか？」といった疑問に答えられるようになったり、ユーザーに配慮した設計や実装のヒントが得られることもあります。特にフロントエンドやWeb系の開発に関わる方であれば、一度立ち止まって整理してみる価値はあるはずです。 では、Cookieを入り口に、Webの“見られ方”について見ていきましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、 こちら まで。 Cookieの基本 ユーザーの行動を“見える化”する技術の代表格といえば、やはりCookieでしょう。 この章では、Cookieがそもそもどんな仕組みで、どんな場面で使われているのか、そして追跡にどう関わっているのかを整理します。 あわせて、「1st Party」と「3rd Party」の違いや、近年問題視されている背景についても見ていきましょう。 Cookieとは？ Cookieとは、Webサイトがユーザーのブラウザに保存させる小さなテキスト情報です。1つのCookieのサイズは4KB程度と非常に小さいですが、Web上でのユーザー識別や状態の保持など、さまざまな目的に使われています。 代表的な用途には以下のようなものがあります。 セッション管理 ログイン状態の維持 ユーザー認証 フォーム送信後の「この操作をしたのはあなたですか？」などの本人確認 パーソナライズ 言語設定、テーマカラー、地域情報などの保存 行動記録 どのページを見たか、いつ見たか、などの分析用データ Cookieは、 「この人は前にもこのサイトに来た」や「このユーザーはログイン済み」などの状態を、Webサーバーが把握するための手がかり になります。 自分のブラウザに保存されているCookieを見てみよう 「Cookie」と聞いても、なかなか実感がわかないかもしれません。 でも実は、あなたのブラウザの中にも、今まさにたくさんのCookieが保存されています。 Chromeで確認する方法： 1. 任意のWebサイト（例：Googleなど）を開く 2. 画面上で右クリック →「検証」を選択または F12 キーを押す(Macなら「Command+Option+I」でも可) 3. 上部メニューから「Application」タブを開く 4. 左のサイドバーで「Cookies」をクリックすると、現在のサイトが保存しているCookieの一覧が表示されます 値や名前のほかにも、 Domain, Path, Expires, HttpOnly, Secure といった項目が並んでいます。 何気なく見ているだけのWebページでも、実はこうした情報がブラウザに書き込まれ、次回アクセス時には自動的に送信されているのです。 ⚠ Cookieの中には、ログイン状態を維持するためのトークンや識別子が含まれていることがあります。 これをうっかり他人に見せたり、SNSなどに貼ってしまうと、なりすましやアカウント乗っ取りのリスクにつながる可能性があります。 特に session_id や auth_token といった項目が含まれている場合、それを他人が使えば、あなたになりすましてサービスにアクセスできることもあります。 実験するときは あくまで自分の環境内で確認し、内容をコピー・共有するのは避けるのが安全です。 キャッシュとの違い Cookieと混同されやすい技術に キャッシュ（Cache） がありますが、両者は目的も仕組みもまったく異なるものです。 Cookieとキャッシュの比較 Cookie キャッシュ 保存場所 ブラウザ（テキストデータとして保存） ブラウザ（画像やCSSなどのリソースを保存） 主な用途 状態管理、ユーザー識別、セッション維持 表示高速化、通信量削減 読み取り対象 サーバーまたはJavaScript ブラウザ自身（自動処理） 通信への影響 リクエストのたびにサーバーへ送信される リソースの再取得を省略できる データの種類 キーと値の組み合わせ（文字列） HTML, CSS, 画像, JavaScriptなどのファイル 有効期限 明示的に設定（セッション単位や数日～年単位） ブラウザやサーバー側のキャッシュ設定に従う ユーザー識別への利用 可能（トラッキングやパーソナライズ） 基本的に不可（単なるリソース最適化） 例1:Cookieの使われ方 たとえばECサイトで商品をカートに入れたあと、ページを移動してもカートの中身がそのまま残っていたとします。 これはCookieに「カートに入っている商品のID」が記録されており、それがサーバーに送信されて「まだ未購入だな」と判断されているケースです。 例2：キャッシュの使われ方 同じECサイトのトップページのロゴ画像が、1回目の表示は少し時間がかかったけれど、2回目以降は一瞬で表示されたとします。 これは、ロゴ画像がブラウザにキャッシュとして保存されており、再びサーバーからダウンロードしなくても表示できたという仕組みです。 1st Party Cookie と 3rd Party Cookieとは Cookieについて調べていると、「1st Party Cookie」と「3rd Party Cookie」という言葉を目にすることがあります。 これらはどちらもCookieではありますが、“誰が発行しているか”という点で明確に異なっており、利用目的や規制状況にも違いがあります。同じ「Cookie」という言葉でも、1stと3rdでは成り立ちも目的も規制の対象もまったく異なるという点はしっかり押さえておきたいところです。 それでは、それぞれのCookieの仕組みと、使われ方の違いについて見ていきましょう。 1st Party Cookie 1st Party Cookieとは、ユーザーが今まさにアクセスしているWebサイト自身が発行するCookieのことです。 たとえば、 example.com にアクセスしたときに、同じ example.com ドメインからレスポンスとともに送られるCookieがこれにあたります。 実際の用途としては以下のようなものがあります。 ログイン状態の保持（セッションIDの管理） カート情報の保存 言語や地域などの表示設定 これらは、そのサイト内での利便性を高めるための ユーザーの状態管理 として利用されており、ユーザーにとっても比較的わかりやすい使い方です。 また、1st Party Cookieは基本的に同じドメイン内でしか送受信されないため、ユーザー行動が他のサイトに渡って追跡されることはありません。そのため、ブラウザ側の規制やユーザーの警戒も比較的緩やかで、今後も多くのWebサイトで使われ続けると見られています。 3rd Party Cookie 3rd Party Cookieとは、アクセスしているWebサイトとは異なるドメインによって発行されるCookieのことです。 たとえば、あなたが news.example.com にアクセスした際、そのページに埋め込まれた広告タグが ads.tracker.com から提供されていれば、その ads.tracker.com ドメインがブラウザにCookieを保存させる可能性があります。このとき発行されたCookieは 3rd Party Cookie として扱われます。 また、3rd Party Cookieの最大の特徴は、異なるWebサイト間でも同じユーザーを識別できる点にあります。 複数のWebサイトにまたがって同じ広告タグ（= 同じドメイン）が埋め込まれていれば、Cookieを通じて「この人はAサイトにもBサイトにも訪れている」と外部の広告ネットワーク側で判断できます。この仕組みによって、ユーザーの行動履歴を蓄積し、リターゲティング広告やユーザープロファイルの作成が可能になります。 図解：3rd Party Cookieによる識別の流れ 上記は、3rd Party Cookieを用いてユーザーが異なるWebサイト間で同一人物として識別される流れを示した図です。 1.ユーザーがAサイトを訪れる ページ内に埋め込まれた ads.example.com の広告タグが読み込まれ、3rd Party Cookie（user_id=abc123） がブラウザに保存されます。 2.数日後、同じユーザーがBサイトを訪れる そこにも ads.example.com の広告タグが埋め込まれている場合、ブラウザは先ほどのCookie（user_id=abc123）を同じく ads.example.com に送信します。 3.広告ネットワーク側は、両方のアクセスが「同一ユーザー」であると判断 「Aサイトで見た商品を、Bサイトの広告欄で再表示する」といったリターゲティング広告が可能になります。 この一連の流れは、ユーザー自身が意識しないまま裏側で行われるものであり、利便性とプライバシーのバランスが常に問われてきた分野でもあります。 Cookieによる追跡の仕組み Cookieはもともと、ユーザーの利便性を高めるために使われてきました。たとえば、ログイン状態を維持したり、買い物カゴの中身を記憶したりといった使い方が代表的です。ただ、その仕組みを少しだけ掘り下げてみると、実はユーザーの行動を追跡することにもつながることがわかります。 というのも、Cookieは一度発行されると、同じドメインに対するリクエストのたびに、ブラウザが自動でその内容を添えて送信します。ユーザーが特別な操作をしなくても、サーバー側には「この人は前回と同じ人だな」という情報が届くわけです。 このような仕組みのおかげで、Webサイトは“同じユーザーからのアクセス”として振る舞いをひも付けることができます。ログインしていなくても、どのページを見たか、どれくらい滞在したか、といった行動履歴が自然と記録されていきます。 Cookieはこうした「個人をまたいだ情報の蓄積」を可能にする、Web上で最も基本的な識別手段のひとつです。ただし、ここまでで紹介した仕組みは、あくまで一例に過ぎません。実際のWebでは、Cookie以外の方法を使ってユーザーを識別するケースも増えています。 次の章では、そうしたCookieを使わない追跡の仕組みについても見ていきましょう。 Cookieがダメでも追跡は終わらない 「Cookieをブロックしておけば、もう追跡されない」 そう考えている人も少なくありません。でも実際には、ブラウザにはCookie以外にもユーザー情報を保存できる仕組みがいくつか用意されています。そしてそれらも、使い方によってはユーザーの識別や追跡に使われることがあります。 LocalStorageとSessionStorage この2つは、「Web Storage API」と呼ばれる仕組みで、JavaScriptを使って簡単にデータを保存・読み取りできるようになっています。どちらもブラウザの中にデータを保持するという点ではCookieと似ていますが、いくつか重要な違いがあります。 LocalStorage LocalStorageは、 データを永続的に保存する仕組み です。 明示的に削除されない限り、ページを閉じてもブラウザを再起動しても、そのデータは残り続けます。保存容量もCookieに比べてはるかに大きく、画像のURLやトラッキング用の識別子、ユーザーの行動履歴といったデータを保持しておくことも可能です。 追跡目的で使う場合、「このユーザーは前に何をしていたか」を思い出すためのメモのように使われることがあります。 SessionStorage 一方、SessionStorageは ブラウザのタブ単位で有効なストレージ です。 同じページ内での移動には使えますが、タブを閉じるとデータは消えてしまいます。そのため、追跡の用途というよりは、ページ遷移中の一時的なデータの保持などに使われることが多いです。 ただし、特定のセッション内での行動を記録したり、ユーザーの流れを把握するために使われるケースもあります。 IndexedDB IndexedDBは、 より高機能で柔軟なWebストレージ です。JSONデータや画像ファイルといった、複雑で容量の大きな情報を保存できるのが特徴です。ブラウザの中に“簡易的なデータベース”を持つようなイメージに近く、オフライン対応やパフォーマンス改善に利用されることが多くあります。 問題は、こうした仕組みがトラッキング用途にも使えてしまう点です。 Cookieと違ってサーバーへ自動送信されるわけではないため、表面的には見えづらく、セキュリティソフトやプライバシーブラウザでも検知が難しいことがあります。 見えない識別 CookieやLocalStorageのように、ブラウザに「何かを保存しておく」ことでユーザーを識別する仕組みはすでに多くの人に知られています。ですが実は、ユーザーの側にデータを保存しなくても、その人を特定できてしまう方法が存在します。 つまり、見えないところで静かに識別されている可能性があるのです。ここでは、そうした「保存しない識別技術」として代表的なものを紹介していきます。 ETagとキャッシュの悪用 ETag（Entity Tag）は本来、Webページの表示速度を最適化するために使われる仕組みです。 サーバー側が、ファイルのバージョン識別子のような値（例： xyz123 ）をレスポンスヘッダに付けて返し、ブラウザ側がこれを保存しておくことで、次回のアクセス時に「このファイルは変わっていない」と判断できるようになります。 しかしこのETag、本来の用途とは別にユーザーを識別する手段として悪用されるケースがあります。たとえば、初回アクセス時に user-id: abc123 のようなETagが付けられると、次回以降のアクセス時にもそのIDがリクエストに含まれます。つまり、サーバー側から見れば「これは以前来たabc123さんだな」とわかってしまうわけです。 この方法はCookieのように目に見える保存ではなく、キャッシュの仕組みに紛れて行われるため、気づきにくく、ブロックもしづらいのが厄介な点です。 フィンガープリント（Fingerprinting）とは？ もう一つ、ユーザーの環境情報そのものを“指紋”のように扱う技術があります。 これがフィンガープリントと呼ばれる識別手法です。 人によって使っている端末やブラウザの構成は微妙に異なります。以下のような情報を組み合わせることで、その人固有の特徴が浮かび上がってくるのです。 使用しているブラウザ（User-Agent） 画面の解像度 使用言語（navigator.languages） インストール済みのフォント Canvas や WebGL の描画結果 など こうした情報の組み合わせによって、Cookieなどを使わずに、その人をかなりの精度で識別できるようになります。 フィンガープリントのコード例と仕組み 実際にフィンガープリントがどのように行われるのか、簡単な例を見てみましょう。たとえば、以下のような情報はJavaScriptで簡単に取得できます。 javascript console . log ( navigator . userAgent ); console . log ( screen . width + " x " + screen . height ); console . log ( navigator . languages ); これだけでも、使っているブラウザや言語設定、画面サイズなど、ユーザーの環境に関する基本的な特徴を把握できます。一見すると些細な情報に思えるかもしれませんが、これらを組み合わせていくと、 「その人らしさ」＝ 識別のヒント になっていきます。 そして、こういった情報を自動で収集・分析し、ユニークなIDとしてまとめてくれるライブラリも存在します。中でも有名なのが FingerprintJS です。 このライブラリを使えば、npmでインストールして数行のコードを書くだけで、以下のような処理が簡単に実現できます。 ユーザーのブラウザやOS情報 CanvasやWebGLの描画差異 インストール済みフォントやプラグイン その他、環境に依存するあらゆる“癖” つまり、特別な知識がなくても、誰でも指紋のような識別子を生成できてしまうというわけです。 実際に自分の指紋的情報がどれほどユニークかを試してみたい方は、 FingerprintJSのライブラリ を確認してみるのも面白いかもしれません。 トラッキングツールはどうあなたを見ているか？ ここまで、Cookieやそれに代わる技術によって、ユーザーの行動が「識別」されていることを見てきました。では、実際にそれらはどんな場面で使われているのでしょうか？ この章では、実際のトラッキングツールがどのようにユーザーの行動を収集・分析しているのかを簡単に覗いてみましょう。 Google Analytics(GA)のしくみ Google Analyticsは、Webサイト上のユーザー行動を幅広く記録するためのツールです。 ページの閲覧（ページビュー）はもちろんのこと、クリックやスクロール、ページ遷移の流れなど、サイト上の動きをイベントとして追跡 できます。 従来のUniversal AnalyticsではCookieに依存していましたが、現在主流となっているGA4では、Cookieが使えない状況でも“ユーザーらしさ”を推定する機能が強化されています。 これにより、規制が強化される中でも、ユーザーの行動を継続的に把握する設計がされています。 Client ID と User ID の違い GAなどのツールでは、「誰が何をしたか」を識別するために、複数の識別子を使い分けています。その中でも特に重要なのが、Client ID と User ID です。 Client ID Client IDは、ブラウザごとに割り当てられる匿名の識別子です。通常はCookieを使って保存され、再訪問時にも同じ人物だと識別するために使われます。 ただしこのIDは「ブラウザごと」に発行されるため、同じ人でも端末が変われば別人扱いになります。たとえば、PCとスマホで同じサイトを見ても、それぞれ異なるClient IDが発行されます。 User ID 一方、User IDは、Webサービス側がログインユーザーに対して独自に発行するIDです。これにより、異なる端末でも「同一人物」として扱うことができます。 たとえば、Amazonのようなログイン型サービスでは、スマホからアクセスしてもPCからアクセスしても、すべてが同じユーザー行動としてひとまとめにされるわけです。 つまり、Client IDは端末単位、User IDは人単位という違いがあります。 Meta PixelやMixpanelなどの他ツール Google Analytics以外にも、ユーザーの行動を把握するためのツールは多く存在します。 例えば、 Meta Pixel（旧Facebook Pixel）：広告の効果測定やターゲティングに特化 Mixpanel：イベント単位の詳細な行動分析やファネル設計に強み これらも基本的には JavaScript 経由でユーザーの操作を取得し、サーバーに送信して行動履歴を蓄積するという構造になっています。 さらに最近では、セッションリプレイと呼ばれる新しいアプローチも注目されています。これは、ユーザーのスクロール、クリック、入力などをそのまま録画するように記録し、あとから「再現」できるというものです。 「このユーザーはなぜ途中で離脱したのか」「どこで操作に迷っていたのか」といったことを、まるでその場にいたかのように後から確認できるのが特徴です。 ツールごとの目的や粒度に差はあれど、「あなたが何をしたのか」をできるだけ正確に知ろうとする点では共通しています。 これらのツールでは入力内容のマスキングなどが施されていることが多いですが、ユーザーとしてもそうした仕組みがあるという前提で行動する意識は持っておいて損はないかもしれません。 ページ遷移でも情報は伝わるReferer ユーザーの行動が記録されるのは、トラッキングツールを使っているときだけとは限りません。 実は、ページを移動しただけで「どこから来たのか」が相手に伝わっていることがあります。 これは Referer（リファラ） と呼ばれる仕組みによるものです。Webブラウザは、あるページから別のページへリンクをクリックして移動する際、元のページのURLをHTTPリクエストに含めて送信する仕組みになっています。 たとえば以下のような形です。 Referer: https://example.com/article/ai-tracking この情報を受け取った側では、「どのページにリンクがあり、どこから訪問があったか」を把握できます。リンク元のURLに検索ワードやユーザーIDなどが含まれていた場合、それらが意図せず共有されるリスクもあります。 もちろん、すべてのケースで悪用されるわけではありませんし、マーケティングや分析のために使われていることが多いですが、予期せぬ情報漏れが発生する可能性があることは知っておいたほうがいいでしょう。 法規制とブラウザの進化 ここまで、ユーザーの行動がどのように収集され、識別されているかを見てきました。では、こうした追跡技術に対して、社会やテクノロジー側はどのように対応しているのでしょうか？ この章では、世界各国のプライバシー保護に関する法制度と、主要ブラウザによる技術的な対応を紹介します。 世界のプライバシー規制 近年、個人の行動データをどう扱うかについて、世界的に規制の動きが強まっています。 GDPR（EU） EUの一般データ保護規則（General Data Protection Regulation）は、「個人が識別されうるあらゆるデータ」に対し、本人の明確な同意がなければ収集してはならないと定めています。 Cookieの使用も対象となり、多くの欧州サイトで「Cookieを許可しますか？」と尋ねられるのは