アレっぽいやつ

web系エンジニアがカチャカチャ書く

非エンジニアが、cookieをフワッと理解するために

f:id:pechokan:20160925162407p:plain

ウェブマーケティングを専門としている企業でも、
教育の問題なのか、社員の定着率の問題なのか定かではないが、

「これはcookie単位なのでブラウザごとに〜」とかの会話が成り立たない時がある。

 

というわけで、フワッと理解しよう。

 

自分についてるcookieを確認する方法(chrome)

f:id:pechokan:20160925143930p:plain

  •   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を自分でつけてみる

cookiejavascript で追加、編集、削除ができるので、
chromeのdeveloperツールで追加してみる。 

chromeのdeveloper toolの console で
document.cookie = 'testName=testValue;max-age=99999999';

と入力すると

f:id:pechokan:20160925153158p:plain

f:id:pechokan:20160925153300p:plain

(反映されないときは、developer toolをもう一回開き直したり)

 

ちなみに

document.cookieとconsoleでうつと、
持ってるcookieを全部文字列として出せる。
これを分解して使ったりする。
(HTTPOnly がついている場合は、javascriptでアクセスできない)

cookieとsession

cookieはクライアントサイド、sessionはサーバーサイドに情報を残している」という表現を時々するが、例にあげると、

  1. ウェブサイトにアクセスするとき、cookieの情報をいっしょに送る
  2. サーバーはcookieの情報を見て、
    ユーザー情報などをデータベースから持ってくる
  3. ユーザーにユーザー情報などを持って、レスポンスを返す

cookieはクライアントサイドで情報を持っているため、
ユーザーが情報を書き換えることができることは ↑ で書いたが、
cookieに直接ユーザー情報を持たせているとどういうことになるか、
おおよそ想像がつくと思う。

もちろん、どうでもいい情報はcookieに直接書くこともある。