學習筆記 | 關於 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,前端學習中,歡迎交流討論🧸

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