キーポイント

• Cookieとセッションは、Web開発における重要なコンポーネントであり、ユーザーデータ、認(rèn)証、およびステータスの管理に使用されます。 Cookieは、ユーザーのデバイスにWebブラウザによって保存されているデータチャンクの少量であり、セッションとは、ユーザーがWebサイトをブラウジングする時(shí)間を指します。
• Reactでは、document.cookieAPIを使用したり、カスタムフックを作成したり、サードパーティライブラリを使用してCookieを?qū)g裝できます。 Reactのセッションは、サーバー側(cè)のセッションまたはトークンベースの認(rèn)証を通じて実裝できます。
ReactのセッションとCookieを管理するためのベストプラクティスには、
• およびHttpOnlyフラグを使用してCookieを保護(hù)し、セッションの有効期限とトークンの更新を有効にし、機(jī)密データの暗號(hào)化、secure屬性を使用し、認(rèn)証とアプリケーションのステータスを分離します。 SameSite JS-Cookiesなどのサードパーティライブラリは、ReactアプリケーションのCookie管理を簡(jiǎn)素化できます。セキュリティパッチと改善の恩恵を受けるために、依存関係を定期的に更新することをお?jiǎng)幛幛筏蓼埂?
• 定期的なセキュリティ監(jiān)査とテストは、アプリケーションのセキュリティを確保するために不可欠です。コンテンツセキュリティポリシー（CSP）などのツールやプラクティスを使用して、セキュリティリスクを軽減できます。
この記事では、ReactでCookieとセッションを?qū)g裝するためのテクノロジーとベストプラクティスを探ります。

Cookieとセッションは、Web開発の不可欠なコンポーネントです。それらは、ユーザーデータ、認(rèn)証、およびステータスを管理するための媒體です。

Cookieは、ユーザーのデバイス上のWebブラウザーに保存されている少量のデータ（最大4096バイト）です。典型的なCookieはこのように見えます（これはGoogle Analyticsです -

- Cookie）：

_ga

Cookieは、キーと価値のペアを持つ文字列です。

<code>名稱：_ga
值：GA1.3.210706468.1583989741
域：.example.com
路徑：/
過期/最大年齡：2022-03-12T05:12:53.000Z</code>

「セッション」とは、ユーザーがWebサイトを閲覧する時(shí)間を指します。それらは、一定期間にわたるユーザーの継続的なアクティビティを表します。

Reactでは、Cookieとセッションが堅(jiān)牢で安全なアプリケーションを作成するのに役立ちます。

クッキーとセッションの詳細(xì)な基本

Cookieとセッションの基本を理解することは、動(dòng)的およびユーザー中心のWebアプリケーションを開発するための基盤です。

このセクションでは、このタイプ、ライフサイクル、および典型的なユースケースを探索し、より詳細(xì)な方法でCookieとセッションの概念を調(diào)べます。

cookie

Cookieは、主に複數(shù)のリクエストでクライアントとサーバー間の狀態(tài)データを維持します。 Cookieを使用すると、ユーザーのマシンからデータを保存および取得し、よりパーソナライズされた/シームレスなブラウジングエクスペリエンスを提供できます。

cookieタイプ

さまざまな種類のCookieがあり、それぞれが意図したユースケースに最適です。

1. セッションCookie は一時(shí)的で、ユーザーセッション中にのみ存在します。ショッピングカートのアイテムなどの簡(jiǎn)単な情報(bào)を保存してください：

   <code>名稱：_ga
   值：GA1.3.210706468.1583989741
   域：.example.com
   路徑：/
   過期/最大年齡：2022-03-12T05:12:53.000Z</code>

2. 永続的なCookieの有効期限があり、より長(zhǎng)い期間ユーザーのマシンに殘ります。それらは、覚えている私の機(jī)能のような機(jī)能に適しています：

   // 示例：設(shè)置會(huì)話 Cookie
   document.cookie = "sessionID=abc123; path=/";

反応のCookieのユーザーセルセ

• ユーザー認(rèn)証。 ユーザーが正常にログインした場(chǎng)合、セッショントークンまたはJWT（JSON Webトークン）が通常Cookieに保存されます：

  // 示例：設(shè)置具有過期日期的持久性 Cookie
  document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

• ユーザー設(shè)定。 Cookieは通常、テーマの選択や言語設(shè)定などのユーザーの好みを、より良いパーソナライズされた體験のために保存します。

  document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";

セッション

定義と使用

を使用します

セッションは、アクセス中にユーザー固有のデータを保存する論理サーバー側(cè)のエンティティを表します。セッションはCookieに密接に関連していますが、通常、セッションの識(shí)別子はクッキー側(cè)にCookieを保存します。 （Cookieデータはサーバーに保存されています。）

サーバーサイドおよびクライアントセッション

• サーバー側(cè)のセッションセッションデータをサーバーに保存することが含まれます。 Express.jsのようなフレームワークは、サーバー側(cè)のセッションを使用してユーザーステータスを管理します：

  // 示例：在 Cookie 中存儲(chǔ)用戶偏好設(shè)置
  document.cookie = "theme=dark; path=/";

• クライアントセッション。 クライアントセッションを使用する場(chǎng)合、ノード間のデータストアを複製、検証、または照會(huì)する必要はありません。 「クライアントセッション」はクライアントのセッションストレージ情報(bào)を參照する場(chǎng)合がありますが、通常、セッション識(shí)別子を保存するためにCookieを使用することが含まれます。

  // 使用 express-session 中間件
  const express = require('express');
  const session = require('express-session');
  const app = express();
  
  app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
  }));

Cookieとセッションの微妙さを理解することで、動(dòng)的でインタラクティブなWebアプリケーションの構(gòu)築に役立ちます。

次のセクションでは、ReactアプリケーションでのCookieとセッションの実際の実裝について説明します。

実裝Cookie

前述のように、CookieはWebプロセスとReactアプリケーションの基本的なコンポーネントです。

reactにcookieを?qū)g裝する方法は、

に含まれます

api
• を使用しています document.cookieカスタムフックを作成します
サードパーティライブラリを使用

api

を使用しています document.cookie反応でCookieを使用する最も基本的な方法は、

APIを使用することです。 Cookieを設(shè)定、取得、削除する簡(jiǎn)単なインターフェイスを提供します。

document.cookie

セットクッキー：

1. // 示例：在客戶端的 Cookie 中存儲(chǔ) Session ID
   document.cookie = "sessionID=abc123; path=/";

クッキーを入手：

2. // 設(shè)置 Cookie 的函數(shù)
   const setCookie = (name, value, days) => {
     const expirationDate = new Date();
     expirationDate.setDate(expirationDate.getDate() + days);
   
     document.cookie = `${name}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
   };
   
   // 示例：設(shè)置一個(gè)在 7 天后過期的用戶名 Cookie
   setCookie("username", "john_doe", 7);

削除クッキー：

3. // 按名稱獲取 Cookie 值的函數(shù)
   const getCookie = (name) => {
     const cookies = document.cookie
       .split("; ")
       .find((row) => row.startsWith(`${name}=`));
   
     return cookies ? cookies.split("=")[1] : null;
   };
   
   // 示例：獲取“username” Cookie 的值
   const username = getCookie("username");

カスタムフックを使用してクッキーを処理します

Cookie関連の機(jī)能をカプセル化するカスタムReactフックを作成して、コンポーネント間で再利用できるようにします。

このカスタムフック

Cookieの現(xiàn)在の値、新しい値を設(shè)定する関數(shù)、およびCookieを削除する関數(shù)を返します。

// 按名稱刪除 Cookie 的函數(shù)
const deleteCookie = (name) => {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
};

// 示例：刪除“username” Cookie
deleteCookie("username");

サードパーティライブラリを使用

useCookie JS-Cookiesなどのサードパーティライブラリは、ReactアプリケーションでCookie管理を簡(jiǎn)素化します。

インストールライブラリ：

1. Reactコンポーネントでの使用

   使用：

   // useCookie.js
   import { useState, useEffect } from "react";
   
   const useCookie = (cookieName) => {
     const [cookieValue, setCookieValue] = useState("");
   
     useEffect(() => {
       const cookie = document.cookie
         .split("; ")
         .find((row) => row.startsWith(`${cookieName}=`));
   
       setCookieValue(cookie ? cookie.split("=")[1] : "");
     }, [cookieName]);
   
     const setCookie = (value, expirationDate) => {
       document.cookie = `${cookieName}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
     };
   
     const deleteCookie = () => {
       document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
     };
   
     return [cookieValue, setCookie, deleteCookie];
   };
   
   // 在 React 組件中的用法
   const [username, setUsername, deleteUsername] = useCookie("username");

   <code>名稱：_ga
   值：GA1.3.210706468.1583989741
   域：.example.com
   路徑：/
   過期/最大年齡：2022-03-12T05:12:53.000Z</code>

JS-Cookiesなどのサードパーティライブラリを使用すると、ReactコンポーネントのCookie管理にシンプルで便利なAPIが提供されます。

これらのさまざまなアプローチを理解することで、Reactアプリケーションのニーズと複雑さに最適なアプローチを選択することができます。

セッションを?qū)g裝

Reactアプリケーションでは、セッションがサーバー側(cè)で動(dòng)作し、セッション識(shí)別子はクッキーを使用してクライアント側(cè)で動(dòng)作します。

セッションを?qū)g裝する方法は次のとおりです

サーバーサイドセッション

• トークンベースの認(rèn)証
サーバーサイドセッション

サーバー側(cè)のセッションでは、サーバーにセッションデータを保存することが含まれます。 Reactでは、Express.jsやセッション管理ミドルウェアなどのサーバー側(cè)のフレームワークを使用することを意味します。

Express-sessionを使用してExpress.jsを設(shè)定します： 最初に、必要なパッケージをインストールします：

1. さあ、Expressを構(gòu)成：

   // 示例：設(shè)置會(huì)話 Cookie
   document.cookie = "sessionID=abc123; path=/";

   セッションID Cookieに署名するために使用され、セキュリティの追加レイヤーを追加するために使用されます。

   // 示例：設(shè)置具有過期日期的持久性 Cookie
   document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

   ルーティングでセッションを使用します： セッションを構(gòu)成した後、ルートでそれらを使用できます：secret

ログインに正常にログインした後、ユーザー情報(bào)はセッションに保存されます。この情報(bào)は、
2. ルートの後続のリクエストによってアクセスできます。

   document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";

   トークンベースの認(rèn)証/profile トークンベースの認(rèn)証は、最新のReactアプリケーションでセッションを管理する方法です。サーバーでの認(rèn)証が成功した後にトークンを生成し、クライアントに送信し、後続のリクエストのヘッダーに含めることが含まれます。

トークンを生成して送信します。 サーバー側(cè)：

サーバーはJWT（JSON Webトークン）を生成し、クライアントに送信します。

1. リクエストにトークンを含める： クライアント（反応）：

   // 示例：在 Cookie 中存儲(chǔ)用戶偏好設(shè)置
   document.cookie = "theme=dark; path=/";

   上記は、Reactコンテキストを使用して認(rèn)証ステータスを管理します。
関數(shù)は、受信したトークンを使用してステータスを更新します。

2. // 使用 express-session 中間件
   const express = require('express');
   const session = require('express-session');
   const app = express();
   
   app.use(session({
     secret: 'your-secret-key',
     resave: false,
     saveUninitialized: true,
   }));

   リクエストでトークンを使用します。 トークンを使用して、リクエストのヘッダーに含めます：

   login

   axiosでリクエストすると、トークンがヘッダーに自動(dòng)的に追加されます。

3. 両方の方法は、セッションを効果的に管理し、安全でシームレスな體験を提供するのに役立ちます。

   // 示例：在客戶端的 Cookie 中存儲(chǔ) Session ID
   document.cookie = "sessionID=abc123; path=/";

   セッションとCookieの管理のためのベストプラクティス

ReactアプリケーションでのセッションとCookieの処理は、安全でユーザーフレンドリーな、高性能のWebアプリケーションを構(gòu)築するために不可欠です。

Reactアプリケーションが正しく機(jī)能するようにするには、以下を?qū)g行してください。

および

ロゴ保護(hù)クッキー

を使用します

該當(dāng)する場(chǎng)合は、常に

および

ロゴを含めます。 HttpOnly

• HttpOnly。このフラグは、JavaScriptまたはその他の悪意のあるコードを介したCookieに対する攻撃を防ぎ、クロスサイトスクリプティング（XSS）攻撃のリスクを軽減します。これにより、Cookieはサーバーでのみアクセス可能であることを保証します。

  <code>名稱：_ga
  值：GA1.3.210706468.1583989741
  域：.example.com
  路徑：/
  過期/最大年齡：2022-03-12T05:12:53.000Z</code>

• 。このフラグは、Cookieが安全な暗號(hào)化された接続（https）でのみ送信されることを保証します。悪意のあるユーザー傍受のリスクを軽減できます：secure

  // 示例：設(shè)置會(huì)話 Cookie
  document.cookie = "sessionID=abc123; path=/";

セッションの有効期限とトークンの更新

を?qū)g裝します

セキュリティを強(qiáng)化するには、セッションの有効期限とトークンの更新プロパティを?qū)g裝します。トークンを定期的にリフレッシュしたり、セッションの有効期限を設(shè)定したりすると、不正アクセスのリスクを軽減できます。

トークン更新。認(rèn)証トークンを更新して、ユーザーが認(rèn)証されたままであることを確認(rèn)します。これは、より長(zhǎng)いユーザーセッションを備えたアプリケーションに関連しています。
セッションの有効期限が切れました。ユーザーセッションの期間を制限するために、合理的なセッションの有効期限を設(shè)定します。これにより、セッションのハイジャックを防ぐことができます。

// 示例：設(shè)置具有過期日期的持久性 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

エンドポイントは、認(rèn)証が成功した後、最初のJWTトークンを返します。 /loginエンドポイントは更新トークンを使用して、新しいアクセストークンを生成します。 /refresh-token

機(jī)密データを暗號(hào)化します

Cookieまたはセッションに機(jī)密情報(bào)を直接保存することは避けてください。避けられない狀況で機(jī)密データを保持するには、保存する前に暗號(hào)化します。暗號(hào)化はセキュリティの追加レイヤーを追加し、悪意のあるユーザーがデータをインターセプトした場(chǎng)合でも、機(jī)密情報(bào)にアクセスするのが難しくなります。

document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";

プロパティを使用

SameSite

屬性は、Cookieがクロスサイトリクエストと一緒に送信される時(shí)期を指定することにより、クロスサイトリクエストForgery（CSRF）攻撃を防ぐのに役立ちます。

SameSite

。 Cookieは、ファーストパーティのコンテキストでのみ送信され、サードパーティのWebサイトがユーザーに代わってリクエストを行うことを妨げます。
• Strict

  // 示例：在 Cookie 中存儲(chǔ)用戶偏好設(shè)置
  document.cookie = "theme=dark; path=/";

。トップレベルのナビゲーション（リンクをクリックするときなど）を使用してCookieを送信できるようにしますが、サードパーティのWebサイトで開始されたクロスサイトの投稿リクエストではありません。
• Lax

  // 使用 express-session 中間件
  const express = require('express');
  const session = require('express-session');
  const app = express();
  
  app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
  }));

  個(gè)別の認(rèn)証とアプリケーションステータス

クッキーまたはセッションにアプリケーション狀態(tài)全體を保存しないでください。明確さを維持し、機(jī)密情報(bào)への暴露のリスクを最小限に抑えるために、他のアプリケーション関連狀態(tài)から認(rèn)証データを分離します。

クッキー管理にサードパーティライブラリを使用

Cookie管理に成熟したサードパーティライブラリを使用することを検討してください。 JS-Cookieのようなライブラリは、ネイティブの複雑さを抽象化するシンプルで便利なAPIを提供します。

// 示例：在客戶端的 Cookie 中存儲(chǔ) Session ID
document.cookie = "sessionID=abc123; path=/";

依存関係に関連する更新

セキュリティパッチと改善の恩恵を受けるために、サードパーティのライブラリとフレームワークを最新の狀態(tài)に保ちます。依存関係の定期的な更新により、當(dāng)社のアプリケーションが既知の脆弱性の影響を受けないことが保証されます。 document.cookie

テスト安全対策

// 設(shè)置 Cookie 的函數(shù)
const setCookie = (name, value, days) => {
  const expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + days);

  document.cookie = `${name}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
};

// 示例：設(shè)置一個(gè)在 7 天后過期的用戶名 Cookie
setCookie("username", "john_doe", 7);

セキュリティ監(jiān)査とテストについては、申請(qǐng)について定期的に話し合います。これには、XSSやCSRFなどの一般的な脆弱性のテストが含まれます。セキュリティツールやコンテンツセキュリティポリシー（CSP）などのプラクティスを使用して、セキュリティリスクを軽減することを検討してください。

要約

Cookieとセッションは、安全で効率的なReactアプリケーションを構(gòu)築するための便利なツールです。ユーザー認(rèn)証を管理したり、ユーザーの設(shè)定を維持したり、ステートフルな対話を有効にしたりするために使用されます。

ベストプラクティスに従って実績(jī)のあるライブラリを使用することにより、セキュリティに優(yōu)先順位を付けながらシームレスなユーザーエクスペリエンスを提供する堅(jiān)牢で信頼できるアプリケーションを作成できます。

この記事が気に入ったら、SitePointから他のエキサイティングなリソースをチェックしてください：

パフォーマンスの最適化を反応します
• 2024年のベストReactチャートライブラリ
• 6條件付きレンダリングのためのテクニック、例を使用して

以上が反応のクッキーとセッションを理解するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。