PR

【IT用語解説】Cookieとは?ログイン状態が残る仕組みを初心者向けに解説

Cookieの記事アイキャッチ。設定画面のイラストとCookieの文字。 IT-Skills

Cookieとは、Webサイトがブラウザに保存する小さな情報です。

たとえば、ログイン状態、表示言語、カートに入れた商品の情報などを覚えるために使われます。Webサイトを閉じても次に開いたときに状態が残ることがあるのは、Cookieが関係している場合があります。

Cookieは「食べ物のクッキー」ではなく、ブラウザとWebサイトの間で使われる小さなメモのような情報です。

この記事では、Cookieの意味、保存される情報、サーバーとのやり取り、キャッシュやWeb Storageとの違い、安全に使うポイントを初心者向けに整理します。

スポンサーリンク

Cookieはサイト別に残る小さな情報

Cookieは、Webサイトがブラウザに保存し、必要に応じて同じサイトへ送り返される情報です。MDNでも、Cookieはサーバーがユーザーのブラウザへ送る小さなデータで、ブラウザが保存し、後続のリクエストで同じサーバーへ返すものとして説明されています。

最初は「Webサイトが、ブラウザ側に残しておく小さなメモ」と考えると理解しやすいです。ただし、何でも保存してよい場所ではなく、保存内容や送信条件には注意が必要です。

ブラウザ、Cookie、Webサイトの関係を見てください。Cookieはブラウザに保存されますが、Webサイトとのやり取りの中で使われます。

ブラウザ、Cookie、Webサイトの関係を示す図
Cookieは、ブラウザに保存されるサイト別の小さな情報です。

Cookieが使われる代表例

Cookieは、Webサイトが「この利用者は前にも来た」「この設定を選んでいた」と判断するために使われます。代表的な用途は、ログイン状態の維持、表示設定、ショッピングカート、アクセス解析などです。

重要なのは、Cookieにパスワードをそのまま保存するのが一般的な使い方ではない、という点です。多くの場合は、利用者やセッションを識別するID、設定値、状態を示す小さな値を保存します。便利な用途がある一方で、閲覧状況の計測や追跡に使われることもあります。

Cookieの代表的な利用場面を整理する図
Cookieはログイン状態、表示設定、カート、計測などで使われます。

Cookieが保存されて送られる流れ

Cookieは、ブラウザだけで勝手に作られるものではありません。典型的には、サーバーがHTTPレスポンスでSet-Cookieを返し、ブラウザがそれを保存します。その後、同じサイトへアクセスするときに、ブラウザがCookieヘッダーとして送り返します。

サーバーがSet-Cookieを返し、ブラウザがCookieを保存して次回送信する図
サーバーがSet-Cookieで保存を指示し、ブラウザは次回以降Cookieを送ることがあります。

HTTPヘッダーで見ると、イメージは次のようになります。実際には属性が増えることもありますが、まずはSet-CookieCookieの2つを分けて見れば十分です。

HTTP/1.1 200 OK
Set-Cookie: session_id=abc123; Secure; HttpOnly; SameSite=Lax

GET /mypage HTTP/1.1
Cookie: session_id=abc123

HTTPの基本はHTTPとは?HTTPSとは?、Webページを開く入口はURLとは?で詳しく整理しています。

セッションCookieと永続Cookie

Cookieには、大きく分けてセッションCookieと永続Cookieがあります。セッションCookieは、ブラウザを閉じるまでの一時的な情報として使われます。永続Cookieは、有効期限が設定され、ブラウザを閉じた後も残ることがあります。

種類残り方よくある用途
セッションCookieブラウザを閉じるまで残ることが多いログイン中の一時的な状態
永続Cookie有効期限まで残る表示設定、同意状態、再訪問の判定

ただし、実際の挙動はブラウザ設定やサイト側の作りによって変わります。初心者の段階では、「Cookieには一時的なものと、期限付きで残るものがある」と押さえれば十分です。

Cookieとキャッシュ、Web Storageの違い

Cookieと混同しやすい言葉に、キャッシュ、localStorage、sessionStorageがあります。どれもブラウザに情報が残ることがありますが、目的と送信のされ方が違います。

次の比較図では、Cookie、キャッシュ、localStorage、sessionStorageの違いを整理してください。特にCookieは、条件を満たすとHTTPリクエストに付いてサーバーへ送られる点が大きな特徴です。

Cookie、キャッシュ、localStorage、sessionStorageの違いを比較する図
Cookieはサーバーへ送られることがあり、キャッシュやWeb Storageとは目的が違います。
用語主な目的サーバーへ自動で送られるか
Cookieログイン状態や設定を扱う条件を満たすと送られる
キャッシュ画像やCSSなどを再利用して表示を速くするCookieとは目的が違う
localStorageブラウザ内にデータを保存する自動では送られない
sessionStorageタブ単位の一時保存自動では送られない

Cookieを削除するとどうなるか

Cookieを削除すると、ログイン状態が切れたり、表示設定が初期状態に戻ったり、ショッピングカートの内容が消えたりすることがあります。これは、サイトがCookieを使って状態を覚えていたためです。

一方で、不要なCookieを削除したり、サードパーティCookieを制限したりすることは、プライバシー保護の観点で役立つ場合があります。ブラウザの設定画面では、サイトごとにCookieを確認・削除できることが多いです。

サードパーティCookieとは

Cookieには、今開いているサイトが発行するファーストパーティCookieと、別のドメインが関係するサードパーティCookieがあります。サードパーティCookieは、広告配信や計測などで使われることがあり、プライバシー上の理由から制限される方向にあります。

初心者は、まず「Cookieは便利な状態保存にも使われるが、閲覧状況をまたいで把握する用途にも使われることがある」と理解しておくとよいです。細かいブラウザ別の制限は変わるため、実務では各ブラウザや公式情報を確認します。

安全に使うための確認ポイント

Cookieは便利ですが、ログイン状態や識別情報に関係するため、扱いを間違えるとセキュリティやプライバシーの問題につながります。利用者側と開発者側で見るポイントを分けると整理しやすくなります。

次の図では、Cookieを安全に使うための確認ポイントを見てください。利用者は設定や削除、開発者は属性と保存内容を確認します。

Cookieを安全に扱うための利用者と開発者の確認ポイント
Cookieを安全に扱うには、削除・ブロックの影響と、Secure、HttpOnly、SameSiteなどの属性を確認します。
  • 利用者は、Cookie削除でログアウトや設定リセットが起きることを理解する
  • 共有PCではログイン状態を残したままにしない
  • 開発者は、重要なCookieにSecureHttpOnlySameSiteなどの属性を検討する
  • Cookieにパスワードや秘密情報をそのまま保存しない
  • サードパーティCookieや同意管理は、プライバシーの観点も含めて確認する

開発者が最初に見るCookie属性

Web開発でCookieを扱う場合は、値だけでなく属性も重要です。属性は、Cookieをどの範囲で、いつまで、どの通信で送るかを決めます。

属性ざっくりした役割初心者向けの見方
Expires / Max-Age有効期限を決めるいつまで残すか
Domain送信先ドメインの範囲を決めるどのサイトへ送るか
Path送信するパスの範囲を決めるどのURL配下で使うか
SecureHTTPS通信でだけ送る盗み見対策の基本
HttpOnlyJavaScriptから読み取れないようにするXSS被害を減らす一助
SameSite別サイト経由の送信を制御するCSRF対策と関係する

OWASPのセッション管理に関する資料でも、セッションIDの保護やCookie属性の設定は重要な対策として扱われています。実務でログインに関係するCookieを扱う場合は、フレームワーク任せにせず、属性と保存内容を確認しましょう。

既存記事とあわせて読む順番

Cookieはブラウザ、URL、HTTP、サーバーとの関係で理解するとつながります。まずブラウザでWebページを開く流れを押さえ、そのうえでHTTPヘッダーとしてCookieを見ると理解しやすいです。

公式情報と関連リンク

Cookieの基本はMDNのHTTP cookies、Set-Cookieヘッダー、Web Storageとの違いはMDNのWeb Storage APIが参考になります。セッション管理の安全性はOWASPの資料も確認対象になります。

まとめ

Cookieは、Webサイトがブラウザに保存する小さな情報です。

  • Cookieはブラウザに保存され、同じサイトへ送り返されることがある
  • ログイン状態、表示設定、カート、計測などで使われる
  • Set-Cookieは保存の指示、Cookieは送信される情報
  • キャッシュやWeb Storageとは目的と送信のされ方が違う
  • 安全に扱うには保存内容、Secure、HttpOnly、SameSiteなどを確認する

Cookieを理解すると、ブラウザ、HTTP、ログイン、セッション管理の関係が見えやすくなります。まずは「ブラウザに残るサイト別の小さなメモ」として押さえ、次に送信の流れと安全設定を確認していきましょう。

タイトルとURLをコピーしました