Cookie とは？ウェブサイトがあなたを覚える仕組み
Cookie は、ウェブサイトがブラウザに保存を頼み、その後そのサイトを訪れるたびに送り返す小さなテキストです。これによりサイトは、あなたがログインしていること、カートに何が入っているか、どの言語を選んだかなどを「覚えて」いられます。Cookie は単なるデータでありプログラムではありませんが、あなたを特定できるため、セキュリティとプライバシーの両方に関わります。
AI で作るときに大切な理由
Cookie は、AI ビルダーに頼むことが多い機能の下で動いています。「Cookie」という言葉が出てこないことも多いです。
- ログイン。 多くの Web アプリでは、「ログインしたままにする」はセッション Cookie を意味します。その Cookie の設定によって、盗まれやすさが決まります。
- カートと設定。 ページを更新しても残るカートは、Cookie またはブラウザのストレージに頼っていることが多いです。
- 分析と広告。 Google Analytics、Meta のピクセル、チャットウィジェットを追加すると、通常は他社の Cookie が追加されます。
- 法的な通知。 多くの地域では、一部の Cookie に訪問者の事前の同意が必要で、そこから Cookie バナーが生まれています。
アプリがどの Cookie を設定し、なぜ設定しているかが分かれば、セキュリティの設定、同意、プライバシーポリシーについて、より良い判断ができます。
身近なたとえ
クロークの預かり札を想像してください。コートを預けると、番号の付いた札をもらいます。札にはコートは入っておらず、番号があるだけです。カウンターに戻るたびに札を見せると、係の人はどのコートがあなたのものかが分かります。
セッション Cookie も同じように働きます。ログインすると、サーバーは自分の側であなたの情報を保持し、ブラウザには長いランダムな ID という札を渡します。ブラウザはリクエストのたびにその札を見せ、サーバーはそれを照合して、あなたが誰かを確認します。札をコピーした人は、コートを受け取れてしまうため、ログインの Cookie は守る必要があります。
Cookie は実際にどう動くか
- あなたがサイトを訪れます。サーバーの応答には、
Set-Cookie: session_id=8f3k...; HttpOnly; Secure; SameSite=Laxのようなヘッダーが含まれます。 - ブラウザは、そのサイトのドメインに紐づけて保存します。
- 同じサイトへのその後のすべてのリクエストで、ブラウザは自動的に
Cookie: session_id=8f3k...を追加します。 - サーバーはそれを読み取り、あなたであることを認識します。
ページの JavaScript でも Cookie を作成できます。しかし、最も重要な Cookie、つまりログインのセッションは、サーバー側で設定し、JavaScript からは見えないようにすべきです。
Cookie の種類
| 種類 | 意味 | 例 |
|---|---|---|
| セッション Cookie | 有効期限がなく、ブラウザのセッションが終わると削除される | 短時間で終わる決済のステップ |
| 永続 Cookie | 有効期限（Expires または Max-Age）があり、再起動後も残る | 「30日間ログイン状態を保持」 |
| ファーストパーティ | アドレスバーにあるサイトが設定する | そのサイトでのあなたのログイン |
| サードパーティ | ページに埋め込まれた別のドメインが設定する | 広告ネットワークのトラッキング ID |
| 厳密に必要 | 利用者が求めたサービスに必要 | ログインセッション、ショッピングカート |
| 必須でない | サイト運営者にとって便利なもの | 分析、広告、A/B テスト |
ブラウザは、サードパーティ Cookie が複数のウェブサイトをまたいで人を追跡するために使われるため、その利用を次第に制限してきました。今では主要なブラウザの多くが、既定で多くのサードパーティ Cookie をブロックしています。詳細は変わり続けるため、重要なものをサードパーティ Cookie の上に作らないでください。
具体例：小さなオンラインショップ
手作りのキャンドルを売るショップを作ったとします。妥当なバージョンなら、次の Cookie を設定し、その理由は以下のとおりです。
session：オーナーまたは顧客がログインしたときに設定されます。ランダムな ID だけを保持し、実際のセッションのデータはサーバーが保持します。設定は HttpOnly（ページのスクリプトから読めない）、Secure（HTTPS 上でのみ送られる）、SameSite=Lax（他のサイトが始めたほとんどのリクエストでは送られない）です。厳密に必要な Cookie です。
cart_id：ログインしていない訪問者が、カートを保持できるようにします。カートは、データベース に保存されたものを指します。訪問者が自分からカートに商品を追加したため、厳密に必要な Cookie です。
theme：ダークモードを覚えます。Cookie にもできますが、サーバーに届く必要がないため、ブラウザの localStorage の方が簡単です。
分析の Cookie：分析ツールを入れた場合に追加されます。これらは必須ではありません。EU と英国では、通常は設定前に同意が必要なので、分析のスクリプトは訪問者が「同意する」をクリックするまで待つべきです。
このショップが Cookie に保存 しない ものにも注目してください。顧客の名前、住所、カードの情報です。Cookie はリクエストのたびに送られ、利用者の端末に残るため、保存するのは ID であって、個人データではありません。
よく使われる用語の説明
| 用語 | 意味 |
|---|---|
| Cookie | ブラウザが保存し、サイトに送り返す、小さな名前と値のペア。 |
Set-Cookie | サーバーが Cookie を作成・更新するために使うレスポンスヘッダー。 |
| セッション | ログインしたユーザーについてサーバーが持つ記録で、Cookie の ID に紐づく。 |
HttpOnly | ページの JavaScript が Cookie を読めないようにする。注入されたスクリプトによる被害を抑える。 |
Secure | Cookie は暗号化された HTTPS 接続でのみ送られる。 |
SameSite | 他のサイトからのリクエストで Cookie を送るかどうかを制御する（Strict、Lax、None）。 |
Expires / Max-Age | Cookie をいつ削除すべきか。 |
| Domain / Path | サイトのどのアドレスが Cookie を受け取るか。 |
| localStorage | ページのコードが読めるブラウザのストレージ。ただし、サーバーへは自動では送られない。 |
| XSS | クロスサイトスクリプティング。攻撃者のスクリプトがあなたのページで動き、データを盗もうとする。 |
| CSRF | クロスサイトリクエストフォージェリ。別のサイトがブラウザを騙して、あなたの Cookie 付きのリクエストを送らせる。 |
| Cookie の同意 | 必須でない Cookie を設定する前に、訪問者の許可を求めること。 |
よくある間違いと誤解
- 「Cookie はウイルスだ。」 普通のテキストです。コンピュータでコードを実行することはできません。
- 機密情報を Cookie に入れる。 ランダムな ID を保存し、詳細はサーバーに置いてください。
- ログインのトークンを localStorage に入れる。 ページで動くどのスクリプトも、注入されたものを含めて localStorage を読めます。
HttpOnlyの Cookie は、ページのスクリプトから一切読めません。 SecureとHttpOnlyを付け忘れる。 この2つのフラグは手間がかからず、よくある穴をふさぎます。- バナーがすべてを解決すると思い込む。 誰かが「同意する」をクリックする前に分析を読み込むバナーは、役目を果たしていません。
- ログアウトを忘れる。 ログアウトは、Cookie を削除し、サーバーでもセッションを終了させるべきです。そうすれば、コピーされた Cookie は使えなくなります。
- 「Cookie を使わなければ、プライバシーのルールは適用されない。」 GDPR などのルールは、ローカルストレージ、デバイスのフィンガープリント、サーバーのログを含め、個人データがどこに保存されていても適用されます。
AI ビルダーに頼むべきこと
- 「アプリが設定するすべての Cookie を、用途、有効期間、厳密に必要かどうかとともに一覧にしてください。」
- 「ログインセッションには、
HttpOnly、Secure、SameSite=Laxの Cookie を使ってください。認証トークンを localStorage に入れないでください。」 - 「Cookie にはランダムなセッション ID だけを保持し、セッションのデータはサーバーに保存してください。」
- 「ログアウト時には、Cookie を消去し、サーバー上でセッションを無効にしてください。」
- 「訪問者が受け入れるまで、分析やマーケティングのスクリプトを読み込まず、訪問者の選択を覚えてください。」
- 「上の一覧に合わせて、プライバシーポリシーに簡単な Cookie のセクションを追加してください。」
同意の部分については、Cookie 同意の追加方法 をご覧ください。Cookie がログインとどう関わるかは、認証とは何か をお読みください。
Mythex での Cookie
Mythex は、アプリのユーザー向けの組み込みログインを提供していないため、アプリが設定する Cookie は、アプリ自身のコードと、そこに追加したツールから来ます。例えば、選んだ認証の方式によるセッション Cookie です。チャットでエージェントに一覧にしてもらう、設定を強化してもらう、同意バナーを追加してもらうことができ、公開前にライブプレビューで結果を確認できます。ドキュメントの アプリにログインを追加するレシピ は、良い出発点になるプロンプトです。また、作ったアプリのセキュリティ では、鍵や秘密情報をブラウザの外に保つ方法を扱っています。
よくある質問
ウェブサイトの Cookie とは何ですか？
Cookie は、サイトがブラウザに保存を頼む小さなテキストです。ブラウザは、その後そのサイトにリクエストするたびに Cookie を送り返します。これにより、サイトはログインしているかどうか、カートに何が入っているかなどを覚えられます。
Cookie は危険ですか？
Cookie は単なるデータで、プログラムではないため、コードを実行したりコンピュータに感染したりはできません。問題になるのは、サードパーティの Cookie が複数のサイトにまたがってあなたを追跡するプライバシーの面と、ログインの Cookie が盗まれて、あなたになりすまされるセキュリティの面です。
ファーストパーティ Cookie とサードパーティ Cookie の違いは何ですか？
ファーストパーティ Cookie は、アドレスバーにあるサイトが設定するもので、ログインの Cookie などがあります。サードパーティ Cookie は、ページに埋め込まれた別のドメイン（広告ネットワークなど）が設定するもので、多くのサイトをまたいであなたを追うために使われることがよくあります。
Cookie バナーは必要ですか？
利用者がどこにいるか、どの Cookie を使うかによります。EU と英国では、分析や広告などの必須でない Cookie には、一般に事前の同意が必要です。一方、ログインセッションのようにサービスに厳密に必要な Cookie は、通常は同意が不要です。自分に適用されるルールを確認してください。
Cookie と localStorage の違いは何ですか？
どちらもブラウザにデータを保存します。Cookie は、リクエストのたびに自動的にサーバーに送られるため、ログインに向いています。localStorage はブラウザ内にとどまり、そのページ自身のコードだけが読むため、テーマのような設定に向いています。