Cookieをながめてみた

Cookie

Cookieとは、サービス側がウェブサイトの情報（前回見たページや商品の情報など）をクライアント側のブラウザに保存する仕組みです。

Cookieの配置場所

Cookieはサービス側の要請によってクライアント側が保持する情報です。
当然、PCの中にCookie情報は保存されています。

ChromeをWindowsで使っているのなら

C:\Users\UserName\AppData\Local\Google\Chrome\User Data\Default

のなかに全てのCookieが保存されています。

上記パス配下にCookiesというファイルが配置されています。

どんなCookieをもっているのか確認する

Chromeの検索バーに

chrome://settings/siteData

と入力し検索を掛けると、「すべての Cookie とサイトデータ」が表示されます。

ドメインごとにどのようなCookieが保存されているのか確認できますね。

いくつか眺めていると、_gaというCookieがいっぱいあることに気づきます。

_gaはGoogle Analyticsで使われるクライアント識別子です。ウェブトラッキングなどで利用されているようです。

Chrome開発者ツールを使ってCookieの中身をみる

CookieのなかみをChrome開発者ツールを使ってみてみましょう。

Windowsの場合はCtrl Shift I で開発者ツールを開くことができます。Macの場合はcommand option Iで開くことができます。

開いたら、Consoleに

document.cookie

と入力します。
すると、今見ているウェブサイトのドメインのCookieが表示されます。

%パーセントが出てきて何が書いてあるかわからない場合は、URLデコーダーにかけて解読できます。

「URL　エンコード　デコード」などでググるとデコードしてくれるサイトが見つかります。

Cookieに付与される詳細情報をみる

開発者ツールのApplicationのStorageからCookieの詳細情報をみることができます。

• Name: Cookieの名前。
• Value: Nameにひもづく値。
• Domain: クッキーを送信する対象ドメイン。発行時に特に指定がなければ発行したサーバーのドメイン名が補完されます。
• Path: Cookieを送信する対象パス。「このページを見ているときにこのCookieをおくってくれ」という細かい指示ができます。
• Expires, Max-Age: Cookieの有効期限。有効期限が切れるとCookieが消滅します。この欄に「1969-12-31T23:59:59.000Z」と書かれているCookieがあります。これはExpires, Max-Age属性を指定しなかった場合に自動で保管される値です。この値が現時点よりも過去日に設定されているCookieはブラウザの終了とともに消滅します。
• HTTP: チェックが入っている場合、HTTP通信でのみ触ることができるることを示しています。実際、先ほどdocument.cookieと入力したとき、HTTP欄にチェックがはいっていないCookieは表示されていません。このページで開発者ツールを開いている人は、.qiita.comドメインにsecure_tokenというCookieが存在していることを確認できると思います。ここでもう一度document.cookieとConsoleに入力してみると、secure_cookieは表示されていないはずです。
• Secure: チェックが入っている場合、HTTPS通信の場合でのみサーバーへの送信ができることを示しています。HTTP通信の場合Secureにチェックが入っているCookieは送信されません。