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

    22會員
    22內容數
    留言0
    查看全部
    發表第一個留言支持創作者!
    Amber hh的沙龍 的其他內容
    延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
    那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
    上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
    上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
    身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
    時間真的過得好快,從2022五月的體驗營開始,到後來的切版直播班、JS直播班,將近一年的時間,現在都要從Vue直播班畢業了!
    延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
    那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
    上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
    上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
    身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
    時間真的過得好快,從2022五月的體驗營開始,到後來的切版直播班、JS直播班,將近一年的時間,現在都要從Vue直播班畢業了!
    你可能也想看
    Google News 追蹤
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
    Thumbnail
    Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
    Thumbnail
    你上學時期會做筆記嗎?作筆記真的能提高學習效果嗎?從小老師會教我們上課要做筆記,而且越詳細越好。
    Thumbnail
    就像是一間公司裡,需要有各種不同的職位,互相合作,才能發揮最大的效益。 這個世界裡,每個人的天賦才能都不相同,也因此得以互相幫助。 這裡的類型,像是在說明著「你所擁有的天賦特質」 這世界總共有五個類型 : 顯示者、生產者、顯示生產者、投射者、反映者。 如果用一句話簡單說明,這些類型會像是這樣
    本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
    話語更難,因為它直接、瞬即、無法修改。所以相較於可以一再推敲、修改的文字,話語反求內心的修正,把你的心穩穩地盤繞在,一個即便世界如何擠壓你,也不會說出傷害他人話語的地步。這很難,非常難,差不多是一種類似內觀的修煉才能照見自己的心。所以,我很敬佩助人工作者,他們要如何以話語來療治、陪伴病人呢?這對我而
    Thumbnail
    本篇要談的這本《全圖解!厲害的人如何學?》 作者—山崎拓巳提到,高中時的他在四百公尺跨欄賽跑中遇到了瓶頸。他花費了大量心力不斷地練習,卻還是難以抓到訣竅,突破目前的成績。 後來,他發現某所國中的體育老師是這項競賽的現役選手後,便開始想辦法請教那位老師。 透過這一小時的機會,讓作者更加確信...
    Thumbnail
    2020年9月6日,我冠上了一個新的身份,高雄市立空中大學學生的身份,朋友問我,我選修什麼科系,我回答「科技管理」。不少人感到困惑,這是什麼樣的科系,或者直覺認為這是有關資工、資管、資處方面的學系。 其實原先我也不了解,直到我開始了我第一門專業基礎必修課「科技管理」,在導師吳欣穎系主任的講解下,慢
    Thumbnail
    自去年三月底開始上Life Coach (生活教練) 的課程,至今也快滿一年了!(時間過好快啊 ~) 拖稿也拖太久了!哈哈。 我真的非常開心我選擇去上生活教練課程,除了學習到很多知識,我更認識我自己;並且在我的人生當中也有許多突破,這些突破是我初期學習生活教練時萬萬沒有想過,甚至沒有想到我會有突破
    Thumbnail
    海苔醬畢業後就進入日商公司,展開了日本文化的台灣職場生活。記得第一次到公司面試時,就覺得環境很乾淨,東西也放得整整齊齊的,地上放置的物品隱約有標示些什麼字樣,那時的海苔醬還不知道眼前這些,原來都是整理、整頓的產物阿!
    Thumbnail
    ​https://bit.ly/2H1cer6 習近平與蔡英文的首次交鋒?!統派、獨派吵什麼!? 文:廖斌洲 我們今天的主題要跟大家分享的是兩岸關係 ​ 在元旦剛過的隔天,1月2日,中國國家主席習近平 在《告台灣同胞書》發表四十週年,發表了重要的談話 ​
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
    Thumbnail
    Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
    Thumbnail
    你上學時期會做筆記嗎?作筆記真的能提高學習效果嗎?從小老師會教我們上課要做筆記,而且越詳細越好。
    Thumbnail
    就像是一間公司裡,需要有各種不同的職位,互相合作,才能發揮最大的效益。 這個世界裡,每個人的天賦才能都不相同,也因此得以互相幫助。 這裡的類型,像是在說明著「你所擁有的天賦特質」 這世界總共有五個類型 : 顯示者、生產者、顯示生產者、投射者、反映者。 如果用一句話簡單說明,這些類型會像是這樣
    本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
    話語更難,因為它直接、瞬即、無法修改。所以相較於可以一再推敲、修改的文字,話語反求內心的修正,把你的心穩穩地盤繞在,一個即便世界如何擠壓你,也不會說出傷害他人話語的地步。這很難,非常難,差不多是一種類似內觀的修煉才能照見自己的心。所以,我很敬佩助人工作者,他們要如何以話語來療治、陪伴病人呢?這對我而
    Thumbnail
    本篇要談的這本《全圖解!厲害的人如何學?》 作者—山崎拓巳提到,高中時的他在四百公尺跨欄賽跑中遇到了瓶頸。他花費了大量心力不斷地練習,卻還是難以抓到訣竅,突破目前的成績。 後來,他發現某所國中的體育老師是這項競賽的現役選手後,便開始想辦法請教那位老師。 透過這一小時的機會,讓作者更加確信...
    Thumbnail
    2020年9月6日,我冠上了一個新的身份,高雄市立空中大學學生的身份,朋友問我,我選修什麼科系,我回答「科技管理」。不少人感到困惑,這是什麼樣的科系,或者直覺認為這是有關資工、資管、資處方面的學系。 其實原先我也不了解,直到我開始了我第一門專業基礎必修課「科技管理」,在導師吳欣穎系主任的講解下,慢
    Thumbnail
    自去年三月底開始上Life Coach (生活教練) 的課程,至今也快滿一年了!(時間過好快啊 ~) 拖稿也拖太久了!哈哈。 我真的非常開心我選擇去上生活教練課程,除了學習到很多知識,我更認識我自己;並且在我的人生當中也有許多突破,這些突破是我初期學習生活教練時萬萬沒有想過,甚至沒有想到我會有突破
    Thumbnail
    海苔醬畢業後就進入日商公司,展開了日本文化的台灣職場生活。記得第一次到公司面試時,就覺得環境很乾淨,東西也放得整整齊齊的,地上放置的物品隱約有標示些什麼字樣,那時的海苔醬還不知道眼前這些,原來都是整理、整頓的產物阿!
    Thumbnail
    ​https://bit.ly/2H1cer6 習近平與蔡英文的首次交鋒?!統派、獨派吵什麼!? 文:廖斌洲 我們今天的主題要跟大家分享的是兩岸關係 ​ 在元旦剛過的隔天,1月2日,中國國家主席習近平 在《告台灣同胞書》發表四十週年,發表了重要的談話 ​