検索

ホームページ >ウェブフロントエンド >jsチュートリアル >反応のクッキーとセッションを理解する

反応のクッキーとセッションを理解する

William Shakespeare
William Shakespeareオリジナル
2025-02-08 10:46:10262ブラウズ

Understanding Cookies and Sessions in React

キーポイント

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

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

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サイトを閲覧する時間を指します。それらは、一定期間にわたるユーザーの継続的なアクティビティを表します。

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

クッキーとセッションの詳細な基本

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

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

cookie

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

cookieタイプ

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

  1. セッションCookie は一時的で、ユーザーセッション中にのみ存在します。ショッピングカートのアイテムなどの簡単な情報を保存してください：
    <code>名称：_ga
值：GA1.3.210706468.1583989741
域：.example.com
路径：/
过期/最大年龄：2022-03-12T05:12:53.000Z</code>
  2. 永続的なCookieの有効期限があり、より長い期間ユーザーのマシンに残ります。それらは、覚えている私の機能のような機能に適しています：
    <code class="language-javascript">// 示例：设置会话 Cookie
document.cookie = "sessionID=abc123; path=/";</code>

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

  • ユーザー認証。 ユーザーが正常にログインした場合、セッショントークンまたはJWT（JSON Webトークン）が通常Cookieに保存されます：
    <code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>
  • ユーザー設定。 Cookieは通常、テーマの選択や言語設定などのユーザーの好みを、より良いパーソナライズされた体験のために保存します。 
    <code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>

セッション

定義と使用

を使用します

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

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

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

    <code class="language-javascript">// 示例：在 Cookie 中存储用户偏好设置
document.cookie = "theme=dark; path=/";</code>

  • クライアントセッション。 クライアントセッションを使用する場合、ノード間のデータストアを複製、検証、または照会する必要はありません。 「クライアントセッション」はクライアントのセッションストレージ情報を参照する場合がありますが、通常、セッション識別子を保存するためにCookieを使用することが含まれます。 

    <code class="language-javascript">// 使用 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,
}));</code>
Cookieとセッションの微妙さを理解することで、動的でインタラクティブなWebアプリケーションの構築に役立ちます。

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

実装Cookie

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

reactにcookieを実装する方法は、

に含まれます

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

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

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

document.cookie

    セットクッキー：

  1. <code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
document.cookie = "sessionID=abc123; path=/";</code>
    2. クッキーを入手：

  2. <code class="language-javascript">// 设置 Cookie 的函数
const setCookie = (name, value, days) => {
  const expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + days);

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

// 示例：设置一个在 7 天后过期的用户名 Cookie
setCookie("username", "john_doe", 7);</code>
    3. 削除クッキー：

  3. <code class="language-javascript">// 按名称获取 Cookie 值的函数
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");</code>
    4. カスタムフックを使用してクッキーを処理します

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

このカスタムフック

Cookieの現在の値、新しい値を設定する関数、およびCookieを削除する関数を返します。 
<code class="language-javascript">// 按名称删除 Cookie 的函数
const deleteCookie = (name) => {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
};

// 示例：删除“username” Cookie
deleteCookie("username");</code>
サードパーティライブラリを使用

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

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

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

    使用：
    <code class="language-javascript">// 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>
    <code>名称：_ga
值：GA1.3.210706468.1583989741
域：.example.com
路径：/
过期/最大年龄：2022-03-12T05:12:53.000Z</code>
JS-Cookiesなどのサードパーティライブラリを使用すると、ReactコンポーネントのCookie管理にシンプルで便利なAPIが提供されます。

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

セッションを実装

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

セッションを実装する方法は次のとおりです

サーバーサイドセッション
  • トークンベースの認証
    • サーバーサイドセッション

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

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

  1. さあ、Expressを構成：

    <code class="language-javascript">// 示例：设置会话 Cookie
document.cookie = "sessionID=abc123; path=/";</code>
    セッションID Cookieに署名するために使用され、セキュリティの追加レイヤーを追加するために使用されます。 

    <code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

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

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

    <code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>

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

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

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

  1. リクエストにトークンを含める： クライアント（反応）：
    <code class="language-javascript">// 示例：在 Cookie 中存储用户偏好设置
document.cookie = "theme=dark; path=/";</code>

    上記は、Reactコンテキストを使用して認証ステータスを管理します。
    2. 関数は、受信したトークンを使用してステータスを更新します。 

  2. <code class="language-javascript">// 使用 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,
}));</code>
    リクエストでトークンを使用します。 トークンを使用して、リクエストのヘッダーに含めます：

    login

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

  3. 両方の方法は、セッションを効果的に管理し、安全でシームレスな体験を提供するのに役立ちます。 
    <code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
document.cookie = "sessionID=abc123; path=/";</code>

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

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

Reactアプリケーションが正しく機能するようにするには、以下を実行してください。

および

ロゴ保護クッキー

を使用します

該当する場合は、常に

および

ロゴを含めます。 HttpOnly
  • HttpOnly。このフラグは、JavaScriptまたはその他の悪意のあるコードを介したCookieに対する攻撃を防ぎ、クロスサイトスクリプティング（XSS）攻撃のリスクを軽減します。これにより、Cookieはサーバーでのみアクセス可能であることを保証します。 
    <code>名称：_ga
值：GA1.3.210706468.1583989741
域：.example.com
路径：/
过期/最大年龄：2022-03-12T05:12:53.000Z</code>
  • 。このフラグは、Cookieが安全な暗号化された接続（https）でのみ送信されることを保証します。悪意のあるユーザー傍受のリスクを軽減できます：secure 
    <code class="language-javascript">// 示例：设置会话 Cookie
document.cookie = "sessionID=abc123; path=/";</code>
セッションの有効期限とトークンの更新

を実装します

セキュリティを強化するには、セッションの有効期限とトークンの更新プロパティを実装します。トークンを定期的にリフレッシュしたり、セッションの有効期限を設定したりすると、不正アクセスのリスクを軽減できます。

    トークン更新。認証トークンを更新して、ユーザーが認証されたままであることを確認します。これは、より長いユーザーセッションを備えたアプリケーションに関連しています。
    • セッションの有効期限が切れました。ユーザーセッションの期間を制限するために、合理的なセッションの有効期限を設定します。これにより、セッションのハイジャックを防ぐことができます。 
<code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

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

機密データを暗号化します

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

<code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>
プロパティを使用

SameSite

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

SameSite

    。 Cookieは、ファーストパーティのコンテキストでのみ送信され、サードパーティのWebサイトがユーザーに代わってリクエストを行うことを妨げます。
  • Strict 
    <code class="language-javascript">// 示例：在 Cookie 中存储用户偏好设置
document.cookie = "theme=dark; path=/";</code>
    • 。トップレベルのナビゲーション（リンクをクリックするときなど）を使用してCookieを送信できるようにしますが、サードパーティのWebサイトで開始されたクロスサイトの投稿リクエストではありません。
  • Lax 
    <code class="language-javascript">// 使用 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,
}));</code>
    個別の認証とアプリケーションステータス
クッキーまたはセッションにアプリケーション状態全体を保存しないでください。明確さを維持し、機密情報への暴露のリスクを最小限に抑えるために、他のアプリケーション関連状態から認証データを分離します。

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

Cookie管理に成熟したサードパーティライブラリを使用することを検討してください。 JS-Cookieのようなライブラリは、ネイティブの複雑さを抽象化するシンプルで便利なAPIを提供します。 
<code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
document.cookie = "sessionID=abc123; path=/";</code>

依存関係に関連する更新

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

テスト安全対策
<code class="language-javascript">// 设置 Cookie 的函数
const setCookie = (name, value, days) => {
  const expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + days);

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

// 示例：设置一个在 7 天后过期的用户名 Cookie
setCookie("username", "john_doe", 7);</code>

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

要約

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

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

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

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

以上が反応のクッキーとセッションを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript 中间件 json xss csrf express 封装 Cookie Session Token 标识符 字符串 JS https 性能优化 axios
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：2024年のNode.js開発用の20のツール次の記事：2024年のNode.js開発用の20のツール

関連記事

続きを見る