學習筆記 | 什麼是 JWT ?

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

上一篇筆記講到了瀏覽器與伺服器之間,經過身分驗證後,就會改以 Token 這個令牌作為通行證,不需要再反覆驗證,那麼這篇紀錄的就是目前最常使用的 JWT (JSON Web Token) 啦!

可以搭配 JWT 的網站來玩看看


JWT(JSON Web Token) 顧名思義就是以 JSON 格式來製作的 Token,大概會長這樣

raw-image

網站中很明顯用顏色和點號來區分 JWT 的三個部分,分別是 header(紅色)、payload(紫色) 和 signature(藍色)。

header

header 內會包含的資訊有 Token 的類型、使用何種演算法

{
"alg":"HS256" // 是用何種演算法產生的
"typ":"JWT", // token 的類型
}

payload

payload 則包含了data 資訊,但不是機密資訊,這時候就需要先了解一下什麼是 payload 了,在 Payload究竟是什麼意思 文章裡,對於 payload 的舉例說明很清楚,這邊就大致節錄一下就好:

有位客戶委託貨車司機運送石油,並支付一筆「委託費用」,其中石油重量、貨車重量、司機重量...等都屬於載重 (load) 的一部分,但對於客戶而言,他關心的只有「石油的重量」,也就是他願意付費的重量,此時「石油的重量」就是有效載重 (payload)

因此我們可以將 payload 理解為,一系列訊息之中,比較重要的、關鍵的、使用者有興趣了解的資訊,在 JWT 裡面, payload 所包含的資訊有:

{
"sub":"12345678", // 識別訊息
"name":"Amberhh",
"iat":"15688543", // issued at 發行的時間
"exp":"19397765", // expired at 到期時間
... // 其他資訊
}

那為什麼 payload 裡面絕對不能放機密資訊?

是因為 header 和 payload 的資訊僅使用 base64 編碼進行包裝,避免非法字元,沒有加密的動作,是可以被反解譯的,如果 Token 沒有保存好不小心外流,被有心人士 decode 它的 base64 編碼,則機密資訊都會外流哦~

也因為 header 和 payload 都可以被反解譯,因此 JWT 的「簽章」部分,就是這個 Token 最安全的地方了!

signature

簽章是將 header 和 payload 的訊息,以 base64 編碼組成一組字串,將這組字串加上私鑰加密,接著再將密文用雜湊演算法處理,變成不可反解譯的簽章

raw-image

由於雜湊值是無法被逆向解碼的,且 header 和 payload 的資訊如果有更動,雜湊的 hash 值,也會改變,因此伺服器收到 JWT 後,會先將前兩部分 (header 和 payload),用共享的私鑰,進行前面說過的加密和雜湊處理,如果得到的結果與這支 JWT 的第三部分簽章相同,即可認定這個 Token 的合法性。

經過伺服器比對過的合法簽章,能確認使用者是同一人,達到無狀態驗證,也因為只有持有相同私鑰的合法伺服器可以解析和驗證這個 Token,同時也確保了 JWT 的完整性和真實性囉。


我是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
JWT(JSON Web Token)是基於 JSON 格式的開放標準,主要用於身份驗證與權限確認。本文介紹了JWT的基本結構,並闡述其特點,如降低資料庫壓力、靈活性及無狀態性。JWT 特別適用於分佈式系統。本篇將協助讀者深入理解 JWT 的重要性與實際應用。
Thumbnail
JWT(JSON Web Token)是基於 JSON 格式的開放標準,主要用於身份驗證與權限確認。本文介紹了JWT的基本結構,並闡述其特點,如降低資料庫壓力、靈活性及無狀態性。JWT 特別適用於分佈式系統。本篇將協助讀者深入理解 JWT 的重要性與實際應用。
Thumbnail
進入區塊鏈/Web3的世界,首先需要擁有一個錢包或帳號。本文從重要名詞和觀念入手,介紹公鑰和私鑰的重要性,以及助記詞的作用。探討加密錢包的種類,從私鑰控制權和網路連接的角度進行分類。同時提醒了私鑰保管的重要性,以及在交易所和網路交互中的安全提醒。最後透過實際案例介紹了社交工程和釣魚的危害。
Thumbnail
進入區塊鏈/Web3的世界,首先需要擁有一個錢包或帳號。本文從重要名詞和觀念入手,介紹公鑰和私鑰的重要性,以及助記詞的作用。探討加密錢包的種類,從私鑰控制權和網路連接的角度進行分類。同時提醒了私鑰保管的重要性,以及在交易所和網路交互中的安全提醒。最後透過實際案例介紹了社交工程和釣魚的危害。
Thumbnail
上一篇筆記講到了瀏覽器與伺服器之間,經過身分驗證後,就會改以 Token 這個令牌作為通行證,不需要再反覆驗證,那麼這篇紀錄的就是目前最常使用的 JWT (JSON Web Token) 啦! 可以搭配 JWT 的網站來玩看看 JWT(JSON Web Token) 顧名思義就是以 JSON
Thumbnail
上一篇筆記講到了瀏覽器與伺服器之間,經過身分驗證後,就會改以 Token 這個令牌作為通行證,不需要再反覆驗證,那麼這篇紀錄的就是目前最常使用的 JWT (JSON Web Token) 啦! 可以搭配 JWT 的網站來玩看看 JWT(JSON Web Token) 顧名思義就是以 JSON
Thumbnail
角色基於的訪問控制(RBAC)是管理用戶訪問資源的一種策略,根據不同的角色賦予用戶不同的權限。在本篇文章中,我們將探討如何使用Gin和JSON Web Tokens (JWT)來實現RBAC。
Thumbnail
角色基於的訪問控制(RBAC)是管理用戶訪問資源的一種策略,根據不同的角色賦予用戶不同的權限。在本篇文章中,我們將探討如何使用Gin和JSON Web Tokens (JWT)來實現RBAC。
Thumbnail
最近因為想要花些時間做完一個完整的SideProject,以前總是懂得怎麼使用,拼拼湊湊完成一個塞趴卷就交卷了,但都沒時間去真正理解這些原理的應用,而Laravel 框架本身支持的登入登出的工具,就有好多種。
Thumbnail
最近因為想要花些時間做完一個完整的SideProject,以前總是懂得怎麼使用,拼拼湊湊完成一個塞趴卷就交卷了,但都沒時間去真正理解這些原理的應用,而Laravel 框架本身支持的登入登出的工具,就有好多種。
Thumbnail
哈囉!在今天的文章中,我們將深入探討如何在 Gin 應用中實現 JWT 驗證。這種技術允許我們安全地驗證和授權用戶,並確保我們的 API 或 Web 應用的資源僅被許可的用戶訪問。
Thumbnail
哈囉!在今天的文章中,我們將深入探討如何在 Gin 應用中實現 JWT 驗證。這種技術允許我們安全地驗證和授權用戶,並確保我們的 API 或 Web 應用的資源僅被許可的用戶訪問。
Thumbnail
session & token 驗證機制早期是用 session,server 這裡會發一個 session 給 client,並在資料庫記錄這個 session 屬於誰,而且每個裝置都會記一組 session,這會造成 server 這邊需要記錄大量的資料。 後來發展出 token,client
Thumbnail
session & token 驗證機制早期是用 session,server 這裡會發一個 session 給 client,並在資料庫記錄這個 session 屬於誰,而且每個裝置都會記一組 session,這會造成 server 這邊需要記錄大量的資料。 後來發展出 token,client
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News