Memahami kuki dan sesi dalam React

mata utama

Kuki dan Sesi adalah komponen kritikal dalam pembangunan web dan digunakan untuk menguruskan data pengguna, pengesahan, dan status. Kuki adalah sedikit potongan data yang disimpan oleh pelayar web pada peranti pengguna, dan sesi merujuk kepada masa pengguna melayari laman web.
Dalam React, anda boleh menggunakan API
• , membuat cangkuk tersuai, atau menggunakan perpustakaan pihak ketiga untuk melaksanakan kuki. Sesi dalam React boleh dilaksanakan melalui sesi pelayan atau pengesahan berasaskan token. document.cookie
Amalan terbaik untuk menguruskan sesi dan kuki dalam React termasuk: Melindungi kuki dengan bendera
• dan HttpOnly, membolehkan tamat tempoh sesi dan refresh token, menyulitkan data sensitif, menggunakan atribut secure, dan memisahkan status pengesahan dan aplikasi. SameSite
perpustakaan pihak ketiga seperti JS-Cookies dapat memudahkan pengurusan kuki dalam aplikasi React. Adalah disyorkan untuk mengemas kini kebergantungan secara teratur untuk mendapat manfaat daripada patch keselamatan dan penambahbaikan.
Audit dan ujian keselamatan tetap adalah penting untuk memastikan keselamatan aplikasi. Alat dan amalan seperti Dasar Keselamatan Kandungan (CSP) boleh digunakan untuk mengurangkan risiko keselamatan.

Artikel ini akan meneroka teknologi dan amalan terbaik untuk melaksanakan kuki dan sesi dalam React.

Kuki dan Sesi adalah komponen pembangunan web yang sangat diperlukan. Mereka adalah medium untuk menguruskan data pengguna, pengesahan, dan status.

cookies adalah sejumlah kecil data (sehingga 4096 bait) yang disimpan dalam pelayar web pada peranti pengguna. Kuki biasa kelihatan seperti ini (ini adalah Google Analytics -

- cookie): _ga

<code>名称：_ga
值：GA1.3.210706468.1583989741
域：.example.com
路径：/
过期/最大年龄：2022-03-12T05:12:53.000Z</code>

Cookie hanya rentetan dengan pasangan nilai kunci.

"Sesi" merujuk kepada masa pengguna melayari laman web. Mereka mewakili aktiviti berterusan pengguna dalam tempoh masa.

Dalam React, cookies dan sesi membantu kami membuat aplikasi yang mantap dan selamat.

Asas-asas Cookies dan Sesi yang mendalam

Memahami asas-asas kuki dan sesi adalah asas untuk membangunkan aplikasi web dinamik dan pengguna yang berpusat.

Bahagian ini akan meneroka konsep kuki dan sesi dengan cara yang lebih mendalam, meneroka jenis mereka, kitaran hidup, dan kes penggunaan biasa.

cookie

Cookies terutamanya mengekalkan data keadaan antara klien dan pelayan dalam pelbagai permintaan. Kuki membolehkan anda menyimpan dan mengambil data dari mesin pengguna, menyediakan pengalaman melayari yang lebih peribadi/lancar.

Jenis Cookie

Terdapat pelbagai jenis kuki, masing -masing sesuai untuk kes penggunaannya yang dimaksudkan.

1. Cookies Sesi adalah sementara dan hanya wujud semasa sesi pengguna. Mereka menyimpan maklumat ringkas, seperti item dalam keranjang belanja:

   <code>名称：_ga
   值：GA1.3.210706468.1583989741
   域：.example.com
   路径：/
   过期/最大年龄：2022-03-12T05:12:53.000Z</code>

2. Cookie Permanence mempunyai tarikh tamat tempoh dan akan kekal pada mesin pengguna untuk jangka masa yang lebih lama. Mereka sesuai untuk ciri -ciri seperti ciri Rema Me:

   <code class="language-javascript">// 示例：设置会话 Cookie
   document.cookie = "sessionID=abc123; path=/";</code>

usercases cookies dalam react

• Pengesahan Pengguna. Apabila pengguna log masuk dengan jayanya, token sesi atau JWT (token web JSON) biasanya disimpan dalam kuki:

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

• Keutamaan pengguna. Cookies biasanya menyimpan keutamaan pengguna, seperti pemilihan tema atau tetapan bahasa, untuk pengalaman peribadi yang lebih baik.

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

sesi

Definisi dan penggunaan

Sesi mewakili entiti sisi pelayan logik yang menyimpan data khusus pengguna semasa akses. Sesi berkait rapat dengan kuki, tetapi disimpan dengan cara yang berbeza; (Data cookie disimpan di pelayan.)

sesi pelayan dan klien

• Sesi sisi pelayan melibatkan penyimpanan data sesi pada pelayan. Rangka kerja seperti Express.js Gunakan sesi sisi pelayan untuk menguruskan status pengguna:

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

• sesi klien. Apabila menggunakan sesi klien, tidak perlu meniru, mengesahkan sesi, atau menanyakan kedai data antara nod. Walaupun "sesi klien" boleh merujuk kepada maklumat penyimpanan sesi pada klien, biasanya melibatkan penggunaan kuki untuk menyimpan pengecam sesi:

  <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>

Memahami kehalusan kuki dan sesi membantu membina aplikasi web yang dinamik dan interaktif.

Bahagian seterusnya akan meneroka pelaksanaan kuki dan sesi sebenar dalam aplikasi React.

Cookies Pelaksanaan

Seperti yang dinyatakan sebelum ini, kuki adalah komponen asas proses web dan aplikasi React.

bagaimana melaksanakan kuki dalam React termasuk:

• menggunakan document.cookie api
• Buat Custom Hook
• menggunakan perpustakaan pihak ketiga

menggunakan document.cookie api

Cara paling asas untuk menggunakan kuki dalam React adalah melalui API document.cookie. Ia menyediakan antara muka yang mudah untuk menetapkan, mendapatkan dan memadam kuki.

1. Tetapkan cookies:

   <code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
   document.cookie = "sessionID=abc123; path=/";</code>

2. Dapatkan cookies:

   <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. Padam cookie:

   <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>

Gunakan cangkuk tersuai untuk mengendalikan kuki

Buat cangkuk React Custom untuk merangkum ciri-ciri yang berkaitan dengan kuki supaya ia boleh digunakan semula antara komponen:

<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>

Hook Custom useCookie ini mengembalikan nilai semasa kuki, fungsi yang menetapkan nilai baru, dan fungsi yang memadamkan kuki.

menggunakan perpustakaan pihak ketiga

perpustakaan pihak ketiga seperti JS-Cookies memudahkan pengurusan cookie dalam aplikasi React.

1. Perpustakaan Pemasangan:

   <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>

2. Penggunaan dalam komponen React:

   <code>名称：_ga
   值：GA1.3.210706468.1583989741
   域：.example.com
   路径：/
   过期/最大年龄：2022-03-12T05:12:53.000Z</code>

menggunakan perpustakaan pihak ketiga seperti JS-Cookies menyediakan API yang mudah dan mudah untuk pengurusan cookie dalam komponen React.

Memahami pendekatan yang berbeza ini membantu kami memilih yang paling sesuai dengan keperluan dan kerumitan aplikasi React kami.

Melaksanakan sesi

Dalam aplikasi React, Sesi berfungsi di sisi pelayan, sementara pengenal sesi menggunakan kuki untuk bekerja di sisi klien.

Kaedah untuk melaksanakan sesi termasuk:

• sesi sisi pelayan
• Pengesahan berasaskan token

sesi sisi pelayan

Sesi sisi pelayan melibatkan menyimpan data sesi pada pelayan. Dalam React, ini bermakna menggunakan rangka kerja pelayan seperti Express.js dan Middleware Pengurusan Sesi.

1. set express.js menggunakan sesi ekspres: Pertama, pasangkan pakej yang diperlukan:

   <code class="language-javascript">// 示例：设置会话 Cookie
   document.cookie = "sessionID=abc123; path=/";</code>

   Sekarang, konfigurasikan Express:

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

   secret Digunakan untuk menandatangani kuki ID sesi, menambah lapisan keselamatan tambahan.

2. Gunakan sesi dalam penghalaan: Selepas mengkonfigurasi sesi, kita boleh menggunakannya dalam laluan:

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

   Selepas berjaya masuk, maklumat pengguna akan disimpan dalam sesi. Maklumat ini boleh diakses oleh permintaan berikutnya untuk laluan /profile.

Pengesahan berasaskan token

Pengesahan berasaskan token adalah cara untuk menguruskan sesi dalam aplikasi React moden. Ia melibatkan menjana token selepas pengesahan yang berjaya di pelayan, menghantarnya kepada pelanggan, dan termasuk dalam tajuk permintaan berikutnya.

1. menghasilkan dan menghantar token: Di sisi pelayan:

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

   Pelayan menjana JWT (JSON Web Token) dan menghantarnya kepada pelanggan.

2. Sertakan token dalam permintaan: Pada pelanggan (React):

   <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>

   di atas menggunakan konteks React untuk menguruskan status pengesahan. Fungsi login mengemas kini status menggunakan token yang diterima.

3. Gunakan token atas permintaan: Dengan token, masukkannya dalam tajuk permintaan:

   <code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
   document.cookie = "sessionID=abc123; path=/";</code>

   Apabila meminta dengan Axios, token secara automatik ditambah ke tajuk.

Kedua -dua kaedah membantu kami menguruskan sesi kami dengan berkesan, memberikan pengalaman yang selamat dan lancar.

amalan terbaik untuk menguruskan sesi dan kuki dalam reaksi

Pengendalian sesi dan kuki dalam aplikasi React adalah penting untuk membina aplikasi web yang selamat, mesra pengguna, dan berprestasi tinggi.

Untuk memastikan aplikasi React kami berfungsi dengan betul, sila lakukan yang berikut.

Gunakan HttpOnly dan secure kuki perlindungan logo

Sentiasa masukkan logo HttpOnly dan secure di mana berkenaan.

• HttpOnly. Bendera ini menghalang serangan ke atas kuki melalui JavaScript atau mana-mana kod jahat lain, mengurangkan risiko serangan skrip lintas tapak (XSS). Ia memastikan bahawa kuki hanya boleh diakses oleh pelayan:

  <code>名称：_ga
  值：GA1.3.210706468.1583989741
  域：.example.com
  路径：/
  过期/最大年龄：2022-03-12T05:12:53.000Z</code>

• secure. Bendera ini memastikan bahawa kuki hanya dihantar melalui sambungan yang disulitkan (HTTPS) yang selamat. Ia dapat mengurangkan risiko pemintasan pengguna yang berniat jahat:

  <code class="language-javascript">// 示例：设置会话 Cookie
  document.cookie = "sessionID=abc123; path=/";</code>

Melaksanakan tamat tempoh sesi dan refresh token

Untuk keselamatan yang dipertingkatkan, melaksanakan tamat tempoh sesi dan sifat penyegaran token. Menyegarkan token secara teratur atau menetapkan masa tamat tempoh sesi dapat membantu mengurangkan risiko akses yang tidak dibenarkan.

• Token Refresh. Segarkan semula token pengesahan untuk memastikan pengguna tetap disahkan. Ini berkaitan dengan aplikasi dengan sesi pengguna yang lebih lama.
• sesi tamat tempoh. Tetapkan masa tamat tempoh sesi yang munasabah untuk mengehadkan tempoh sesi pengguna. Ini membantu mencegah rampasan sesi.

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

/login titik akhir mengembalikan token JWT awal selepas pengesahan yang berjaya. /refresh-token Titik akhir menggunakan token penyegaran untuk menghasilkan token akses baru.

menyulitkan data sensitif

Elakkan menyimpan maklumat sensitif secara langsung dalam kuki atau sesi. Untuk mengekalkan data sensitif dalam keadaan yang tidak dapat dielakkan, menyulitkannya sebelum menyimpannya. Penyulitan menambah lapisan keselamatan tambahan, menjadikannya lebih sukar untuk mengakses maklumat sensitif walaupun pengguna jahat memintas data:

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

menggunakan SameSite Properties

Atribut

SameSite membantu mencegah serangan pemalsuan permintaan lintas tapak (CSRF) dengan menyatakan apabila kuki dihantar bersama-sama dengan permintaan lintas tapak.

• Strict. Kuki hanya dihantar dalam konteks pihak pertama, menghalang laman web pihak ketiga daripada membuat permintaan bagi pihak pengguna.

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

• Lax. Benarkan kami menghantar kuki menggunakan navigasi peringkat atas (seperti ketika mengklik pautan), tetapi tidak permintaan pos silang tapak yang dimulakan oleh laman web pihak ketiga:

  <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>

Pengesahan dan Status Aplikasi berasingan

Elakkan menyimpan keseluruhan keadaan permohonan dalam kuki atau sesi. Data pengesahan berasingan dari negeri-negeri yang berkaitan dengan aplikasi lain untuk mengekalkan kejelasan dan meminimumkan risiko pendedahan kepada maklumat sensitif:

<code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
document.cookie = "sessionID=abc123; path=/";</code>

Gunakan perpustakaan pihak ketiga untuk pengurusan cookie

Pertimbangkan menggunakan perpustakaan pihak ketiga yang matang untuk pengurusan cookie. Perpustakaan seperti JS-Cookie menyediakan API yang mudah dan mudah yang menafsirkan kerumitan API document.cookie API:

<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>

kemas kini berkaitan dengan kebergantungan

Pastikan perpustakaan dan rangka kerja pihak ketiga terkini untuk mendapat manfaat daripada patch keselamatan dan penambahbaikan. Kemas kini tetap kepada kebergantungan memastikan bahawa aplikasi kami tidak mudah terdedah kepada kelemahan yang diketahui.

Langkah Keselamatan Ujian

Bincangkan permohonan anda secara teratur untuk audit keselamatan dan ujian. Ini termasuk menguji kelemahan biasa seperti XSS dan CSRF. Pertimbangkan menggunakan alat dan amalan keselamatan seperti Dasar Keselamatan Kandungan (CSP) untuk mengurangkan risiko keselamatan.

Ringkasan

Kuki dan sesi adalah alat yang berguna untuk membina aplikasi reaksi yang selamat dan cekap. Mereka digunakan untuk menguruskan pengesahan pengguna, memelihara keutamaan pengguna, atau membolehkan interaksi negara.

Dengan mengikuti amalan terbaik dan menggunakan perpustakaan yang terbukti, kami boleh membuat aplikasi yang mantap dan boleh dipercayai yang memberikan pengalaman pengguna yang lancar sambil mengutamakan keselamatan.

Jika anda suka artikel ini, sila lihat sumber lain yang menarik dari Sitepoint:

• React Prestasi Pengoptimuman
• perpustakaan carta reaksi terbaik 2024
• 6 Teknik untuk rendering bersyarat dalam React, dengan contoh

Atas ialah kandungan terperinci Memahami kuki dan sesi dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!