學習筆記 | 什麼是 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
23會員
22內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Amber hh的沙龍 的其他內容
延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
時間真的過得好快,從2022五月的體驗營開始,到後來的切版直播班、JS直播班,將近一年的時間,現在都要從Vue直播班畢業了!
延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
時間真的過得好快,從2022五月的體驗營開始,到後來的切版直播班、JS直播班,將近一年的時間,現在都要從Vue直播班畢業了!
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
這篇文章將介紹兩個主要的認證工具:Passport 和 JWT。Passport 是一個簡單的身份驗證中介軟體,提供多種登入方式,而JWT則是一種stateless的認證方式,能減輕伺服器負擔。文章探討了 stateful 與 stateless 認證的區別,以及如何將這兩者結合提升安全性與效能。
Thumbnail
簡介如何使用Solana Pay API整合商店頁面進行支付
Thumbnail
Staking也可以稱為質押,但與傳統意義的質押Pledge不同,虛擬貨幣的質押可以被簡單說明為「將持有的虛擬貨幣鎖倉提供鏈上驗證的挖礦行為」,即第一章提到的POS權益證明。
Thumbnail
WOW EARN 是一個全方位的綜合生態系統,專門為新手設計,提供多種功能,包括開源錢包、跨鏈交易、綜合金融服務和 DeFi 挖礦。透過 WOW EARN,用戶可以方便地使用區塊鏈技術和各種去中心化應用程式,享受區塊鏈帶來的各種便利和機會。
※ 什麼是 RESTful API? 這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API,它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface),網址也是一種應用程式的「介面」,故稱為
Thumbnail
進入區塊鏈/Web3的世界,首先需要擁有一個錢包或帳號。本文從重要名詞和觀念入手,介紹公鑰和私鑰的重要性,以及助記詞的作用。探討加密錢包的種類,從私鑰控制權和網路連接的角度進行分類。同時提醒了私鑰保管的重要性,以及在交易所和網路交互中的安全提醒。最後透過實際案例介紹了社交工程和釣魚的危害。
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
這篇文章將介紹兩個主要的認證工具:Passport 和 JWT。Passport 是一個簡單的身份驗證中介軟體,提供多種登入方式,而JWT則是一種stateless的認證方式,能減輕伺服器負擔。文章探討了 stateful 與 stateless 認證的區別,以及如何將這兩者結合提升安全性與效能。
Thumbnail
簡介如何使用Solana Pay API整合商店頁面進行支付
Thumbnail
Staking也可以稱為質押,但與傳統意義的質押Pledge不同,虛擬貨幣的質押可以被簡單說明為「將持有的虛擬貨幣鎖倉提供鏈上驗證的挖礦行為」,即第一章提到的POS權益證明。
Thumbnail
WOW EARN 是一個全方位的綜合生態系統,專門為新手設計,提供多種功能,包括開源錢包、跨鏈交易、綜合金融服務和 DeFi 挖礦。透過 WOW EARN,用戶可以方便地使用區塊鏈技術和各種去中心化應用程式,享受區塊鏈帶來的各種便利和機會。
※ 什麼是 RESTful API? 這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API,它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface),網址也是一種應用程式的「介面」,故稱為
Thumbnail
進入區塊鏈/Web3的世界,首先需要擁有一個錢包或帳號。本文從重要名詞和觀念入手,介紹公鑰和私鑰的重要性,以及助記詞的作用。探討加密錢包的種類,從私鑰控制權和網路連接的角度進行分類。同時提醒了私鑰保管的重要性,以及在交易所和網路交互中的安全提醒。最後透過實際案例介紹了社交工程和釣魚的危害。
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊