未経験からのフルスタックエンジニア

スキルをつけよう!未経験からフリーランスエンジニアへの成長記録

【Web入門】Cookieって何?~セッションとの違いも~

こんにちは、ATORAです!(@ATORA1992)

今回は、Cookie(クッキー)についてまとめたいと思います。

Cookieという言葉は、パソコンを触っていれば一度は耳にしたことがあるかと思います。「Cookieを有効化・無効化しますか?」など聞かれたこともあった気がします。それでは、Cookieとはそもそもなんなのでしょうか?詳細までわからなくとも、何をするものなのかという知識を身につけ、一緒にエンジニアへの一歩を踏み出しましょう!

目次

  • Cookieとは何?
  • Cookieと似た仕組みでSession(セッション)があるけど違いは何?

という2点についてお話したいと思います。

Cookieとは何?

その前に、HTTPとは何か?

HTTP(Hyper Text Transfer Protocol)という通信プロトコルです。

通信プロトコルとは、情報の伝達とその意味づけをどうするかという取り決めのことです。この取り決めがあることで、インターネットで色々なホームページを表示することができています。

HTTP通信でなんでホームページなどが見れるの?

ざっくり、ホームページなどのアプリケーション(Webアプリケーション)は、Webブラウザ(クライアント:ユーザー側)Webサーバー間でHTTP通信を行うことで成り立っています。

HTTP通信でのやりとり概略図

まずは、クライアントからサーバー側にリクエストを送ります(HTTPリクエス)。すると、そのリクエストに基づいてサーバーからクライアントにレスポンスが返ってきます(HTTPレスポンス)。このやりとりにはHTTP通信が使われています。

例えば、リクエストで「どこどこのページが見たい」と送ったとします。すると、そのページを表示するのに必要なファイル(HTMLなど)がサーバー側からレスポンスとして返ってきます。それによって、ホームページを見ることができるようになるわけですね。

このように、一回のリクエストを送れば用が済んでしまうのがHTTPでの利点です。ただし、前回のリクエスト結果をサーバーは覚えていません。このようなプロトコルステートレス・プロトコル(Stateless Protocol)と呼びます。逆に、状態を持つプロトコル(例えばFTP)もあり、それはステートフル・プロトコル(Stateful Protocol)と呼ばれます。

例えば、行きつけのお店があったとします。「マスター、いつもの!」というだけでOKなのがステートフル・プロトコル(履歴が登録されている)で、毎回説明しなければならないのがステートレス・プロトコル(履歴がない)です。

このステートレスなHTTP上で状態を表現する方法がCookieです。

Cookieによる状態の保持

Cookie概略図

まずは、クライアントからサーバーへリクエストを送ります。その後、サーバー側からレスポンスが返ってくるわけですが、HTTPレスポンスにCookieという情報(名前=値という組み合わせで表されている)を乗せて返します。

Cookieを受け取ったクライアントは、次回同じサーバーにアクセスする際に、受け取ったCookieをそのままHTTPリクエストに乗せて送ります。このCookieをサーバーが調べることで、クライアントを識別できる(状態を表現できる)わけです。

「このままだと、違うサーバーにもCookieが送られてしまうんじゃない?」と思うかもしれませんが大丈夫です。Cookieを受け取ったサーバーとは異なるサーバーに対してはCookieを送りません。

Cookieはどこに保存されるの?

Cookieの概要はわかりましたが、Cookieはそもそもどこに保持・保存されるのでしょうか?

結論は、クライアントのPC上です。Google Chromeだったら、環境設定>詳細設定>プライバシーとセキュリティ>サイトの設定>Cookieで見ることができます。

ここで考えてみてください。簡単にCookieの内容は見れるし、HTTPリクエストの中身もChromeなら検証ツールなどを使えば簡単に見れます。簡単に見れる所に、ユーザーのクレジットカード情報やパスワード情報があったらどうでしょうか?危険ですよね?

そこで、より安全に多くの情報を保持するための仕組みがSession(セッション)です。

Sessionとは何?

Sessionは一連の処理

SessionはWebアプリケーションにおける一連の処理を指します。例えば、ログインして→商品をカートに入れ→注文内容を確認して→購入し→ログアウトするなどの処理の流れです。

この一連の処理を実現するには複数回HTTPリクエストが必要ですね?この複数回のリクエストの最中には、ログインしているユーザーの情報を保持したり、カート内の商品情報を保持しなければなりません。つまり、これらの処理を実行中に状態を保持する必要があります。その保持の仕方は例えば、セッション管理の表(どこまで処理が行われているのか)があるのを想像してもらえれば大丈夫です。

では、この表をどのように管理しましょう?Cookieで渡してしまっては情報漏洩などの危険があります。そこで、この表はクライアントには渡さずサーバー側で管理します。

では、どうやってクライアントを識別するのか?実は、ここでCookieを使います。

「それでは、何も変わらないんじゃない?」と思われるかもしれませんが、Cookieに入れる情報はセッションIDです。

セッションID

セッションIDはクライアントを識別する識別子です。例えるなら、銀行などでの受付番号みたいなものです。つまり、クライアントとセッションIDが紐づいています。さらに、このセッションIDとセッション管理表が紐づくことで、セッションIDさえあればサーバー側はクライアントを識別し、そのクライアントの状態を参照することができます。(もちろん、クライアントそれぞれに違うセッションIDが振られます)

Sessionの概略図

クライアントからリクエストが送られ、そのクライアントと紐づいたセッションID・セッション状態の情報をサーバーが作成します。レスポンスではCookieにセッションIDのみを乗せて返します。次回以降、クライアントがサーバーにリクエストする際には、このCookieをリクエストに乗せて送ります。サーバーはCookieで送られてきたセッションIDを元にクライアントを識別し、そのクライアントのセッション状態の情報を参照します。

このように、セッションを用いることで安全に多くの情報を保持することができるわけですね!

まとめ

  • HTTP通信はステートレスなプロトコル
  • ステートレス・プロトコルで状態を表現する方法がCookie
  • ただし、Cookieは情報漏洩の危険がある
  • 安全に多くの情報を保持する仕組みがセッション
  • セッションIDをCookieでやりとりすることで安全性が高まる

特に違いとして大きいのは、Cookieでは情報がクライアントのPC上に保存されるが、Sessionの情報(セッション管理表)はサーバー上に保存されるということです。

ここさえつかめればいいかなと思います。

一歩でも前に進む手助けになれば嬉しいです。
また、お会いしましょう。
ATORAでした!!