非エンジニアが、cookieをフワッと理解するために
ウェブマーケティングを専門としている企業でも、
教育の問題なのか、社員の定着率の問題なのか定かではないが、
「これはcookie単位なのでブラウザごとに〜」とかの会話が成り立たない時がある。
というわけで、フワッと理解しよう。
自分についてるcookieを確認する方法(chrome)
- chromeでdeveloperツールを開く
(windowsはF12, macの場合は command+option+i) - Applicationタブ、Storage, Cookiesの順で対象のURLに対する、
そのブラウザが持っているcookieを確認できる
cookieが持っている情報
上の画像のカラム名からわかるように
- name
- path
- value
- max-age, expire
- secure
- HTTPOnly
といった情報を持っており、ウェブサイトへアクセスするときに、
cookieもいっしょにリクエストを送信する。
その後、サーバー側でvalueを見て、ログイン状態を判断したりして、
ユーザー(クライアント)側にレスポンスを返す。
cookieを自分でつけてみる
cookieはjavascript で追加、編集、削除ができるので、
chromeのdeveloperツールで追加してみる。
chromeのdeveloper toolの console でdocument.cookie = 'testName=testValue;max-age=99999999';
と入力すると
(反映されないときは、developer toolをもう一回開き直したり)
ちなみに
document.cookie
とconsoleでうつと、
持ってるcookieを全部文字列として出せる。
これを分解して使ったりする。
(HTTPOnly がついている場合は、javascriptでアクセスできない)
cookieとsession
「cookieはクライアントサイド、sessionはサーバーサイドに情報を残している」という表現を時々するが、例にあげると、
- ウェブサイトにアクセスするとき、cookieの情報をいっしょに送る
- サーバーはcookieの情報を見て、
ユーザー情報などをデータベースから持ってくる - ユーザーにユーザー情報などを持って、レスポンスを返す
cookieはクライアントサイドで情報を持っているため、
ユーザーが情報を書き換えることができることは ↑ で書いたが、
cookieに直接ユーザー情報を持たせているとどういうことになるか、
おおよそ想像がつくと思う。
もちろん、どうでもいい情報はcookieに直接書くこともある。