當前位置:首頁 » 網頁前端 » jwt前端如何保證
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

jwt前端如何保證

發布時間: 2023-05-28 09:04:09

A. jwt的token怎麼生存的

引入依賴包加密解密方法。
在生產環境中,一般jwt會保存用戶的名字和角色許可權等信息。可以將token寫到cookie里,每次前端訪問後台時,可以在攔截器或者過濾器取到token,然後解密,先判斷是否過期,過期就拋異常阻止其訪問。然後取出信息保存到threadLocal里,方便以後調用這些信息,當後台訪問完成後,從thredLocal刪除此用戶信息。
伺服器認證以後,生成一個JSON格式的對象返回給客戶端。之後客戶端與服務端通信的時候,都要發回這個JSON對象。伺服器完全根據這個對象認證用戶身份。

B. JWT生成token及過期處理方案

## 業務場景

在前後分離場景下,越來越多的項目使用token作為介面的安全機制,APP端或者WEB端(使用VUE、REACTJS等構建)使用token與後端介面交互,以達到安全的目的。本文結合stackoverflow以及本身項目實踐,試圖總結出一個通用的,可落地的方案。

## 基本思路

- 單個token

1. token(A)過期設置為15分鍾

2. 前端發起請求,後端驗證token(A)是否過期;如果過期,前端發起刷新token請求,後端設置已再次授權標記為true,請求成功

3. 前端發起請求,後端驗證再次授權標記,如果已經再次授權,則拒絕刷新token的請求,請求成功

4. 如果前端每隔72小時,必須重新登錄,後端檢查用戶最後一次登錄日期,如超過72小時,則拒絕刷新token的請求,請求失敗

- 授權token加上刷新token

用戶僅登錄一次,用戶改變密碼,則廢除token,重新登錄

## 1.0實現

1.登錄成功,返回access\_token和refresh\_token,客戶端緩存此兩種token; 

2.使用access_token請求介面資源,成功則調用成功;如果token超時,客戶端 

攜帶refresh\_token調用中間件介面獲取新的access\_token; 

3.中間件接受刷新token的請求後,檢查refresh_token是否過期。 

如過期,拒絕刷新,客戶端收到該狀態後,跳轉到登錄頁; 

如未過期,生成新的access\_token和refresh\_token並返回給客戶端(如有可能,讓舊的refresh\_token失效),客戶端攜帶新的access\_token重新調用上面的資源介面。 

4.客戶端退出登錄或修改密碼後,調用中間件注銷舊的token(使access\_token和refresh\_token失效),同時清空客戶端的access\_token和refresh\_toke。

後端表 

id user\_id client\_id client\_secret refresh\_token expire\_in create\_date del_flag

## 2.0實現

場景: access\_token訪問資源 refresh\_token授權訪問 設置固定時間X必須重新登錄

1.登錄成功,後台jwt生成access\_token(jwt有效期30分鍾)和refresh\_token(jwt有效期15天),並緩存到redis(hash-key為token,sub-key為手機號,value為設備唯一編號(根據手機號碼,可以人工廢除全部token,也可以根據sub-key,廢除部分設備的token。),設置過期時間為1個月,保證最終所有token都能刪除),返回後,客戶端緩存此兩種token; 

2.使用access\_token請求介面資源,校驗成功且redis中存在該access\_token(未廢除)則調用成功;如果token超時,中間件刪除access\_token(廢除);客戶端再次攜帶refresh\_token調用中間件介面獲取新的access_token; 

3.中間件接受刷新token的請求後,檢查refresh_token是否過期。 

如過期,拒絕刷新,刪除refresh_token(廢除); 客戶端收到該狀態後,跳轉到登錄頁; 

如未過期,檢查緩存中是否有refresh\_token(是否被廢除),如果有,則生成新的access\_token並返回給客戶端,客戶端接著攜帶新的access_token重新調用上面的資源介面。 

4.客戶端退出登錄或修改密碼後,調用中間件注銷舊的token(中間件刪除access\_token和refresh\_token(廢除)),同時清空客戶端側的access\_token和refresh\_toke。 

5.如手機丟失,可以根據手機號人工廢除指定用戶設備關聯的token。 

6.以上3刷新access_token可以增加根據登錄時間判斷最長X時間必須重新登錄,此時則拒絕刷新token。(拒絕的場景:失效,長時間未登錄,頻繁刷新)

2.0 變動 

1.登錄 

2.登錄攔截器 

3.增加刷新access_token介面 

4.退出登錄 

5.修改密碼

## 3.0實現

場景:自動續期 長時間未使用需重新登錄

1.登錄成功,後台jwt生成access\_token(jwt有效期30分鍾),並緩存到redis(hash-key為access\_token,sub-key為手機號,value為設備唯一編號(根據手機號碼,可以人工廢除全部token),設置access_token過期時間為7天,保證最終所有token都能刪除),返回後,客戶端緩存此token;

2.使用access\_token請求介面資源,校驗成功且redis中存在該access\_token(未廢除)則調用成功;如果token超時,中間件刪除access\_token(廢除),同時生成新的access\_token並返回。客戶端收到新的access_token, 

再次請求介面資源。

3.客戶端退出登錄或修改密碼後,調用中間件注銷舊的token(中間件刪除access\_token(廢除)),同時清空客戶端側的access\_token。

4.以上2 可以增加根據登錄時間判斷最長X時間必須重新登錄,此時則拒絕刷新token。(拒絕的場景:長時間未登錄,頻繁刷新)

5.如手機丟失,可以根據手機號人工廢除指定用戶設備關聯的token。

3.0 變動

1.登錄 

2.登錄攔截器 

3.退出登錄 

4.修改密碼

1.3 場景:token過期重新登錄 長時間未使用需重新登錄

1.登錄成功,後台jwt生成access\_token(jwt有效期7天),並緩存到redis,key為 "user\_id:access\_token",value為access\_token(根據用戶id,可以人工廢除指定用戶全部token),設置緩存過期時間為7天,保證最終所有token都能刪除,請求返回後,客戶端緩存此access_token;

2.使用access\_token請求介面資源,校驗成功且redis中存在該access\_token(未廢除)則調用成功;如果token超時,中間件刪除access\_token(廢除),同時生成新的access\_token並返回。客戶端收到新的access_token, 

再次請求介面資源。

3.客戶端退出登錄或修改密碼後,調用中間件注銷舊的token(中間件刪除access\_token(廢除)),同時清空客戶端側的access\_token。

4.以上2 可以增加根據登錄時間判斷最長X時間必須重新登錄,此時則拒絕刷新token。(拒絕的場景:長時間未登錄,頻繁刷新)

5.如手機丟失,可以根據手機號人工廢除指定用戶設備關聯的token。

1.3 變動

1.登錄 

2.登錄攔截器 

3.退出登錄 

4.修改密碼

# 解決方案

2.0 場景: access\_token訪問資源 refresh\_token授權訪問 設置固定時間X必須重新登錄

1.登錄成功,後台jwt生成access\_token(jwt有效期30分鍾)和refresh\_token(jwt有效期15天),並緩

存到redis(hash-key為token,sub-key為手機號,value為設備唯一編號(根據手機號碼,可以人工廢除全

部token,也可以根據sub-key,廢除部分設備的token。),設置過期時間為1個月,保證最終所有token都

能刪除),返回後,客戶端緩存此兩種token;

2.使用access\_token請求介面資源,校驗成功且redis中存在該access\_token(未廢除)則調用成功;如果

token超時,中間件刪除access\_token(廢除);客戶端再次攜帶refresh\_token調用中間件介面獲取新的

access_token;

3.中間件接受刷新token的請求後,檢查refresh_token是否過期。

如過期,拒絕刷新,刪除refresh_token(廢除); 客戶端收到該狀態後,跳轉到登錄頁;

如未過期,檢查緩存中是否有refresh\_token(是否被廢除),如果有,則生成新的access\_token並返回給

客戶端,客戶端接著攜帶新的access_token重新調用上面的資源介面。

4.客戶端退出登錄或修改密碼後,調用中間件注銷舊的token(中間件刪除access\_token和refresh\_token(

廢除)),同時清空客戶端側的access\_token和refresh\_toke。

5.如手機丟失,可以根據手機號人工廢除指定用戶設備關聯的token。

6.以上3刷新access_token可以增加根據登錄時間判斷最長X時間必須重新登錄,此時則拒絕刷新token。(

拒絕的場景:失效,長時間未登錄,頻繁刷新)

2.0 變動

1.登錄

2.登錄攔截器

3.增加刷新access_token介面

4.退出登錄

5.修改密碼

3.0 場景:自動續期 長時間未使用需重新登錄

1.登錄成功,後台jwt生成access_token(jwt有效期30分鍾),並緩存到redis(hash-key為

access_token,sub-key為手機號,value為設備唯一編號(根據手機號碼,可以人工廢除全部token,也可以

根據sub-key,廢除部分設備的token。),設置access_token過期時間為1個月,保證最終所有token都能刪

除),返回後,客戶端緩存此token;

2.使用access\_token請求介面資源,校驗成功且redis中存在該access\_token(未廢除)則調用成功;如果

token超時,中間件刪除access\_token(廢除),同時生成新的access\_token並返回。客戶端收到新的

access_token,

再次請求介面資源。

3.客戶端退出登錄或修改密碼後,調用中間件注銷舊的token(中間件刪除access_token(廢除)),同時清

空客戶端側的access_token。

4.以上2 可以增加根據登錄時間判斷最長X時間必須重新登錄,此時則拒絕刷新token。(拒絕的場景:長

時間未登錄,頻繁刷新)

5.如手機丟失,可以根據手機號人工廢除指定用戶設備關聯的token。

3.0 變動

1.登錄

2.登錄攔截器

3.退出登錄

4.修改密碼

4.0 場景:token過期重新登錄 長時間未使用需重新登錄

1.登錄成功,後台jwt生成access_token(jwt有效期7天),並緩存到redis,key為

"user\_id:access\_token" + 用戶id,value為access_token(根據用戶id,可以人工廢除指定用戶全部

token),設置緩存過期時間為7天,保證最終所有token都能刪除,請求返回後,客戶端緩存此

access_token;

2.使用access\_token請求介面資源,校驗成功且redis中存在該access\_token(未廢除)則調用成功;如果

token超時,中間件刪除access\_token(廢除),同時生成新的access\_token並返回。客戶端收到新的

access_token,

再次請求介面資源。

3.客戶端退出登錄或修改密碼後,調用中間件注銷舊的token(中間件刪除access_token(廢除)),同時清

空客戶端側的access_token。

4.以上2 可以增加根據登錄時間判斷最長X時間必須重新登錄,此時則拒絕刷新token。(拒絕的場景:長

時間未登錄,頻繁刷新)

5.如手機丟失,可以根據手機號人工廢除指定用戶設備關聯的token。

4.0 變動

1.登錄

2.登錄攔截器

3.退出登錄

4.修改密碼

## 最終實現

### 後端

1. 在登錄介面中 如果校驗賬號密碼成功 則根據用戶id和用戶類型創建jwt token(有效期設置為-1,即永不過期),得到A

2. 更新登錄日期(當前時間new Date()即可)(業務上可選),得到B

3. 在redis中緩存key為ACCESS_TOKEN:userId:A(加上A是為了防止用戶多個客戶端登錄 造成token覆蓋),value為B的毫秒數(轉換成字元串類型),過期時間為7天(7 * 24 * 60 * 60)

4. 在登錄結果中返回json格式為{"result":"success","token": A}

5. 用戶在介面請求header中攜帶token進行登錄,後端在所有介面前置攔截器進行攔截,作用是解析token 拿到userId和用戶類型(用戶調用業務介面只需要傳token即可),

如果解析失敗(拋出SignatureException),則返回json(code = 0 ,info= Token驗證不通過, errorCode = '1001');

此外如果解析成功,驗證redis中key為ACCESS_TOKEN:userId:A 是否存在 如果不存在 則返回json(code = 0 ,info= 會話過期請重新登錄, errorCode = '1002');

如果緩存key存在,則自動續7天超時時間(value不變),實現頻繁登錄用戶免登陸。

6. 把userId和用戶類型放入request參數中 介面方法中可以直接拿到登錄用戶信息

7. 如果是修改密碼或退出登錄 則廢除access_tokens(刪除key)

### 前端(VUE)

1. 用戶登錄成功,則把username存入cookie中,key為loginUser;把token存入cookie中,key為accessToken

  把token存入Vuex全局狀態中

2. 進入首頁

C. JWT token封裝以及自動刷新方案建議

什麼是JWT

pom.xml

JWTUtil.java

用戶登錄操作

在前後分離場景下,越來越多的項目使用jwt token作為介面的安全機制,但存在jwt過期後,用戶無法直接感知,假如在用戶操作頁面期間,突然提示登錄,則體驗很不友好,所以就有了token自動刷新需求;

方案:前端控制檢測token,無感知刷新

用戶登錄成功的時候,一次性給他兩個Token,分別為AccessToken和RefreshToken

AccessToken有效期較短,比如1天或者5天,用於正常請求

RefreshToken有效期可以設置長一些,例如10天、20天,作為刷新AccessToken的憑證

刷新方案:當AccessToken即將過期的時候,例如提前30分鍾,客戶端利用RefreshToken請求指定的API獲取新的AccessToken並更新本地存儲中的AccessToken

核心邏輯

1、登錄成功後,jwt生成AccessToken; UUID生成RefreshToken並存儲在服務端redis中,設置過期時間

2、介面返回3個欄位AccessToken/RefreshToken/訪問令牌過期時間戳

3、由於RefreshToken存儲在服務端redis中,假如這個RefreshToken也過期,則提示重新登錄;

老王的疑問:RefreshToken有效期那麼長,和直接將AccessToken的有效期延長有什麼區別

答:RefreshToken不像AccessToken那樣在大多數請求中都被使用,主要是本地檢測accessToken快過期的時候才使用,

一般本地存儲的時候,也不叫refreshToken,前端可以取個別名,混淆代碼讓攻擊者不能直接識別這個就是刷新令牌

缺點:前端每次請求需要判斷token距離過期時間

優點:後端壓力小,代碼邏輯改動不大

刷新token方法未實現。

D. JWT-token—前後端分離架構的api安全問題

前後端分離架構帶來的好處一搜一大堆,我們來看一下分離後後端介面的安全問題。
前後端分離架構現狀:

這樣的情況後端api是暴露在外網中,因為常規的web項目無論如何前端都是要通過公網訪問到後台api的,帶來的隱患也有很多。
1.介面公開,誰都可以訪問
2.數據請求的參數在傳輸過程被篡改
3.介面被重復調用
...

session和cookie都是客戶端與服務端通訊需要提供的認證,當客戶端的值和伺服器的值吻合時,才允許請求api,解決了第1個問題,但是當攻擊者獲取到了傳輸過程中的session或者cookie值後,就可以進行第2、3種攻擊了

JWT標準的token包含三部分:

頭部用於描述關於該JWT的最基本的信息,例如其類型以及簽名所用的演算法等

將上面的JSON對象進行 [base64編碼] 可以得到下面的字元串。這個字元串我們將它稱作JWT的Header

Payload也是一個JSON對象。包含了一些其他的信息

這裡面的前五個欄位都是由JWT的標准所定義的。

將上面的JSON對象進行 [base64編碼] 可以得到下面的字元串。這個字元串我們將它稱作JWT的Payload

將上面的兩個編碼後的字元串都用句號 . 連接在一起(頭部在前),就形成了

最後,我們將上面拼接完的字元串用 HS256演算法 進行加密。在加密的時候,我們還需要提供一個 密鑰(secret) 。如果我們用 mystar 作為密鑰的話,那麼就可以得到我們加密後的內容

這一部分叫做 簽名

最後將這一部分簽名也拼接在被簽名的字元串後面,我們就得到了完整的JWT

簽名解決了數據傳輸過程中參數被篡改的風險
一般而言,加密演算法對於不同的輸入產生的輸出總是不一樣的,如果有人 對Header以及Payload的內容解碼之後進行修改,再進行編碼的話,那麼新的頭部和載荷的簽名和之前的簽名就將是不一樣的。 而且,如果不知道伺服器加密的時候用的密鑰的話,得出來的簽名也一定會是不一樣的。

解決了篡改數據的問題,還有第3個問題,那就是攻擊者不修改數據,只是重復攻擊

比如在瀏覽器端通過用戶名/密碼驗證獲得簽名的Token被木馬竊取。即使用戶登出了系統,黑客還是可以利用竊取的Token模擬正常請求,而伺服器端對此完全不知道, 因為JWT機制是無狀態的。

可以在Payload里增加時間戳並且前後端都參與來解決:

E. ID Token - JWT

我們來繼續前兩章( OAuth2 總結 , 對OpenID Connect的理解 )的討論,進入對JWT的理解。先來簡單回顧一下OAuth2和OpenID:

OpenID建立在OAuth之上,完成了認證和授權。而認證和授權的結果就體現在這個ID token之上,而這個ID token通常會是JWT。那麼為什麼會是JWT呢?我們通過以下幾點來逐一解釋。

JWT RFC 7519 給出了官方定義的一些欄位:

當然也不限於此,可以根據自己的需要,添加其他欄位。到此,我們可以看出JWT提供了ID token所需要的能力。一個完整的JTW是由三部分組成:Header,Payload,Signature。三者之間由 . 隔開,剛才提到的認證授權的欄位就存在於Payload中。
Header中存放的是JTW的元數據,包含簽名的演算法以及token的類型,如下所示:

Signature部分是對前兩部分的簽名, 防止數據篡改 。首先,需要指定一個密鑰(secret)。這個密鑰只有伺服器才知道,不能泄露給用戶。然後,使用 Header 裡面指定的簽名演算法(默認是 HMAC SHA256),按照下面的公式產生簽名。

算出簽名以後,把 Header、Payload、Signature三個部分經過base64序列化為三個字元串,再講三個字元串由 . 為間隔拼接成一個字元串返回給客戶端。

ID Token需要有足夠的安全性,JWT是如何做到的呢?
剛看到了簽名部分,簽名的作用只是為了防止數據篡改,而JWT默認是不加密,但也是可以加密的。生成原始 Token 以後,可以用密鑰再加密一次。比如認證伺服器中使用私鑰進行加密,把公鑰分發給其他應用伺服器,應用服務拿到加密後的token後用公鑰解密,獲取到JWT,再用簽名的秘鑰來驗證數據是否經過的篡改。

我們來看看還有神馬其他備選么?Simple Web Tokens (SWT)和Security Assertion Markup Language Tokens (SAML)。
JWT vs SAML:JWT基於json,而SAML基於XML,在大小上就有足夠的優勢,更適用於HTML和HTTP。
JWT vs SWT:在安全性上,SWT只支持對稱加密,而JWT和SAML支持公私鑰的加密方式。

作為一個mobile developer,也想在這里對比一下原先的簡單token模式和SSO中的JWT:
在沒有該機制前,我們通常會使用一個隨機產生的字元串作為token,認證成功後返回給前端,之後前端的每個請求帶上這個token。若後台服務的是個單體應用沒有什麼問題,請求來了,驗證一下token是否有效即可,但當認證服務和其他的應用服務是分離的,怎麼做呢?應用服務受到請求,再向認證服務發起一個請求來驗證驗證token是否合法,是否有許可權訪問該應用服務。這樣做到沒有什麼問題,只是當服務變多時,比如微服務下,勢必會造成認證伺服器的壓力過大。
在使用該機制後,客戶端通過認證服務登錄,獲得這個JWT,之後其他應用服務自身便可以驗證這個token的是否有效,是否有權訪問。

看似完美,但也有它自身的問題,我們來看一個場景:許可權變更。某用戶原先是一個超級管理員,可以訪問所有服務,並可進行任意的刪除,更改操作,他在這個狀態下拿到了JWT。隨後,由於許可權更改為普通管理員,便不應該具有所有許可權,但此時他開始時的JWT被緩存在客戶端仍然可用,其他應用服務也並無法知道這個用戶的許可權已經被更改,後果可想而知了。解決的方式無非是將這個token的有效時間設置的短一些。