對(duì)于許多前端開發(fā)者來說，下面這行代碼可能已經(jīng)形成了肌肉記憶：

簡(jiǎn)單、直接、有效。多年來，將 JWT (JSON Web Token) 存儲(chǔ)在 localStorage 中，似乎是前后端分離架構(gòu)下的“標(biāo)準(zhǔn)答案”。然而，隨著網(wǎng)絡(luò)安全威脅的不斷演進(jìn)，這個(gè)曾經(jīng)的“最佳實(shí)踐”如今已然成為一個(gè)巨大的安全隱患。

2025 年即將到來，前端生態(tài)日新月異。如果我們還在沿用舊的鑒權(quán)模式，無(wú)異于將我們精心構(gòu)建的應(yīng)用暴露在風(fēng)險(xiǎn)之中。是時(shí)候更新我們的知識(shí)庫(kù)，擁抱更安全的鑒權(quán)新思路了。

localStorage 的“原罪”：為何它不再安全？

localStorage 的核心問題在于其脆弱的安全性，這主要體MAT現(xiàn)在對(duì) XSS (Cross-Site Scripting, 跨站腳本攻擊) 的無(wú)力抵抗上。

什么是 XSS 攻擊？

簡(jiǎn)單來說，XSS 攻擊是指攻擊者設(shè)法在我們的網(wǎng)站上注入并執(zhí)行了惡意的 JavaScript 腳本。注入的途徑多種多樣，可能是一個(gè)被用戶渲染的惡意評(píng)論，也可能是一個(gè)包含惡意代碼的 URL 參數(shù)。

XSS 如何竊取 localStorage 中的 Token？

一旦惡意腳本在我們的頁(yè)面上成功執(zhí)行，它就擁有了與我們自己的前端代碼幾乎完全相同的權(quán)限。這意味著：

它可以輕松訪問 localStorage！

攻擊者只需要注入一行簡(jiǎn)單的代碼，就可以將我們存儲(chǔ)的 JWT 發(fā)送到他自己的服務(wù)器上：

一旦 Token 被盜，攻擊者就可以冒充我們的用戶，為所欲為。所有依賴于這個(gè) Token 的后端接口都將對(duì)攻擊者敞開大門。這無(wú)疑是毀滅性的。

結(jié)論： localStorage 本質(zhì)上是一個(gè)對(duì) JavaScript 完全開放的沙盒。任何能夠在我們頁(yè)面上執(zhí)行的腳本，都能讀寫其中的所有數(shù)據(jù)。將敏感的、具有用戶身份憑證的 JWT 存放在這里，就像把家門鑰匙掛在了門外的釘子上——方便了自己，也方便了小偷。

“老派紳士”：HttpOnly Cookie——完美的解決方案嗎？

為了解決 XSS 盜取 Token 的問題，社區(qū)很早就提出了一個(gè)經(jīng)典的方案：使用 HttpOnly Cookie。

當(dāng)服務(wù)器在設(shè)置 Cookie 時(shí)，如果添加了 HttpOnly 標(biāo)志，那么這個(gè) Cookie 將無(wú)法通過客戶端 JavaScript (document.cookie) 來訪問。瀏覽器只會(huì)在發(fā)送 HTTP 請(qǐng)求時(shí)自動(dòng)攜帶它。

優(yōu)點(diǎn)：

• 有效防御 XSS 盜取：由于 JS 無(wú)法讀取，XSS 攻擊者無(wú)法直接竊取 Token。
• 瀏覽器自動(dòng)管理：無(wú)需前端代碼手動(dòng)在每個(gè)請(qǐng)求頭中添加 Authorization。

但它也并非完美，帶來了新的挑戰(zhàn)：CSRF 攻擊。

什么是 CSRF 攻擊？

CSRF (Cross-Site Request Forgery, 跨站請(qǐng)求偽造) 是指攻擊者誘導(dǎo)用戶在一個(gè)已經(jīng)登錄的網(wǎng)站上，從一個(gè)惡意網(wǎng)站發(fā)起非本意的請(qǐng)求。

例如，我們登錄了 bank.com，瀏覽器保存了 bank.com 的 HttpOnly Cookie。此時(shí)，我們?cè)L問了一個(gè)惡意網(wǎng)站 evil.com，該網(wǎng)站上有一個(gè)自動(dòng)提交的表單，其目標(biāo)是 bank.com 的轉(zhuǎn)賬接口。當(dāng)我們打開 evil.com 時(shí)，瀏覽器會(huì)自動(dòng)攜帶 bank.com 的 Cookie 發(fā)起轉(zhuǎn)賬請(qǐng)求，從而在我們自己不知情的情況下完成轉(zhuǎn)賬。

解決方案：
幸運(yùn)的是，CSRF 也有成熟的防御手段：

1. SameSite 屬性：在設(shè)置 Cookie 時(shí)，將 SameSite 屬性設(shè)置為 Strict 或 Lax，可以有效阻止跨站請(qǐng)求攜帶 Cookie。
2. CSRF Token：服務(wù)器生成一個(gè)隨機(jī)的 CSRF Token，前端在每次發(fā)起狀態(tài)變更的請(qǐng)求時(shí)，都需要在請(qǐng)求體或請(qǐng)求頭中攜帶這個(gè) Token，服務(wù)器進(jìn)行驗(yàn)證。

HttpOnly Cookie 方案雖然可行，但要求后端進(jìn)行精細(xì)的 Cookie 配置和 CSRF 防御，對(duì)于現(xiàn)代前后端分離、特別是需要跨域調(diào)用的場(chǎng)景，配置會(huì)變得更加復(fù)雜。

2025 年的新浪潮：前端鑒權(quán)新思路

那么，有沒有既能有效防范 XSS，又能優(yōu)雅地適應(yīng)現(xiàn)代前端架構(gòu)的方案呢？答案是肯定的。以下是兩種值得在 2025 年及以后重點(diǎn)關(guān)注的鑒權(quán)模式。

思路一：BFF (Backend for Frontend) + Cookie

BFF 模式并非新技術(shù)，但它在解決前端鑒權(quán)困境上展現(xiàn)了巨大的威力。

核心思想：在前端應(yīng)用和后端微服務(wù)之間增加一個(gè)“服務(wù)于前端的后端”（BFF）。這個(gè) BFF 專門為我們的前端應(yīng)用服務(wù)，負(fù)責(zé)鑒權(quán)、API 聚合、數(shù)據(jù)轉(zhuǎn)換等。

鑒權(quán)流程：

1. 登錄：前端將用戶名密碼發(fā)送給 BFF。
2. 認(rèn)證與換取：BFF 將憑證發(fā)送給真正的認(rèn)證服務(wù)，獲取 JWT。
3. 設(shè)置安全 Cookie：BFF 并不將 JWT 返回給前端。取而代之，BFF 創(chuàng)建一個(gè)會(huì)話（Session），并將 Session ID 存儲(chǔ)在一個(gè)安全的、HttpOnly、SameSite=Strict 的 Cookie 中，返回給瀏覽器。
4. API 請(qǐng)求：前端向 BFF 發(fā)起所有 API 請(qǐng)求（例如 /api/user）。由于是同域請(qǐng)求（或配置了 withCredentials），瀏覽器會(huì)自動(dòng)攜帶上述 Session Cookie。
5. 代理與鑒權(quán)：BFF 收到請(qǐng)求后，通過 Session Cookie 找到對(duì)應(yīng)的會(huì)話和 JWT，然后將 JWT 添加到請(qǐng)求頭中，再將請(qǐng)求轉(zhuǎn)發(fā)給后端的微服務(wù)。

優(yōu)點(diǎn)：

• 極致安全：JWT 完全不暴露給前端，XSS 攻擊者無(wú)從竊取。
• 前端無(wú)感：前端開發(fā)者無(wú)需關(guān)心 Token 的存儲(chǔ)、刷新和攜帶，就像在使用傳統(tǒng)的 Session 一樣。
• 架構(gòu)清晰：BFF 層可以處理所有與安全和后端服務(wù)通信相關(guān)的復(fù)雜邏輯，讓前端更專注于 UI。

缺點(diǎn)：

• 增加了架構(gòu)復(fù)雜度：需要額外維護(hù)一個(gè) BFF 服務(wù)。

思路二：Service Worker + 內(nèi)存存儲(chǔ)

這是一個(gè)更“激進(jìn)”和“純前端”的方案，利用了 Service Worker 的強(qiáng)大能力。

核心思想：將 Token 的管理權(quán)完全交給 Service Worker，主線程（我們的 React/Vue 應(yīng)用）不直接接觸 Token。

鑒權(quán)流程：

1. 登錄：主線程登錄成功后，通過 postMessage 將獲取到的 JWT 發(fā)送給激活的 Service Worker。
2. 內(nèi)存存儲(chǔ)：Service Worker 接收到 Token 后，將其存儲(chǔ)在自身的作用域內(nèi)的一個(gè)變量中（即內(nèi)存中）。它不使用 localStorage 或 IndexedDB。
3. 攔截請(qǐng)求：前端應(yīng)用像往常一樣發(fā)起 fetch('/api/data') 請(qǐng)求，但不添加 Authorization 頭。
4. 注入 Token：Service Worker 監(jiān)聽 fetch 事件，攔截所有出站的 API 請(qǐng)求。它會(huì)克隆原始請(qǐng)求，并將內(nèi)存中存儲(chǔ)的 Token 添加到新請(qǐng)求的 Authorization 頭中。
5. 發(fā)送請(qǐng)求：Service Worker 將帶有 Token 的新請(qǐng)求發(fā)送到網(wǎng)絡(luò)。

優(yōu)點(diǎn)：

• 有效隔離：Token 存儲(chǔ)在 Service Worker 的獨(dú)立運(yùn)行環(huán)境中，與主線程的 window 對(duì)象隔離，常規(guī)的 XSS 腳本無(wú)法訪問 Service Worker 的內(nèi)部變量，安全性遠(yuǎn)高于 localStorage。
• 邏輯集中：Token 的刷新邏輯（Refresh Token）也可以封裝在 Service Worker 中，對(duì)應(yīng)用代碼完全透明。
• 無(wú)需額外服務(wù)：相比 BFF，這是一個(gè)純前端的解決方案。

缺點(diǎn)：

• 實(shí)現(xiàn)復(fù)雜：Service Worker 的生命周期和通信機(jī)制比 localStorage 復(fù)雜得多。
• 兼容性與穩(wěn)定性：需要考慮瀏覽器兼容性，以及 Service Worker 被意外終止或更新的場(chǎng)景。

方案對(duì)比：一圖勝千言

將 JWT 存儲(chǔ)在 localStorage 的時(shí)代正在過去。這并非危言聳聽，而是對(duì)日益嚴(yán)峻的網(wǎng)絡(luò)安全形勢(shì)的積極響應(yīng)。

• 對(duì)于新項(xiàng)目或有重構(gòu)計(jì)劃的項(xiàng)目，強(qiáng)烈建議采用 BFF + Cookie 模式。它雖然增加了架構(gòu)成本，但換來的是頂級(jí)的安全性和清晰的職責(zé)劃分，從長(zhǎng)遠(yuǎn)看是值得的。
• 對(duì)于追求極致前端技術(shù)或構(gòu)建 PWA 的團(tuán)隊(duì)，Service Worker 方案提供了一個(gè)充滿想象力的選擇，能夠?qū)踩吔缈刂圃谇岸藘?nèi)部。
• 如果我們的應(yīng)用規(guī)模較小，且暫時(shí)無(wú)法引入 BFF，那么退而求其次，HttpOnly Cookie 配合嚴(yán)格的 SameSite 策略和 CSRF Token，依然是比 localStorage 安全得多的可靠選擇。

閱讀原文：https://mp.weixin.qq.com/s/FQcneaqhlsLJvVRaDcB7Kg