面試必問的Cookies，你知道多少 【1】

​

前言

在前端面試中，cookies是經常被提及的内容，基本每家公司都會有涉及。如果你經常通路國外的一些網站的話，會遇到彈出擷取cookies的對話框。由此可見cookies在 實際應用中是無比重要的！！！

Cookies

Cookies是伺服器發送給使用者浏覽器的一塊儲存在本地的資料。當使用者下一次通路伺服器的時候，會被發送到伺服器。用戶端Cookies的存儲大小為4k。

作用

1. 用來進行會話狀态管理，例如記錄使用者的登入狀态
2. 用來記錄跟蹤使用者的行為

常用屬性

Expires/Max-Age

主要是用來設定Cookies的有效期。

Expires用于執行具體的過期事件。

例如在Node做為服務端，我們可以使用：

res.setHeader('Set-Cookie', [
  `name=keliq; expires=${new Date(Date.now() + 36000 ).toGMTString()}`,
])      

Max-Age 以秒為機關設定多少秒之後過期：

res.setHeader('Set-Cookie', ['name=picker; max-age=10;'])
      

如果同時設定Expires和Max-Age，則Max-Age生效。

Secure

當Secure 設定為true時，隻要伺服器使用SSL和HTTPS 時，用戶端才能收到Cookies

res.setHeader('Set-Cookie', ['Secure-true;'])      

HttpOnly

當HttpOnly設定為true時，客服端無法使用JavaScript來擷取Cookies。

res.setHeader('Set-Cookie', ['httpOnly=true;',])      

JavaScript設定cookie

設定/修改

document.cookie=“name=123”;      

注意：

document.cookie="name=syl; age=18"      

這樣的話隻有name生效，即每次隻能設定一個。是以需要封裝或者多次調用。

封裝

設定

//設定cookies
function setCookie(name,value,MyDay){
    var ExDate = new Date();
    ExDate.setDate(ExDate.getDate() + MyDay);//如果需要時間的話以這樣擷取。
    document.cookie = name + "=" + value + ";expires=" + ExDate;
}
      

擷取

//擷取cookies
function getCookie(name){
    //例如cookie是"username=abc; password=123"
    var arr = document.cookie.split('; ');//用“;”和空格來劃分cookie
    for(var i = 0 ;i < arr.length ; i++){
        var arr2 = arr[i].split("=");
        if(arr2[0] == name){
            return arr2[1];
        }
    }
    return "";//整個周遊完沒找到，就傳回空值
}
      

删除

//删除cookies
function removeCookie(name){
    setCookie(name, "1", -1)//第二個value值随便設個值，第三個值設為-1表示：已經過期。
}      

缺點

以下缺點，來自百科

1. Cookie在某種程度上說已經嚴重危及使用者的 隐私 和 安全 。其中的一種方法是：一些公司的高層人員為了某種目的（譬如市場調研）而通路了從未去過的網站（通過搜尋引擎查到的），而這些網站包含了一種叫做 網頁臭蟲 的圖檔，該圖檔透明，且隻有一個像素大小（以便隐藏），它們的作用是将所有通路過此頁面的計算機寫入Cookie。而後， 電子商務 網站将讀取這些Cookie資訊，并尋找寫入這些Cookie的網站，随即發送包含了針對這個網站的相關産品廣告的 垃圾郵件 給這些進階人員。
2. 雖然Cookie沒有中電腦病毒那麼危險，但它仍包含了一些敏感消息：使用者名、電腦名、使用的浏覽器和曾經通路的網站。使用者不希望這些内容洩漏出去，尤其是當其中還包含有私人資訊的時候。這并非危言聳聽， 跨站點腳本 （Cross site scripting）可以達到此目的。在受到跨站點腳本攻擊時，Cookie盜賊和Cookie投毒将竊取内容。一旦Cookie落入攻擊者手中，它将會重制其價值。

• • Cookie盜賊：搜集使用者Cookie并發給攻擊者的黑客，攻擊者将利用Cookie消息通過合法手段進入使用者帳戶。
  • Cookie投毒：一般認為，Cookie在儲存和傳回伺服器期間沒有被修改過，而攻擊者會在Cookie送回伺服器之前對其進行修改，達到自己的目的。例如，在一個購物網站的Cookie中包含了顧客應付的款項，攻擊者将該值改小，達到少付款的目的。