學習筆記 | 關於 Cookie、Session、Token

更新於 發佈於 閱讀時間約 3 分鐘

延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。

像是最常見的會員資料,伺服器就必須確認你是會員本人,才會將你的訂單資訊、歷史訂單...等內容回傳過來,所以我們需要進行「登入」,告知伺服器:我就是會員本人啦

一般常見的身分驗證方式有以下三種:

  1. 使用者應該知道的資訊 ex:密碼
  2. 使用者持有的證件、憑證 ex:身分證、Token
  3. 使用者的身體特徵 ex:指紋

很顯然的,一般我們使用的會員登入,驗證的是「使用者應該知道的資訊」,但總不能每次要查看購物車內的商品或歷史訂單,就要重新進行驗證吧,所以登入以後的請求,就會改用「使用者持有的證件」,也就是 Token 這項令牌了

我聽過一句話,「技術的發明,是為了解決問題」,所以了解 Token 以前,也需要知道它為什麼而誕生吧?

這就需要從身分驗證的狀態來說了,先定義一下此時的「狀態」所代表的意思是:

  • 有狀態 ➜ 表示會保存關於使用者的信息、具有記憶性,能夠追蹤使用者的活動
  • 無狀態 ➜ 表示對處理過的事件並沒有記憶性,每個請求都是獨立的,因此也無法辨識這次的請求和上次的請求是否為同一個人


最初瀏覽器和伺服器驗證身分後,是透過瀏覽器的 Cookie 紀錄使用者的狀態,並在後續訪問資料時,帶著 Cookie 儲存的狀態去進行請求

raw-image

此時 Cookie 有很致命的問題是

1. 資料透明 ➜ 透明意味著完全公開,沒有任何加密動作,存在安全性問題

2. 網域限制 ➜ 無法跨網域共用 Cookie 所儲存的狀態訊息


因此開發者們轉而使用 Session 來記錄使用者狀態,Session 的存取方式基本上與 Cookie 相同,但狀態存取方改變為「伺服器」了

raw-image

伺服器會將使用者狀態打包成一個 ID,並將這個 ID 回傳給瀏覽器,瀏覽器要訪問後續資源時,就帶這個 ID 進行驗證,解決了 Cookie 資料透明和只能存取字串的問題


然而 Session 也有存在其他的問題

1. 只要瀏覽器關閉就會失效

  1. 狀態由伺服器存取,假設每次訪問到的伺服器不同,則伺服器之間又需要互相索取資料,消耗效能


因此 Token 就誕生啦!

raw-image

Session 已經解決資料裸奔的問題, Token 要解決的則是「無狀態」的身分驗證問題


Token 會在使用者進行身分驗證後,由伺服器將使用者狀態打包加密,再傳送給瀏覽器,成為一種瀏覽器向伺服器訪問資料時的通行證,也可以稱為金鑰或令牌


此時伺服器不再需要保留使用者狀態,只要確認 Token 的時效性,就可以進行身分驗證,也可以進行跨域的請求啦!就相當於去遊樂園,只要持有一日票券的使用者,都可以使用遊樂設施,是認票不認人的~



本篇筆記參考 深入解析 JWT:了解 Token 的運作與應用 整理而成

我是Amber,前端學習中,歡迎交流討論🧸

留言
avatar-img
留言分享你的想法!
avatar-img
Amber hh的沙龍
23會員
22內容數
Amber hh的沙龍的其他內容
2024/09/04
第三次月會來了!這個月的主題是「工程師的溝通秘訣」 很多人認為,當工程師只要跟電腦對話就好,在轉職之前我也這麼認為的,尤其是以前在服務業工作,從早到晚跟客戶對談、處理他們各種疑難雜症和情緒的過程,實在太容易讓我感到心累了,倒不如整天跟電腦對話,對錯很明顯,也不用顧及雙方情緒,肯定比處理客訴簡單
Thumbnail
2024/09/04
第三次月會來了!這個月的主題是「工程師的溝通秘訣」 很多人認為,當工程師只要跟電腦對話就好,在轉職之前我也這麼認為的,尤其是以前在服務業工作,從早到晚跟客戶對談、處理他們各種疑難雜症和情緒的過程,實在太容易讓我感到心累了,倒不如整天跟電腦對話,對錯很明顯,也不用顧及雙方情緒,肯定比處理客訴簡單
Thumbnail
2024/08/03
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
2024/08/03
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
2024/07/24
剛開始學前端都是跟著六角的課程進度走,雖然知道自己不會的技術很多,但至少有明確的學習目標,也會定期產出結果,當時的焦慮來源只覺得時間總是不夠,殊不知真正踏入實務工作後,除了焦慮時間不夠之外,甚至還有點迷失了方向。 轉職後的公司僅一人前端,我沒有 mentor 帶領,也找不到可以效仿學習的 Ro
Thumbnail
2024/07/24
剛開始學前端都是跟著六角的課程進度走,雖然知道自己不會的技術很多,但至少有明確的學習目標,也會定期產出結果,當時的焦慮來源只覺得時間總是不夠,殊不知真正踏入實務工作後,除了焦慮時間不夠之外,甚至還有點迷失了方向。 轉職後的公司僅一人前端,我沒有 mentor 帶領,也找不到可以效仿學習的 Ro
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
用戶註冊,是許多線上服務和應用程式的重要一環,它不僅是作為用戶識別,也有助於系統提供個人化的服務。然而,在我職涯中,總會被業主要求一些作法,硬生生的會澆熄用戶註冊的意願。以下是四種可能澆熄用戶註冊意願的作法,跟建議改善的方式。 複雜的註冊流程 多重驗證或複雜的圖形驗證碼、嚴格的密碼政策、需要
Thumbnail
用戶註冊,是許多線上服務和應用程式的重要一環,它不僅是作為用戶識別,也有助於系統提供個人化的服務。然而,在我職涯中,總會被業主要求一些作法,硬生生的會澆熄用戶註冊的意願。以下是四種可能澆熄用戶註冊意願的作法,跟建議改善的方式。 複雜的註冊流程 多重驗證或複雜的圖形驗證碼、嚴格的密碼政策、需要
Thumbnail
延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
Thumbnail
延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
Thumbnail
認證(authentication)跟授權(authorization)這兩個名詞常常被混淆,但本質上是完全不同的兩個概念,在數位化的時代下,為了確保每位使用者的安全性,每個系統幾乎都具備認證(authentication)與授權(authorization)這兩大功能,而這些概念也常常出現在我們生
Thumbnail
認證(authentication)跟授權(authorization)這兩個名詞常常被混淆,但本質上是完全不同的兩個概念,在數位化的時代下,為了確保每位使用者的安全性,每個系統幾乎都具備認證(authentication)與授權(authorization)這兩大功能,而這些概念也常常出現在我們生
Thumbnail
Cookie簡介與個人隱私議題 在談Cookieless之前我們先來了解什麼是Cookie,這裡的Cookie並不是餅乾的意思,而是為了讓人們在網路上通訊時,能夠創造更無縫的體驗,想像一下,假設我們在使用網站時,每切換一頁就要進行登入一次,我想大部分的人都已經抓狂並放棄使用的吧! 而Cookie的出
Thumbnail
Cookie簡介與個人隱私議題 在談Cookieless之前我們先來了解什麼是Cookie,這裡的Cookie並不是餅乾的意思,而是為了讓人們在網路上通訊時,能夠創造更無縫的體驗,想像一下,假設我們在使用網站時,每切換一頁就要進行登入一次,我想大部分的人都已經抓狂並放棄使用的吧! 而Cookie的出
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微習慣讓我們享受複利的效應。 CRSF攻擊示意圖 如何防範CSRF?
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微習慣讓我們享受複利的效應。 CRSF攻擊示意圖 如何防範CSRF?
Thumbnail
當你進入一個網站,系統為了要驗證你是不是機器人,提供好多圖片給你選,讓人不堪其擾,這時就讓privacy pass幫你解決吧!!!
Thumbnail
當你進入一個網站,系統為了要驗證你是不是機器人,提供好多圖片給你選,讓人不堪其擾,這時就讓privacy pass幫你解決吧!!!
Thumbnail
CSRF全名為 Cross Site Request Forgery( 跨站請求偽造)。
Thumbnail
CSRF全名為 Cross Site Request Forgery( 跨站請求偽造)。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News