Web セキュリティ: トークンを保存するための localStorage と Cookie

最も安全な方法は、トークンをアプリケーション状態に保存することです。ただし、ユーザーがアプリケーションを更新すると、トークンがリセットされることに注意することが重要です。これにより、ユーザーの認証ステータスが失われる可能性があります。

そのため、トークンは Cookie または localStorage/sessionStorage に保存する必要があります。

localStorage VS トークンを保存するための Cookie

認証トークンを localStorage に保存すると、特にクロスサイト スクリプティング (XSS) の脆弱性のコンテキストでセキュリティ リスクが生じる可能性があり、悪意のある攻撃者によるトークンの盗難につながる可能性があります。

HttpOnly 属性で構成された Cookie にトークンを保存することを選択すると、クライアント側の JavaScript からトークンにアクセスできなくなるため、セキュリティを強化できます。私たちのサンプル アプリでは、実際の API がセキュリティ強化のために HttpOnly 属性を強制し、アプリケーションがクライアント側から Cookie にアクセスできないことを前提として、Cookie 管理に js-cookie を利用します。

React と Typescript を使用した実装

実際の API が HttpOnly 属性を強制する場合、js-cookie を使用して React TypeScript アプリケーションに安全なトークン管理を実装するには、次の手順に従います。

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 リクエスト: 認証が必要なすべてのリクエストには、認証情報を含める必要があります: HttpOnly Cookie を送信するための「include」オプション。

6.サーバー側の実装

サーバー側 API がトークンを HttpOnly Cookie として設定していることを確認します。たとえば、Express.js サーバーの場合:

res.cookie('token', token, { httpOnly: true, secure: true, sameSite: 'Strict' });

7.アプリケーションを保護します

• Cookie が安全に送信されるようにするため、運用環境では常に https を使用してください。

• Cookie が HTTPS 経由でのみ送信されるようにするには、Cookie で secure: true を設定することを検討してください。

• CSRF 攻撃を防ぐには、SameSite=Strict または Lax を使用します。

読んでいただきありがとうございます!この記事が役に立ったと思われた場合は、高評価をお願いします。ご質問がある場合、または議論されているトピックについてさらに詳しい説明が必要な場合は、お気軽にお問い合わせください。私はお手伝いするためにここにいますので、ぜひご連絡をお待ちしております。 Twitter または LinkedIn で私を見つけることができます。あなたとつながることを楽しみにしています!

以上がWeb セキュリティ: トークンを保存するための localStorage と Cookieの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。