新聞動態(tài)
前端鑒權(quán)必須了解的 5 個(gè)兄弟:cookie、session、token、jwt、單點(diǎn)登錄
常見問題 發(fā)布者:ou3377 2021-12-24 08:56 訪問量:246
本文你將看到:
「HTTP 無狀態(tài)」我們知道,HTTP 是無狀態(tài)的。也就是說,HTTP 請求方和響應(yīng)方間無法維護(hù)狀態(tài),都是一次性的,它不知道前后的請求都發(fā)生了什么。但有的場景下,我們需要維護(hù)狀態(tài)。最典型的,一個(gè)用戶登陸微博,發(fā)布、關(guān)注、評論,都應(yīng)是在登錄后的用戶狀態(tài)下的。「標(biāo)記」那解決辦法是什么呢?::標(biāo)記::。 在學(xué)?;蚬?,入學(xué)入職那一天起,會錄入你的身份、賬戶信息,然后給你發(fā)個(gè)卡,今后在園區(qū)內(nèi),你的門禁、打卡、消費(fèi)都只需要刷這張卡。 「前端存儲」這就涉及到一發(fā)、一存、一帶,發(fā)好辦,登陸接口直接返回給前端,存儲就需要前端想辦法了。 前提是,你要把卡帶在身上。 前端的存儲方式有很多。 可是前端好麻煩啊,又要自己存,又要想辦法帶出去,有沒有不用操心的? 有,cookie。cookie 也是前端存儲的一種,但相比于 localStorage 等其他方式,借助 HTTP 頭、瀏覽器能力,cookie 可以做到前端無感知。一般過程是這樣的: 「配置:Domain / Path」 你不能拿清華的校園卡進(jìn)北大。 cookie 是要限制::「空間范圍」::的,通過 Domain(域)/ Path(路徑)兩級。 Domain屬性指定瀏覽器發(fā)出 HTTP 請求時(shí),哪些域名要附帶這個(gè) Cookie。如果沒有指定該屬性,瀏覽器會默認(rèn)將其設(shè)為當(dāng)前 URL 的一級域名,比如 www.example.com 會設(shè)為 example.com,而且以后如果訪問example.com的任何子域名,HTTP 請求也會帶上這個(gè) Cookie。如果服務(wù)器在Set-Cookie字段指定的域名,不屬于當(dāng)前域名,瀏覽器會拒絕這個(gè) Cookie。Path屬性指定瀏覽器發(fā)出 HTTP 請求時(shí),哪些路徑要附帶這個(gè) Cookie。只要瀏覽器發(fā)現(xiàn),Path屬性是 HTTP 請求路徑的開頭一部分,就會在頭信息里面帶上這個(gè) Cookie。比如,PATH屬性是/,那么請求/docs路徑也會包含該 Cookie。當(dāng)然,前提是域名必須一致。—— Cookie — JavaScript 標(biāo)準(zhǔn)參考教程(alpha) 「配置:Expires / Max-Age」 你畢業(yè)了卡就不好使了。 cookie 還可以限制::「時(shí)間范圍」::,通過 Expires、Max-Age 中的一種。 Expires屬性指定一個(gè)具體的到期時(shí)間,到了指定時(shí)間以后,瀏覽器就不再保留這個(gè) Cookie。它的值是 UTC 格式。如果不設(shè)置該屬性,或者設(shè)為null,Cookie 只在當(dāng)前會話(session)有效,瀏覽器窗口一旦關(guān)閉,當(dāng)前 Session 結(jié)束,該 Cookie 就會被刪除。另外,瀏覽器根據(jù)本地時(shí)間,決定 Cookie 是否過期,由于本地時(shí)間是不精確的,所以沒有辦法保證 Cookie 一定會在服務(wù)器指定的時(shí)間過期。Max-Age屬性指定從現(xiàn)在開始 Cookie 存在的秒數(shù),比如60 * 60 * 24 * 365(即一年)。過了這個(gè)時(shí)間以后,瀏覽器就不再保留這個(gè) Cookie。如果同時(shí)指定了Expires和Max-Age,那么Max-Age的值將優(yōu)先生效。如果Set-Cookie字段沒有指定Expires或Max-Age屬性,那么這個(gè) Cookie 就是 Session Cookie,即它只在本次對話存在,一旦用戶關(guān)閉瀏覽器,瀏覽器就不會再保留這個(gè) Cookie?!?Cookie — JavaScript 標(biāo)準(zhǔn)參考教程(alpha) 「配置:Secure / HttpOnly」 有的學(xué)校規(guī)定,不帶卡套不讓刷(什么奇葩學(xué)校,假設(shè));有的學(xué)校不讓自己給卡貼貼紙。 cookie 可以限制::「使用方式」::。 Secure屬性指定瀏覽器只有在加密協(xié)議 HTTPS 下,才能將這個(gè) Cookie 發(fā)送到服務(wù)器。另一方面,如果當(dāng)前協(xié)議是 HTTP,瀏覽器會自動忽略服務(wù)器發(fā)來的Secure屬性。該屬性只是一個(gè)開關(guān),不需要指定值。如果通信是 HTTPS 協(xié)議,該開關(guān)自動打開。HttpOnly屬性指定該 Cookie 無法通過 JavaScript 腳本拿到,主要是Document.cookie屬性、XMLHttpRequest對象和 Request API 都拿不到該屬性。這樣就防止了該 Cookie 被腳本讀到,只有瀏覽器發(fā)出 HTTP 請求時(shí),才會帶上該 Cookie?!?Cookie — JavaScript 標(biāo)準(zhǔn)參考教程(alpha) 「HTTP 頭對 cookie 的讀寫」回過頭來,HTTP 是如何寫入和傳遞 cookie 及其配置的呢?HTTP 返回的一個(gè) Set-Cookie 頭用于向?yàn)g覽器寫入「一條(且只能是一條)」cookie,格式為 cookie 鍵值 + 配置鍵值。例如: 那我想一次多 set 幾個(gè) cookie 怎么辦?多給幾個(gè) Set-Cookie 頭(一次 HTTP 請求中允許重復(fù)) HTTP 請求的 Cookie 頭用于瀏覽器把符合當(dāng)前「空間、時(shí)間、使用方式」配置的所有 cookie 一并發(fā)給服務(wù)端。因?yàn)橛蔀g覽器做了篩選判斷,就不需要?dú)w還配置內(nèi)容了,只要發(fā)送鍵值就可以。 「前端對 cookie 的讀寫」前端可以自己創(chuàng)建 cookie,如果服務(wù)端創(chuàng)建的 cookie 沒加 調(diào)用 現(xiàn)在回想下,你刷卡的時(shí)候發(fā)生了什么? 其實(shí)你的卡上只存了一個(gè) id(可能是你的學(xué)號),刷的時(shí)候物業(yè)系統(tǒng)去查你的信息、賬戶,再決定「這個(gè)門你能不能進(jìn)」「這個(gè)雞腿去哪個(gè)賬戶扣錢」。 這種操作,在前后端鑒權(quán)系統(tǒng)中,叫 session。典型的 session 登陸/驗(yàn)證流程: 「Session 的存儲方式」顯然,服務(wù)端只是給 cookie 一個(gè) sessionId,而 session 的具體內(nèi)容(可能包含用戶信息、session 狀態(tài)等),要自己存一下。存儲的方式有幾種: 「Session 的過期和銷毀」很簡單,只要把存儲的 session 數(shù)據(jù)銷毀就可以。「Session 的分布式問題」通常服務(wù)端是集群,而用戶請求過來會走一次負(fù)載均衡,不一定打到哪臺機(jī)器上。那一旦用戶后續(xù)接口請求到的機(jī)器和他登錄請求的機(jī)器不一致,或者登錄請求的機(jī)器宕機(jī)了,session 不就失效了嗎?這個(gè)問題現(xiàn)在有幾種解決方式。 但通常還是采用第一種方式,因?yàn)榈诙N相當(dāng)于閹割了負(fù)載均衡,且仍沒有解決「用戶請求的機(jī)器宕機(jī)」的問題。「node.js 下的 session 處理」前面的圖很清楚了,服務(wù)端要實(shí)現(xiàn)對 cookie 和 session 的存取,實(shí)現(xiàn)起來要做的事還是很多的。在 express-session - npm 主要實(shí)現(xiàn)了: session 的維護(hù)給服務(wù)端造成很大困擾,我們必須找地方存放它,又要考慮分布式的問題,甚至要單獨(dú)為了它啟用一套 Redis 集群。有沒有更好的辦法? 我又想到學(xué)校,在沒有校園卡技術(shù)以前,我們都靠「學(xué)生證」。門衛(wèi)小哥直接對照我和學(xué)生證上的臉,確認(rèn)學(xué)生證有效期、年級等信息,就可以放行了。 回過頭來想想,一個(gè)登錄場景,也不必往 session 存太多東西,那為什么不直接打包到 cookie 中呢?這樣服務(wù)端不用存了,每次只要核驗(yàn) cookie 帶的「證件」有效性就可以了,也可以攜帶一些輕量的信息。這種方式通常被叫做 token。 token 的流程是這樣的: 「客戶端 token 的存儲方式」在前面 cookie 說過,cookie 并不是客戶端存儲憑證的唯一方式。token 因?yàn)樗摹笩o狀態(tài)性」,有效期、使用限制都包在 token 內(nèi)容里,對 cookie 的管理能力依賴較小,客戶端存起來就顯得更自由。但 web 應(yīng)用的主流方式仍是放在 cookie 里,畢竟少操心。「token 的過期」那我們?nèi)绾慰刂?token 的有效期呢?很簡單,把「過期時(shí)間」和數(shù)據(jù)一起塞進(jìn)去,驗(yàn)證時(shí)判斷就好。 編碼的方式豐儉由人。「base64」比如 node 端的 cookie-session - npm 庫 不要糾結(jié)名字,其實(shí)是個(gè) token 庫,但保持了和 express-session - npm 高度一致的用法,把要存的數(shù)據(jù)掛在 session 上 默認(rèn)配置下,當(dāng)我給他一個(gè) userid,他會存成這樣: 這里的 那問題來了,如果用戶 cdd 拿 是的。所以看情況,如果 token 涉及到敏感權(quán)限,就要想辦法避免 token 被篡改。解決方案就是給 token 加簽名,來識別 token 是否被篡改過。例如在 cookie-session - npm 庫中,增加兩項(xiàng)配置: 這樣會多種一個(gè) .sig cookie,里面的值就是 好了,現(xiàn)在 cdd 雖然能偽造出 JSON Web Token (JWT) 是一個(gè)開放標(biāo)準(zhǔn),定義了一種傳遞 JSON 信息的方式。這些信息通過數(shù)字簽名確??尚拧?/p> 它是一種成熟的 token 字符串生成方案,包含了我們前面提到的數(shù)據(jù)、簽名。不如直接看一下一個(gè) JWT token 長什么樣: 這串東西是怎么生成的呢?看圖: 類型、加密算法的選項(xiàng),以及 JWT 標(biāo)準(zhǔn)數(shù)據(jù)字段,可以參考 RFC 7519 - JSON Web Token (JWT)node 上同樣有相關(guān)的庫實(shí)現(xiàn):express-jwt - npm koa-jwt - npm token,作為權(quán)限守護(hù)者,最重要的就是「安全」。業(yè)務(wù)接口用來鑒權(quán)的 token,我們稱之為 access token。越是權(quán)限敏感的業(yè)務(wù),我們越希望 access token 有效期足夠短,以避免被盜用。但過短的有效期會造成 access token 經(jīng)常過期,過期后怎么辦呢?一種辦法是,讓用戶重新登錄獲取新 token,顯然不夠友好,要知道有的 access token 過期時(shí)間可能只有幾分鐘。另外一種辦法是,再來一個(gè) token,一個(gè)專門生成 access token 的 token,我們稱為 refresh token。 有了 refresh token 后,幾種情況的請求流程變成這樣: 如果 refresh token 也過期了,就只能重新登錄了。 session 和 token 都是邊界很模糊的概念,就像前面說的,refresh token 也可能以 session 的形式組織維護(hù)。狹義上,我們通常認(rèn)為 session 是「種在 cookie 上、數(shù)據(jù)存在服務(wù)端」的認(rèn)證方案,token 是「客戶端存哪都行、數(shù)據(jù)存在 token 里」的認(rèn)證方案。對 session 和 token 的對比本質(zhì)上是「客戶端存 cookie / 存別地兒」、「服務(wù)端存數(shù)據(jù) / 不存數(shù)據(jù)」的對比。「客戶端存 cookie / 存別地兒」存 cookie 固然方便不操心,但問題也很明顯: 存別的地方,可以解決沒有 cookie 的場景;通過參數(shù)等方式手動帶,可以避免 CSRF 攻擊。「服務(wù)端存數(shù)據(jù) / 不存數(shù)據(jù)」 前面我們已經(jīng)知道了,在同域下的客戶端/服務(wù)端認(rèn)證系統(tǒng)中,通過客戶端攜帶憑證,維持一段時(shí)間內(nèi)的登錄狀態(tài)。但當(dāng)我們業(yè)務(wù)線越來越多,就會有更多業(yè)務(wù)系統(tǒng)分散到不同域名下,就需要「一次登錄,全線通用」的能力,叫做「單點(diǎn)登錄」。 簡單的,如果業(yè)務(wù)系統(tǒng)都在同一主域名下,比如 比如滴滴這么潮的公司,同時(shí)擁有 「完整版本:考慮瀏覽器的場景」上面的過程看起來沒問題,實(shí)際上很多 APP 等端上這樣就夠了。但在瀏覽器下不見得好用??催@里: 對瀏覽器來說,SSO 域下返回的數(shù)據(jù)要怎么存,才能在訪問 A 的時(shí)候帶上?瀏覽器對跨域有嚴(yán)格限制,cookie、localStorage 等方式都是有域限制的。這就需要也只能由 A 提供 A 域下存儲憑證的能力。一般我們是這么做的: 圖中我們通過顏色把瀏覽器當(dāng)前所處的域名標(biāo)記出來。注意圖中灰底文字說明部分的變化。從狀態(tài)說起
前端存儲這里不展開了。有地方存了,請求的時(shí)候就可以拼到參數(shù)里帶給接口了。
基石:cookie
Set-Cookie: username=jimu; domain=jimu.com; path=/blog; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
Set-Cookie: username=jimu; domain=jimu.com
Set-Cookie: height=180; domain=me.jimu.com
Set-Cookie: weight=80; domain=me.jimu.com Cookie: username=jimu; height=180; weight=80
HttpOnly
,那恭喜你也可以修改他給的 cookie。調(diào)用document.cookie
可以創(chuàng)建、修改 cookie,和 HTTP 一樣,一次document.cookie
能且只能操作一個(gè) cookie。document.cookie = 'username=jimu; domain=jimu.com; path=/blog; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly';
document.cookie
也可以讀到 cookie,也和 HTTP 一樣,能讀到所有的非HttpOnly
cookie。console.log(document.cookie);
// username=jimu; height=180; weight=80 (就一個(gè) cookie 屬性,為什么讀寫行為不一樣?get / set 了解下)「cookie 是維持 HTTP 請求狀態(tài)的基石」了解了 cookie 后,我們知道 cookie 是最便捷的維持 HTTP 請求狀態(tài)的方式,大多數(shù)前端鑒權(quán)問題都是靠 cookie 解決的。當(dāng)然也可以選用別的存儲方式(后面也會多多少少提到)。那有了存儲工具,接下來怎么做呢?
應(yīng)用方案:服務(wù)端 session
npm
中,已經(jīng)有封裝好的中間件,比如 express-session - npm,用法就不貼了。這是它種的 cookie:應(yīng)用方案:token
token 的編碼
eyJ1c2VyaWQiOiJhIn0=
,就是 {"userid":"abb”}
的 base64 而已。「防篡改」{"userid":"abb”}
轉(zhuǎn)了個(gè) base64,再手動修改了自己的 token 為 eyJ1c2VyaWQiOiJhIn0=
,是不是就能直接訪問到 abb 的數(shù)據(jù)了?secret: 'iAmSecret',signed: true,
{"userid":"abb”}
和 iAmSecret
通過加密算法計(jì)算出來的,常見的比如HMACSHA256 類 (System.Security.Cryptography) | Microsoft Docs。eyJ1c2VyaWQiOiJhIn0=
,但偽造不出 sig 的內(nèi)容,因?yàn)樗恢?secret。「JWT」但上面的做法額外增加了 cookie 數(shù)量,數(shù)據(jù)本身也沒有規(guī)范的格式,所以 JSON Web Token Introduction - jwt.io 橫空出世了。eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaWQiOiJhIiwiaWF0IjoxNTUxOTUxOTk4fQ.2jf3kl_uKWRkwjOP6uQRJFqMlwSABcgqqcJofFH5XCo
refresh token
session 和 token
單點(diǎn)登錄
“虛假”的單點(diǎn)登錄(主域名相同)
wenku.baidu.com
tieba.baidu.com
,就好辦了??梢灾苯影?cookie domain 設(shè)置為主域名 baidu.com
,百度也就是這么干的。“真實(shí)”的單點(diǎn)登錄(主域名不同)
didichuxing.com
xiaojukeji.com
didiglobal.com
等域名,種 cookie 是完全繞不開的。這要能實(shí)現(xiàn)「一次登錄,全線通用」,才是真正的單點(diǎn)登錄。這種場景下,我們需要獨(dú)立的認(rèn)證服務(wù),通常被稱為 SSO。「一次「從 A 系統(tǒng)引發(fā)登錄,到 B 系統(tǒng)不用登錄」的完整流程」總結(jié)
轉(zhuǎn)自:Henrylulu
【推薦閱讀】
轉(zhuǎn)化設(shè)置:頁面轉(zhuǎn)化、頁面轉(zhuǎn)化目標(biāo)設(shè)置和目標(biāo)URL設(shè)置
前端鑒權(quán)必須了解的 5 個(gè)兄弟:cookie、session、token、jwt、單點(diǎn)登錄
關(guān)鍵字: cookie、session、token、jwt、單點(diǎn)登錄
文章連接: http://m.hsjyfc.com.cn/cjwt/854.html
版權(quán)聲明:文章由 晨展科技 整理收集,來源于互聯(lián)網(wǎng)或者用戶投稿,如有侵權(quán),請聯(lián)系我們,我們會立即刪除。如轉(zhuǎn)載請保留