Cookieとは
Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組みです。
サイトを訪れた日時、訪問回数など、様々な内容が ユーザー情報として保存されることによって、サイトを再訪問したときにユーザーを特定し、情報を入力する手間が省けます。
①IDとパスワードを入力して一度ログインしたサイトに、しばらくしてから再度アクセスするとIDとパスワードを入力せずに入ることができる。
②ショッピングサイトに訪問したとき、すでにログイン状態になっていたり、カートに入れた商品がそのまま残っている。
どちらも、ログイン/カート情報がCookieに保存されているおかげ!!
このように、CookieはWebサイトのアクセスを便利にしたり、様々なサービス提供を可能にすることに一役買っています。(インターネットバンキングの多くもCookieが有効になっていないと使用できない)
##Cookieから値を取得する
Cookie取得の基本であり、シンプルな方法です。
ただ、Cookieに複数の値が書き込まれている場合";"で区切られた文字列として取得するので、すご~くわかりにくい…
var str = document.cookie;
// 「 key1=val1; key2=val2; key3=val3; ・・・ 」
##Cookieをkeyで取得する
Cookieから値を取得して連想配列にセットします。
これでCookieがすご~く扱いやすくなります。
// 連想配列に格納
function getCookieArray(){
var arr = new Array();
if(document.cookie != ''){
var tmp = document.cookie.split('; ');
for(var i=0;i<tmp.length;i++){
var data = tmp[i].split('=');
arr[data[0]] = decodeURIComponent(data[1]);
}
}
return arr;
}
// keyを指定して取得
// 「 key1=val1; key2=val2; key3=val3; ・・・ 」というCookie情報が保存されているとする
var arr = getCookieArray();
var value = 'key1の値:' + arr['key1'];
// key1の値:val1
##Cookieの保存と削除
###Cookieの下準備
var kigen = 30; //Cookieの期限(1ヶ月とする)←適宜、適切な期限を設定
var nowdate = new Date(); //現在の日付データを取得
nowdate.setTime(nowdate.getTime() + kigen*24*60*60*1000); //1ヶ月後の日付データを作成
var kigendate = nowdate.toGMTString(); //GMT形式に変換して変数kigendateに格納
var cookievalue = "session_id=user_0001; ";
var expires = "expires=" + kigendate + "; ";
var path = "path=/";
var dt = new Date('1999-12-31T23:59:59Z'); // 過去の日付をGMT形式に変換
クッキーの値(上記ソース内cookievalueに値する)にはセミコロン ( ; )、カンマ ( , ) や空白を含めてはならないので、書き込む値はencodeURIComponent()でエンコードしましょう。
※セキュリティの観点から考慮して、半永久的にユーザー情報を保持しているのは良くないため、期限を設定するのが慣例となっています。
###Cookieにデータを書き込む(保存)
document.cookie = cookievalue + expires + path;
###Cookieのデータを削除する
「Cookie」には有効期限を設定することができ、期限が過ぎると「cookie」のデータが自動的に削除されるので、意図的に削除することが可能となります。
document.cookie = "session_id=; expires=" + dt.toUTCString() + "; "+ path
// 「expires=dt.toUTCString();」の部分は「max-age=0;」でもOK
「expires=dt.toUTCString()」というのは有効期限が「過去の日付」を表していて
「max-age=0」というのは有効期限が「0秒」という意味なので
どちらを使用しても、即座にCookieを削除ができるというわけです。
###Cookieのオプション属性
属性 | 内容 |
---|---|
path | 指定したパスがcookieの有効範囲 |
expires | 指定した日付までが有効期限 |
max-age | 指定した秒数だけ有効期限 |
domain | 指定したドメインがcookieの有効範囲 |
secure | https通信の時だけcookieが有効 |
domainとsecureは個人的には使ったことないな… |
##Cookieの危険性【セッションハイジャック】
Cookieの識別子が漏えいすることによるセッションハイジャック。
CookieにはサイトのセッションIDとともに、ログイン情報が含まれていることがあり、この情報自体がSSLなどで暗号化されていても、セッションIDさえわかってしまえばサーバーに送ることでログイン状態が再現されてしまいます。
Cookieは便利な反面、セキュリティに関するリスクがあることも認識して、セキュリティを高めてプライバシーを守りたい場合は、Cookieを削除するように設定を変更するなどの対応をしましょう。