Cookies練習,使用javascript

written | | comments

目的:

w3schools開宗明義的介紹,cookie是被發明來解決『如何讓伺服器記住使用者的資訊』。因為當伺服器端回傳了一個response給使用者端時,伺服器就會忘記一切關於使用者的資料,而cookie如何實作到這點呢?其實就只是把資料存在使用者端(瀏覽器),例如使用者來到該網站輸入了些基本資料,而我們可以將這些資料存入cookie裡,下次該使用者在拜訪網頁時,我們就可以自動去cookie找尋之前的資料並且顯示出來,延伸應用包含使用者登入、記住使用者喜好資訊、購物車實作等等都是常見的cookie應用。而現今cookie也時常與session搭配做進一步的應用。

簡單介紹:

一般cookie特性如:

  • 一個cookie的大小最多為4KB
  • 一個網站能夠存取20個cookie
  • 瀏覽器最多可記住300個cookie,
  • 內容是key=value的形式,其中value只能是字串,如果想存入array或hash得多花些技巧
  • 可設定expires時間來決定cookie的存活時間
  • 若使用者關閉瀏覽器但cookie仍未失效,則會寫入cookies.txt

以http的角度來看cookie的運作方式

當client發出一個request給server時,該request的header裡會夾帶一些訊息,其中就包含Cookie,而server可借此取得該client端所儲存的cookie並使用;同理,當server端回response給client時,也會在header裡加上Set-Cookie的內容,藉此把想儲存的資料(如:使用者個人行為、使用偏好等資料),存在client端裡,等待當下次該client端又向server端發出request時,便可檢查Cookie的內容來取得資料,來達成所謂讓伺服器記住使用者的資訊的目的。

而一般來說cookie是server所設定且關心的,但實際上我們也可以在client端使用js來操作cookie、做即時性的操作,而不需要與server溝通,大大減少了server的工作,也增加了使用上的彈性與便利。以下就來介紹簡單的js對cookie操作:

範例

範例:js存入cookie
1
2
3
   now=new Date()
  now.setTime( now.getTime( ) + 1000 * 60 * 5 )
  document.cookie = "foo=bar;expires=" + now.toGMTString()

更進一步把它寫成個可以重複使用的function吧

範例: 存取cookie函式
1
2
3
   expires_at = new Date()
  expires_at.setTime(expires_at.getTime() - 1000 * 60 * 5)
  document.cookie = "foo=bar;expires=" + expires_at

刪除cookie則把expires設得比現在的時間還早即可,就會失效了。

範例: js移除cookie
1
2
3
   expires_at = new Date()
  expires_at.setTime(expires_at.getTime() - 1000 * 60 * 5)
  document.cooki   e = "foo=bar;expires=" + expires_at

讀取特定cookie,對js來說似乎沒有什麼特定方式,所以只好自己寫個function來取,連同剛剛提到的都一起寫成function吧

範例: js操作特定cookie
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function set_cookie(name, value, expires_at, path, domain){
  date = new Date()
  path = typeof path !== 'undefined' ? path : '/'
  domain = typeof domain !== 'undefined' ? domain : window.location.host
  if(expires_at === 'undefined'){
    // 預設一小時到期
    date.setTime(date.getTime() + 24 * 60 * 60 * 1000)
    expires_at = date.toGMTString()
  }
  else{
    date.setTime(date.getTime() + expires_at * 24 * 60 * 60 * 1000)
    expires_at = date.toGMTString()
  }
  cookie = name + '=' + escape(value) + ';expires=' + expires_at +  ';path=' + path + ';domain=' + domain
  document.cookie = cookie
}

function delete_cookie(name){
  set_cookie(name, '', -1)
}

function get_cookie(name){
  var result
  var cookie = document.cookie
  var index = cookie.indexOf(name)
  if (index > -1) {
    var start = index + name.length + 1
    var end = cookie.indexOf(';',start)
    if (end == -1){
      result = cookie.substring(start)
    }
    else {
      result = cookie.substring(start, end + 1)
    }
  }
  return result
}

安全性

既然cookie是存在瀏覽器,那是否有被使用者看到、更改,或是其他第三方更改或攔截的可能呢?答案當然是有,而且許多常見的駭客行為也正好會從cookie下手。而且許多網站以session-cookie來實作會員登入機制,而session_id時常存在cookie裡,因此也增加會員帳號被盜取的可能性(如:宏碁雲端售票) 因此,我們盡量保持些良好的習慣與警覺性,可以降低cookie被串改或盜用的可能性

  • 應該避免把敏感性資料存在cookie裡
  • 若真有敏感性資料存在cookie裡需加密
  • 對cookie設定Secure Flag(Https)
  • cookie設定Http Only Flag(js無法取得Cookie)

遵守以上幾點,應能把cookie帶來的風險降到最小


Comments

blog comments powered by Disqus