學習筆記 | 關於 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
22會員
22內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Amber hh的沙龍 的其他內容
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
時間真的過得好快,從2022五月的體驗營開始,到後來的切版直播班、JS直播班,將近一年的時間,現在都要從Vue直播班畢業了!
事情是這樣發生的,由於直播班第二週和第三週的作業內容很相似,於是我就把第二週的作業資料夾「複製」了一份,作為第三週的基底,並把第三週的作業內容完成後,準備上傳到一個新建的 week3 遠端 repository ...
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
時間真的過得好快,從2022五月的體驗營開始,到後來的切版直播班、JS直播班,將近一年的時間,現在都要從Vue直播班畢業了!
事情是這樣發生的,由於直播班第二週和第三週的作業內容很相似,於是我就把第二週的作業資料夾「複製」了一份,作為第三週的基底,並把第三週的作業內容完成後,準備上傳到一個新建的 week3 遠端 repository ...
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
這是一篇介紹如何使用Google Maps API在網頁上呈現地圖,並進行店家名稱的搜尋的文章。內容包含如何申請Google Cloud Platform的API金鑰、初始化地圖、設定搜尋功能等步驟。文章中提供了部分程式碼範例,並附上圖片說明操作過程。
Thumbnail
福薄於此法,猶豫亦難生;雖僅生猶豫,亦能壞三有。—《四百論》
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
可能包含敏感內容
學習筆記來自小Lin說影片"一口气搞清避税天堂的资本游戏"。影片中解釋了大富豪們的避稅方式,特別是對於中國大陸公司是如何透過海外公司來上市避稅,甚至像許家印是如何利用這些套路達到最大化自己的利益。
Thumbnail
之前在 學習筆記 | 關於 Cookie、Session、Token 這篇筆記有提到,瀏覽器需要帶著使用者的身分訊息或經過身分驗證後取得的Token(令牌),才能向伺服器請求資源,那麼瀏覽器就必須有個空間來儲存這些 Token 資訊,這篇就是要來記錄瀏覽器常見的儲存空間啦~
Thumbnail
三個對話可以讓員工有更好的表現 “表達期待”對話 定義清楚工作完成的樣貌 告知為什麼要做這件事情 讓員工有所依循 “發展潛能”對話 你覺得自己目前的才能獲技巧,能夠在我們目前最重要的項目中提供那些貢獻 你認為針對目前進行中的項目,你有可能使用不同於他人的技巧來完成任務嗎 讓員工勇於嘗試 “得到認可”
Thumbnail
今天的筆記來自於「一場關於積極的練習」這本書,本書匯集了15本振奮人心力量的書籍,有點像是每本書籍的重點整理。我把這本書二次整理後,分享給各位讀者。這篇文章主要介紹的是卷二—「人際交往的學問」,原作者為美國的戴爾.卡內基。
Thumbnail
這個世代的開會人才需要什麼能力呢?如何讓會議更有效率進行? 若身為會議主持人的你,不知道如何面對情緒發言的與會者,或想避免會議上眾人雞同鴨講、把會議變成常跑馬拉松,歡迎參考以《唐鳳的破框思考力: 關於工作、學習與行動的方法》一書中唐鳳開會藝術所結晶出的本文。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
這是一篇介紹如何使用Google Maps API在網頁上呈現地圖,並進行店家名稱的搜尋的文章。內容包含如何申請Google Cloud Platform的API金鑰、初始化地圖、設定搜尋功能等步驟。文章中提供了部分程式碼範例,並附上圖片說明操作過程。
Thumbnail
福薄於此法,猶豫亦難生;雖僅生猶豫,亦能壞三有。—《四百論》
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
可能包含敏感內容
學習筆記來自小Lin說影片"一口气搞清避税天堂的资本游戏"。影片中解釋了大富豪們的避稅方式,特別是對於中國大陸公司是如何透過海外公司來上市避稅,甚至像許家印是如何利用這些套路達到最大化自己的利益。
Thumbnail
之前在 學習筆記 | 關於 Cookie、Session、Token 這篇筆記有提到,瀏覽器需要帶著使用者的身分訊息或經過身分驗證後取得的Token(令牌),才能向伺服器請求資源,那麼瀏覽器就必須有個空間來儲存這些 Token 資訊,這篇就是要來記錄瀏覽器常見的儲存空間啦~
Thumbnail
三個對話可以讓員工有更好的表現 “表達期待”對話 定義清楚工作完成的樣貌 告知為什麼要做這件事情 讓員工有所依循 “發展潛能”對話 你覺得自己目前的才能獲技巧,能夠在我們目前最重要的項目中提供那些貢獻 你認為針對目前進行中的項目,你有可能使用不同於他人的技巧來完成任務嗎 讓員工勇於嘗試 “得到認可”
Thumbnail
今天的筆記來自於「一場關於積極的練習」這本書,本書匯集了15本振奮人心力量的書籍,有點像是每本書籍的重點整理。我把這本書二次整理後,分享給各位讀者。這篇文章主要介紹的是卷二—「人際交往的學問」,原作者為美國的戴爾.卡內基。
Thumbnail
這個世代的開會人才需要什麼能力呢?如何讓會議更有效率進行? 若身為會議主持人的你,不知道如何面對情緒發言的與會者,或想避免會議上眾人雞同鴨講、把會議變成常跑馬拉松,歡迎參考以《唐鳳的破框思考力: 關於工作、學習與行動的方法》一書中唐鳳開會藝術所結晶出的本文。