最安全的做法是將令牌儲存在應用程式狀態中。但是，需要注意的是，如果用戶刷新應用程序，令牌將被重置。這可能會導致用戶身份驗證狀態遺失。
這就是為什麼令牌需要儲存在 cookie 或 localStorage/sessionStorage 中。
localStorage VS 儲存 token 的 cookie
在 localStorage 中儲存身分驗證令牌可能會帶來安全風險，特別是在存在跨站腳本 (XSS) 漏洞的情況下，可能會導致惡意行為者竊取令牌。
選擇將令牌儲存在使用 HttpOnly 屬性配置的 cookie 中，可以增強安全性，因為客戶端 JavaScript 無法存取它們。在我們的範例應用程式中，我們利用 js-cookie 進行 cookie 管理，假設真正的 API 將強制執行 HttpOnly 屬性以增強安全性，且應用程式無法從客戶端存取 cookie。
使用 React 和 Typescript 實作
要在使用 js-cookie 的 React TypeScript 應用程式中實現安全性令牌管理，其中真正的 API 將強制執行 HttpOnly 屬性，您可以按照以下步驟操作：
1。了解設定
HttpOnly Cookie：這些 Cookie 由伺服器設置，無法透過 JavaScript 訪問，從而更安全地抵禦 XSS 攻擊。
假設：伺服器將處理 HttpOnly cookie 的設定和管理。您的客戶端程式碼將專注於透過 API 回應和請求處理令牌。
2。 React TypeScript 設定
首先，請確保您安裝了 js-cookie：
npm install js-cookie
登入後複製
3。設定令牌管理
import React, { createContext, useContext, useEffect, useState } from 'react';
import Cookies from 'js-cookie';
interface AuthContextType {
token: string | null;
login: (token: string) => void;
logout: () => void;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export const useAuth = () => {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within an AuthProvider');
}
return context;
};
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [token, setToken] = useState<string | null>(null);
// Assuming the token is returned from a server and set as an HttpOnly cookie
useEffect(() => {
const fetchTokenFromServer = async () => {
// Example API call to authenticate and retrieve token (token management handled by server)
try {
const response = await fetch('/api/authenticate', {
method: 'POST',
credentials: 'include', // This sends the HttpOnly cookie to the server
});
if (response.ok) {
setToken(await response.text()); // Assume token returned in response body for simplicity
}
} catch (error) {
console.error('Error fetching token:', error);
}
};
fetchTokenFromServer();
}, []);
const login = (token: string) => {
// If your server returns the token via a non-HttpOnly cookie or body, store it as needed
Cookies.set('token', token); // Only use this if the token is not HttpOnly
setToken(token);
};
const logout = () => {
Cookies.remove('token');
setToken(null);
};
return (
<AuthContext.Provider value={{ token, login, logout }}>
{children}
</AuthContext.Provider>
);
};
登入後複製
4。在組件中使用身份驗證上下文
import React from 'react';
import { useAuth } from './AuthProvider';
const Dashboard: React.FC = () => {
const { token, logout } = useAuth();
if (!token) {
return <p>You are not logged in.</p>;
}
return (
<div>
<h1>Dashboard</h1>
<p>Your token is: {token}</p>
<button onClick={logout}>Logout</button>
</div>
);
};
export default Dashboard;
登入後複製
5。處理 HttpOnly Cookie
由於客戶端程式碼無法直接存取 HttpOnly cookie，因此伺服器必須處理這些 cookie。在現實場景中：
登入：使用者登入時，伺服器設定HttpOnly cookie，客戶端不直接管理。
API 請求：所有需要驗證的請求都應包含憑證：「include」選項以傳送 HttpOnly cookie。
6。伺服器端實作
確保您的伺服器端 API 將令牌設定為 HttpOnly cookie。例如，在 Express.js 伺服器中：
res.cookie('token', token, { httpOnly: true, secure: true, sameSite: 'Strict' });
登入後複製
7。保護您的應用程式
在生產中始終使用 https，以確保 cookie 安全傳輸。
考慮在 cookie 中設定 secure: true 以確保它們僅透過 HTTPS 傳送。
使用 SameSite=Strict 或 Lax 來防止 CSRF 攻擊。
感謝您的閱讀！如果您覺得這篇文章有幫助，請按讚。如果您對所討論的任何主題有任何疑問或需要進一步澄清，請隨時與我聯繫。我是來幫忙的，很想聽聽您的意見！您可以在 Twitter 或 LinkedIn 上找到我期待與您聯繫！ .
以上是Web 安全性：用於儲存令牌的 localStorage 與 cookie的詳細內容。更多資訊請關注PHP中文網其他相關文章！
