圈圈工程師

Change Change Developer

0%

Session & Cookie 傻傻分不清楚：Cookie 篇

發表於 更新於 分類於 ，


你知道什麼是 Cookie 嗎？為什麼需要它？它又是怎麼運作的呢？今天就來聊聊 Cookie 吧!


HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。
若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍

身爲一個後端工程師，在學習的過程中一定都會經歷過 2 個關鍵字： Session & Cookie。

也許許多的語言或者是套件已經幫我們完成了 Session 與 Cookie 的功能，我們需要的僅止於知道如何使用他們。然而剛好趁這次的機會來好好瞭解一下他們的使用方式與背後的原理吧。

前情提要

HTTP (Hypertext Transfer Protocol) 協定

目前大部分所有的網路溝通的方式都建立在 HTTP 的協定上。至於 HTTP 是什麼呢？今天先不聊這 Part 😆

簡單地解釋一下 HTTP 的最基本運作方式：

  • 使用者 會對 伺服器 發起一個 HTTP 請求 (Request)
  • 伺服器 接到 使用者 發起的 HTTP 請求 (Request) 之後，會 回覆 (Response) 使用者

HTTP

Http 無狀態 (Stateless)

對於伺服器來說，會把每一次使用者的 HTTP 請求都視爲一個獨立的請求。伺服器每回覆使用者之後，就算使用者下一秒就馬上在發起一個請求，伺服器也不會認得這個使用者。

HTTP-Stateless

😵 問題發生點 😵

伺服器無法在這麼多個 HTTP 的請求分辨是哪些是屬於同一個使用者的！

HTTP-Stateless-2

🚀 希望達成效果 🚀

讓伺服器有記憶能力可以記住每一個使用者的狀態!!

解決方案一：給使用者小紙條

當每個使用者有請求傳遞到伺服器，等伺服器處理完並且回覆給使用者的時候，會 寫一張小紙條一起交給使用者，叫他下次順便把這張小紙條跟請求一起送過來，這樣子伺服器就會知道這個使用者的狀態（資料）了
Cookie-01

Cookie-01

Cookie

Cookie-02
上述講的小紙條的方式就是用 Cookie 的方式， 將資料存放在使用者的瀏覽器那端，等下次有請求要發送的時候會連同 Cookie 一起發送到伺服器 ，讓伺服器藉由 Cookie 上的資訊就可以搞清楚狀況了。

依據 wiki 的定義：

Cookie（複數形態：Cookies），又稱「小甜餅」。類型為「小型文字檔案」[1]，指某些網站為了辨別使用者身分而儲存在用戶端（Client Side）上的資料（通常經過加密）。

如同上述的解釋，Cookie 其實就是伺服器存放在使用者端的資料。也是因爲它放在使用者端那邊，所以有幾點需要注意：

  • 因爲只是個小紙條，所以能存放的大小限制在 4 KB 左右，無法存太多資料
  • 因爲 Cookie 會被附加在每個 HTTP 請求中，所以無形中會增加流量
  • 使用者查看這個網站所有的 Cookie
  • 使用者可以停用 Cookie 或者刪除 Cookie。更壞的是串改 Cookie 😵
    例如剛剛上一張圖片的使用者已經使用了 300 點的點數，伺服器將 Cookie 上的點數更改爲 500 點。然而惡意的使用者又將 Cookie 上的點數更改爲 800 點，這樣就會用源源不絕的點數可以使用了 😎
    Cookie-02
1
2
3
4
5
6
/* 將資料寫入 Cookie，並且設定失效時間從現在開始的 3600 秒之後 */ 
setcookie(
    'point', /* key */  
    800,  /* value */ 
    time() /* 現在時間 */   + 3600 /* 秒 */ 
);

Cookie 到底存在使用者的哪裏呢？ 🤔
PHP-Cookie-01

Cookie 會存放在 PHP 的 $_COOKIE 變數中，我們只需要用剛剛存的 key 去取值就可以囉。

1
2
$point = $_COOKIE['point'];
echo '您尚且有 ' . $point . ' 點 😍';

PHP-Cookie-01

若要刪除 Cookie 上的資料，只需要重新將值設定爲 null，並且將 過期時間設定爲過去時間 即可。

1
2
3
4
5
setcookie(
    'point', /* key */
    null,  /* 清空 */
    -1  /* 過期時間設定爲過去的時間點 */
);

Cookie 的部分就差不多聊到這裡囉。以上爲《 Session & Cookie 傻傻分不清楚》的上篇，簡單地介紹了 Cookie 是什麼與使用情境，希望上面的過程小插圖能夠幫助大家理解概念。

在下一篇 Session & Cookie 傻傻分不清楚：Session 篇 將會介紹 Session 是什麼，以及 Session 與 Cookie 搭配使用的方式喔 😀

如果覺得喜歡這種圖文介紹的文章的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍

最後也感謝你的閱讀，下次再見囉 😍