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

更新 發佈閱讀 3 分鐘

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

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

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

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

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

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

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

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


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

vocus|新世代的創作平台

此時 Cookie 有很致命的問題是

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

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


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

vocus|新世代的創作平台

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


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

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

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


因此 Token 就誕生啦!

vocus|新世代的創作平台

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


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


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



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

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

留言
avatar-img
Amber hh的沙龍
24會員
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
1. 設定cookie為HttpOnly 在一般的情況下,cookie是可以透過javascript來存取的(document.cookie),如同上一篇所說的,有可能會有XSS攻擊的風險。 將cookie設定為HttpOnly,表示這個cookie無法透過js存取。
Thumbnail
1. 設定cookie為HttpOnly 在一般的情況下,cookie是可以透過javascript來存取的(document.cookie),如同上一篇所說的,有可能會有XSS攻擊的風險。 將cookie設定為HttpOnly,表示這個cookie無法透過js存取。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
CSRF全名為 Cross Site Request Forgery( 跨站請求偽造)。
Thumbnail
CSRF全名為 Cross Site Request Forgery( 跨站請求偽造)。
Thumbnail
當你進入一個網站,系統為了要驗證你是不是機器人,提供好多圖片給你選,讓人不堪其擾,這時就讓privacy pass幫你解決吧!!!
Thumbnail
當你進入一個網站,系統為了要驗證你是不是機器人,提供好多圖片給你選,讓人不堪其擾,這時就讓privacy pass幫你解決吧!!!
Thumbnail
用戶註冊,是許多線上服務和應用程式的重要一環,它不僅是作為用戶識別,也有助於系統提供個人化的服務。然而,在我職涯中,總會被業主要求一些作法,硬生生的會澆熄用戶註冊的意願。以下是四種可能澆熄用戶註冊意願的作法,跟建議改善的方式。 複雜的註冊流程 多重驗證或複雜的圖形驗證碼、嚴格的密碼政策、需要
Thumbnail
用戶註冊,是許多線上服務和應用程式的重要一環,它不僅是作為用戶識別,也有助於系統提供個人化的服務。然而,在我職涯中,總會被業主要求一些作法,硬生生的會澆熄用戶註冊的意願。以下是四種可能澆熄用戶註冊意願的作法,跟建議改善的方式。 複雜的註冊流程 多重驗證或複雜的圖形驗證碼、嚴格的密碼政策、需要
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
Cookie簡介與個人隱私議題 在談Cookieless之前我們先來了解什麼是Cookie,這裡的Cookie並不是餅乾的意思,而是為了讓人們在網路上通訊時,能夠創造更無縫的體驗,想像一下,假設我們在使用網站時,每切換一頁就要進行登入一次,我想大部分的人都已經抓狂並放棄使用的吧! 而Cookie的出
Thumbnail
Cookie簡介與個人隱私議題 在談Cookieless之前我們先來了解什麼是Cookie,這裡的Cookie並不是餅乾的意思,而是為了讓人們在網路上通訊時,能夠創造更無縫的體驗,想像一下,假設我們在使用網站時,每切換一頁就要進行登入一次,我想大部分的人都已經抓狂並放棄使用的吧! 而Cookie的出
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微習慣讓我們享受複利的效應。 CRSF攻擊示意圖 如何防範CSRF?
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微習慣讓我們享受複利的效應。 CRSF攻擊示意圖 如何防範CSRF?
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
認證(authentication)跟授權(authorization)這兩個名詞常常被混淆,但本質上是完全不同的兩個概念,在數位化的時代下,為了確保每位使用者的安全性,每個系統幾乎都具備認證(authentication)與授權(authorization)這兩大功能,而這些概念也常常出現在我們生
Thumbnail
認證(authentication)跟授權(authorization)這兩個名詞常常被混淆,但本質上是完全不同的兩個概念,在數位化的時代下,為了確保每位使用者的安全性,每個系統幾乎都具備認證(authentication)與授權(authorization)這兩大功能,而這些概念也常常出現在我們生
Thumbnail
延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
Thumbnail
延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News