關於cookie語法

Published in

Web Design Zone

7 min readJul 1, 2020

為什麼我們需要Cookie?

網頁Web Page 的工作方式是，當每一個HTTP請求都含有所有必要資訊，讓伺服器可以滿足請求。由於HTTP是一種無狀態的協定，（請想像一下網頁WWW剛剛出現在世界上的時候的年代）在預設的性質下，當使用者由一個頁面跳躍到另外一個頁面的時候，不論是網頁、或者是網頁瀏覽器本身，都不知道使用者到了哪個地方。在同一個網站裡面，也無法讓你從一個網頁到下一個網頁時，還知道你是誰，更不用說記住你的特徵或喜好。

你或許會問『這有什麼關係？我也不想讓網站知道我曾經來過這裡』。然而，如果當時網頁技術的發展就停在這裡的話，我們就現在無法「登入」任何的網站了。

如果我們要進階到現在網站的一些功能，例如「登入」的話，我們就需要讓網站儲存某些使用者的「狀態」。這時 Cookie就要登場了。

什麼是Cookie

就目前的網站來說，Cookie可以說是非常基本的功能。就概念上來說是：伺服器Server會傳送一些資訊到瀏覽器端，瀏覽器Browser會依照設定，在一定的時間內把這些資訊存起來。通常伺服器傳送的這個資訊，可能是一個獨特的號碼。這些資訊主要是用來提供網站辨識識別用。

綜合來說，Cookie能夠：

儲存資料在瀏覽器上的小型資料庫
在瀏覽器與後端程式進行讀取寫入
設定失效時間，讓cookie在指定時間內消失

Cookie的結構主要是由 key與 value的方式組成，並由分號跟空格來隔開。Cookie可以說是很方便的工具，就像它的名稱一樣的可口易食。可惜的是，漸漸有人把Cookie拿來做壞事，導致它已經被污名化了。目前大家常常可以看到的GDPR（歐盟於2018年5月實施的個人隱私保護法案），就涉及到第三方Cookie的使用。

Cookie為使用者所造訪網站儲存用戶資訊以改善互動的元件，…若使用者所造訪的網站上出現了第三方元件，諸如廣告或是臉書的「按讚」（Like）功能，這些元件也能在使用者電腦上建立Cookie，以追蹤使用者所造訪的網站，即是所謂的第三方Cookie，…。 — by 在GDPR上線之後，歐洲新聞網站的第三方Cookie數量減少了22%

Cookie欄位介紹

Name：鍵key
Value：值value
Domain：可以取得cookie的網域
expires：限制cookie有效的時間
path：設定可以存取該cookie的路徑
secures：設定cookie是否要https網址才可進行傳送

瀏覽器端 Cookie寫法

寫入 Cookie

document.cookie = "myName=tom";

寫入 Cookie，並加入過期時間

document.cookie="username=sean; expires=Mon, 04 Mar 2020 18:28:30 GMT; path=/";

GMT 時間

new Date().toGMTString()

寫入 Cookie，設定 10 秒後失效

document.cookie="username=sean; max-age=10; path=/";

Node.js Cookie 設定

安裝解析 Cookie NPM (cookie-parser)

先使用npm安裝cookie-parser，cookie-parser是個中介軟體

$ npm install cookie-parser

在app.js載入cookie-parser套件：

var cookieParser = require('cookie-parser');

由於cookie-parser是個中介軟體，我們需要用.use()來使用cookie-parser套件：

app.use(cookieParser());

在routes/index.js 加上console.log()把結果顯示出來，寫法如下：

console.log(req.cookies);

程式碼：

router.get('/', function (req, res, next) {    console.log(req.cookies);    res.render('index', {        title: 'Express'    });});

首先執行程式碼看看。

當程式碼執行後，我們就可以利用Google Dev Tool來進行觀察，此時會顯示出此網頁的cookie。

接著，在cookie的 name與value中加上自定的name與value。看看console裡面有沒有出現剛剛加入的name與value？

Express 寫入 Cookie，並加入相關設定 (過期時間、httponly、path)

接下來，我們可以在NodeJs的Express裡面，寫入Cookie。其語法如下，一樣是name與value的組合。

res.cookie(name, value [, options]);

例如：

res.cookie('name','Sean');

你也可以把它變成signed cookie：

res.cookie('name','Sean',{ signed:true });

此外，還可以再加上 maxAge屬性來限制cookie有效的時間：3000就是指這個cookie可以延續三秒的意思。

maxAge: 3000,

或者你也可以加入httpOnly。httpOnly設為true的話，Cookie值只能被伺服器修改。：

httpOnly: true

設定secure。指定為true的話，Cookie值只能透過https來傳送。

secure: true,

當你設定了cookie之後，除了前面幾項外，你還可以設定domain屬性，讓cookie被指派為特定的網域；設定path屬性，讓cookie被限制在特定的路徑內。

Express 讀取 Client 端 Cookie

如果要取回Client端回傳的Cookie值可以用下面方式：

req.cookies.yourCookieName;

如上面例子我們想要取回，可以這樣子寫：

req.cookies.name;

如果要刪除cookie可以使用clearCookie：

res.clearCookie('name')

關於Cookie，有些重點需要知道：

Cookie可以被看：Server端傳送給Client端的Cookie，在Client端都可以被查看。因此，Cookie是無法對使用者保密，如果你想要偷窺，不用大費功夫。

Cookie可以被刪：如果你對網路有些知識，不僅是單純使用者的話，你可以完全控制Server端傳送的Cookie。雖然一般人不會這樣子做，你大可以挑選不喜歡的Cookie刪除之，你也可以停用Cookie。

Cookie可以被改：你除了可以瀏覽、可以刪除Cookie外，你還可以私自修改Server端傳送的Cookie，除非你使用的是signed cookie。

由於以上這些特性，Cookie也被人用來進行跨站攻擊等壞事。另外，如果在你設計的網站中使用了過多的Cookie，也會讓網站的使用者產生反感與警戒。雖說Cookie重要，是在使用上不得不謹慎。