如何在 react/next.js 應用程序中安全地存儲 JWT 令牌？

Question

我需要存儲在通過 REST API 正確注冊后有效用戶登錄時生成的 JWT 令牌。 我閱讀並找到了這些將 JWT 存儲在客戶端站點中的方法：本地存儲、會話存儲、cookie、HttpOnly cookie、瀏覽器內存（反應狀態）。

需要建議以正確的方法存儲 JWT，還可以訪問某些 API 以使用 JWT 令牌作為 post 請求標頭參數用戶相關數據獲取。

這是我的登錄代碼部分，此時我將 JWT 令牌存儲到 window 對象，之前保存在本地存儲中，但現在需要以除本地存儲或 cookie 之外的其他方式安全存儲。

const handleSubmitLogin = evt => {
evt.preventDefault();
var cart = new Cart();

var request = new NFRequest();
var response = request.api(HTTP_METHOD.POST, '/auth', {
    'email_address': allValuesLogin.email_login,
    'password': allValuesLogin.password_login,
    'cart_list': cart.getCartPostData(),
});
response.then((res) => {
    if (res.type === 'success') {
        window.$token = res.data.token
        setLoginSuccess('Successfully Login')
        setTimeout(()=> {
            setLoginSuccess('');
        }, 3000)
        cart.handle({ action_type: "RESET_ITEMS" });
        Router.push('/account')
    } else {
        setLoginError('Wrong Email or Password')
        setTimeout(()=> {
            setLoginError('');
        }, 3000);
    }
});
}

我在這里存儲 JWT 令牌： window.$token = res.data.token

謝謝你。

Answer 1

如何存儲它取決於您。 通常，這是最不安全的：

1. 瀏覽器內存
2. 僅 Http cookie
3. 本地存儲
4. 會話存儲/cookie

最重要的是確保您的網站免受 XSS 和 CSRF 攻擊。

Answer 2

當然，建議將 JWT 令牌存儲在 localStorage 或會話存儲中，在生產中應該使用適當的 SSL 證書來幫助防止這種情況，就像中間人攻擊一樣。

本地/會話也有不同的優勢

sessionStorage 在瀏覽器關閉后被刪除，但 localStorage 在選項卡之間共享。 這對於在選項卡之間共享狀態非常方便。 但是，您需要管理刪除 JWT 令牌。

Answer 3

更新：將 JWT 令牌存儲在本地存儲中不是一個好主意。

閱讀這篇文章 => https://www.rdegges.com/2018/please-stop-using-local-storage/

---

使用 localStorage 設置令牌

    if (res.type === 'success')
        localStorage.setItem('token', res.data.token);
        setLoginSuccess('Successfully Login')
        setTimeout(()=> {
            setLoginSuccess('');
        }, 3000)
        cart.handle({ action_type: "RESET_ITEMS" });
        Router.push('/account')
    } 

刪除您使用的令牌： localStorage.removeItem('token');