Šiame straipsnyje išnagrinėsime React slapukų ir seansų diegimo metodus ir geriausią praktiką.
Slapukai ir seansai yra neatsiejami interneto kūrimo komponentai. Jie yra vartotojo duomenų, autentifikavimo ir būsenos valdymo terpė.
Slapukai yra nedidelės duomenų dalys (daugiausia 4096 baitai), kurias žiniatinklio naršyklė išsaugo vartotojo įrenginyje žiniatinklio serverio vardu. Tipiškas slapuko pavyzdys atrodo taip (tai yra „Google Analytics“ _ga – slapukas):
Name: _ga
Value: GA1.3.210706468.1583989741
Domain: .example.com
Path: /
Expires / Max-Age: 2022-03-12T05:12:53.000Z
Slapukai yra tik eilutės su rakto-reikšmių poromis.
„Seansai“ reiškia laiką, kurį naudotojai naršo svetainėje. Jie atspindi gretutinę vartotojų veiklą per tam tikrą laikotarpį.
„React“ slapukai ir seansai padeda mums sukurti patikimas ir saugias programas.
Išsamūs slapukų ir seansų pagrindai
Norint sukurti dinamiškas ir į vartotoją orientuotas žiniatinklio programas, būtina suprasti slapukų ir seansų pagrindus.
Šiame skyriuje išsamiau nagrinėjamos slapukų ir seansų sąvokos, nagrinėjami jų tipai, gyvavimo ciklas ir tipiniai naudojimo atvejai.
Slapukai
Slapukai daugiausia palaiko būsenos duomenis tarp kliento ir serverio per kelias užklausas. Slapukai leidžia saugoti ir nuskaityti duomenis naudotojo įrenginyje, kad būtų lengviau suasmeninti / sklandžiai naršyti.
Slapukų tipai
Yra įvairių slapukų tipų ir kiekvienas puikiai tinka pagal numatytą naudojimo atvejį.
Seanso slapukai yra laikini ir egzistuoja tik naudotojo seanso trukmei. Jie saugo trumpalaikę informaciją, pvz., prekes krepšelyje:
document.cookie = "sessionID=abc123; path=/";Nuolatiniai slapukai turi galiojimo datą ir ilgiau lieka naudotojo įrenginyje. Jie veikia su tokiomis funkcijomis kaip „Prisimink mane“:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
„React“ slapukų naudojimo atvejai
Vartotojo autentifikavimas. Kai sėkmingai prisijungiame, sesijos prieigos raktas arba JWT (JSON žiniatinklio prieigos raktas) dažnai išsaugomas slapuke:
document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";Vartotojo nuostatos. Slapukuose dažniausiai išsaugomos vartotojo nuostatos, pvz., temos pasirinkimai ar kalbos nustatymai, kad būtų galima geriau suasmeninti.
document.cookie = "theme=dark; path=/";
Sesijos
Apibrėžimas ir tikslas
Seansai yra loginis serverio subjektas, skirtas konkretiems naudotojo duomenims saugoti apsilankymo metu. Seansai yra glaudžiai susiję su slapukais, tačiau skiriasi saugojimu; seanso identifikatorius dažnai išsaugo slapukus kliento pusėje. (Slapukų duomenys saugomi serveryje.)
Serverio ir kliento pusės seansai
Serverio pusės seansai apima seanso duomenų saugojimą serveryje. Karkasai kaip Express.js naudokite serverio seansus vartotojo būsenai valdyti:
const express = require('express'); const session = require('express-session');const app = express(); app.use(session({ secret: 'your-secret-key', resave: false, saveUninitialized: true, }));Kliento pusės sesijos. Kliento pusėje seansai užtikrina, kad nereikės dauginti mazgų, patvirtinti seansų ar teikti užklausų duomenų saugykloje. Nors „kliento pusės seansai“ gali reikšti kliento seanso saugojimo informaciją, dažnai tai apima slapukų naudojimą seanso identifikatoriams saugoti:
document.cookie = "sessionID=abc123; path=/";
Slapukų ir seansų niuansų supratimas padeda kurti dinamiškas ir interaktyvias žiniatinklio programas.
Kitame skyriuje nagrinėjami praktiniai slapukų ir seansų diegimai „React“ programose.
Slapukų diegimas
Kaip minėta anksčiau, slapukai yra pagrindinė žiniatinklio proceso ir „React“ programos dalis.
React slapukų diegimo būdai yra šie:
- naudojant
document.cookieAPI - sukurti pasirinktinius kabliukus
- naudojant trečiųjų šalių bibliotekas
Naudojant document.cookie API
Paprasčiausias būdas dirbti su slapukais React yra per document.cookie API. Tai suteikia paprastą sąsają, leidžiančią nustatyti, gauti ir ištrinti slapukus.
Slapuko nustatymas:
const setCookie = (name, value, days) => { const expirationDate = new Date(); expirationDate.setDate(expirationDate.getDate() + days); document.cookie = `${name}=${value}; expires=${expirationDate.toUTCString()}; path=/`; }; setCookie("username", "john_doe", 7);Slapuko gavimas:
const getCookie = (name) => { const cookies = document.cookie .split("; ") .find((row) => row.startsWith(`${name}=`)); return cookies ? cookies.split("=")[1] : null; }; const username = getCookie("username");Slapuko ištrynimas:
const deleteCookie = (name) => { document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`; }; deleteCookie("username");
Pasirinktinių kabliukų naudojimas sausainiams
Sukūrus tinkintą „React Hook“, įtraukiamos su slapukais susijusios funkcijos, todėl ją galima pakartotinai naudoti visuose komponentuose:
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];
};
const [username, setUsername, deleteUsername] = useCookie("username");
Šis pritaikytas kabliukas, useCookiegrąžina dabartinę slapuko reikšmę, funkciją, skirtą naujai vertei nustatyti, ir funkciją slapuko ištrynimui.
Trečiųjų šalių bibliotekų naudojimas
Trečiųjų šalių bibliotekos, pvz js-cookiesupaprastinkite slapukų valdymą „React“ programose.
Įdiekite biblioteką:
npm install js-cookieNaudojimas React komponente:
import React, { useEffect } from "react"; import Cookies from "js-cookie"; const MyComponent = () => { useEffect(() => { Cookies.set("user_token", "abc123", { expires: 7, path: "https://www.sitepoint.com/" }); }, []); const userToken = Cookies.get("user_token"); const logout = () => { Cookies.remove("user_token"); }; return ( <div> <p>User Token: {userToken}</p> <button onClick={logout}>Logout</button> </div> ); }; export default MyComponent;
Naudojant trečiųjų šalių bibliotekas, pvz js-cookie suteikia švarią ir patogią API slapukų valdymui React komponentuose.
Šių skirtingų požiūrių supratimas padeda mums pasirinkti metodą, kuris geriausiai atitinka mūsų „React“ programų reikalavimus ir sudėtingumą.
Įgyvendinimo sesijos
„React“ programose seansai veikia serverio pusėje, o seanso identifikatorius – kliento pusėje, naudojant slapukus.
Sesijų įgyvendinimo būdai yra šie:
- serverio pusės sesijos
- žetonu pagrįstas autentifikavimas
Serverio pusės seansai
Serverio pusės seansai apima seanso duomenų saugojimą serveryje. Programoje „React“ tai reiškia serverio sistemos, pvz., Express.js, naudojimą kartu su sesijų valdymo tarpine programine įranga.
Express.js nustatymas naudojant greitąjį seansą:
Pirmiausia įdiekite reikiamus paketus:
npm install express express-sessionDabar sukonfigūruokite „Express“:
const express = require("express"); const session = require("express-session"); const app = express(); app.use( session({ secret: "your-secret-key", resave: false, saveUninitialized: true, }) );The
secretpasirašo seanso ID slapuką, pridėdamas papildomą saugumo lygį.Seansų naudojimas maršrutuose:
Konfigūruodami seansus galime juos naudoti savo maršrutuose:
app.post("/login", (req, res) => { req.session.user = { id: 1, username: "john_doe" }; res.send("Login successful!"); }); app.get("/profile", (req, res) => { const user = req.session.user; if (user) { res.json({ message: "Welcome to your profile!", user }); } else { res.status(401).json({ message: "Unauthorized" }); } });Sėkmingai prisijungus, vartotojo informacija išsaugoma sesijoje. Vėlesni prašymai į
/profilemaršrutas gali pasiekti šią informaciją.
Žetonu pagrįstas autentifikavimas
Žetonu pagrįstas autentifikavimas yra seansų valdymo metodas šiuolaikinėse „React“ programose. Tai apima prieigos rakto generavimą serveryje sėkmingai autentifikavus, jo siuntimą klientui ir įtraukimą į vėlesnių užklausų antraštes.
Žetonų generavimas ir siuntimas:
Serverio pusėje:
const jwt = require("jsonwebtoken"); app.post("/login", (req, res) => { const user = { id: 1, username: "john_doe" }; const token = jwt.sign(user, "your-secret-key", { expiresIn: "1h" }); res.json({ token }); });Serveris sugeneruoja JWT (JSON Web Token) ir siunčia jį klientui.
Ženklo įtraukimas į užklausas:
Kliento pusėje (Reaguoti):
import React, { createContext, useContext, useReducer } from "react"; const AuthContext = createContext(); const authReducer = (state, action) => { switch (action.type) { case "LOGIN": return { ...state, isAuthenticated: true, token: action.token }; case "LOGOUT": return { ...state, isAuthenticated: false, token: null }; default: return state; } }; const AuthProvider = ({ children }) => { const [state, dispatch] = useReducer(authReducer, { isAuthenticated: false, token: null, }); const login = (token) => dispatch({ type: "LOGIN", token }); const logout = () => dispatch({ type: "LOGOUT" }); return ( <AuthContext.Provider value={{ state, login, logout }}> {children} </AuthContext.Provider> ); }; const useAuth = () => { const context = useContext(AuthContext); if (!context) { throw new Error("useAuth must be used within an AuthProvider"); } return context; }; export { AuthProvider, useAuth };Pirmiau naudojamas React Context autentifikavimo būsenai valdyti. The
loginfunkcija atnaujina būseną gautu prieigos raktu.Žetonų naudojimas užklausose:
Turėdami prieigos raktą, įtraukite jį į užklausų antraštes:
import axios from "axios"; import { useAuth } from "./AuthProvider"; const api = axios.create({ baseURL: "https://your-api-url.com", }); api.interceptors.request.use((config) => { const { state } = useAuth(); if (state.isAuthenticated) { config.headers.Authorization = `Bearer ${state.token}`; } return config; }); export default api;Pateikdami užklausas su
Axiosprieigos raktas automatiškai veikia antraštėse.Bet kuris metodas padeda efektyviai valdyti seansus, užtikrinant saugią ir sklandžią patirtį.
„React“ geriausia praktika arba seansų ir slapukų valdymas
Seansų ir slapukų tvarkymas „React“ programose yra gyvybiškai svarbus kuriant saugias, patogias ir našias žiniatinklio programas.
Norėdami užtikrinti, kad programa „React“ veiktų, atlikite šiuos veiksmus.
Slapukų apsauga naudojant „HttpOnly“ ir saugias vėliavėles
Visada įtraukite HttpOnly ir Secure vėliavėles, kur taikoma.
HttpOnly. Vėliava apsaugo nuo atakų prieš slapuką naudojant „JavaScript“ ar bet kokį kitą kenkėjišką kodą, sumažindama kelių svetainių scenarijų (XSS) atakų riziką. Tai užtikrina, kad slapukai būtų prieinami tik serveriui:document.cookie = "sessionID=abc123; HttpOnly; path=/";Secure. Ši žyma užtikrina, kad slapukas siunčiamas tik saugiais, užšifruotais ryšiais (HTTPS). Tai sumažina piktybinių vartotojų perėmimo riziką:document.cookie = "sessionID=abc123; Secure; path=/";
Įdiegiamas sesijos galiojimo laikas ir prieigos rakto atnaujinimas
Norėdami padidinti saugumą, įdiekite seanso galiojimo pabaigos ir prieigos rakto atnaujinimo ypatybes. Reguliarus žetonų atnaujinimas arba seanso galiojimo laiko nustatymas padeda sumažinti neteisėtos prieigos riziką.
- Žetono atnaujinimas. Atnaujinkite autentifikavimo prieigos raktus, kad naudotojai liktų autentifikuoti. Tai aktualu programoms su ilgomis vartotojo sesijomis.
- Sesijos galiojimo laikas. Nustatykite pagrįstą seanso galiojimo laiką, kad apribotumėte vartotojo seanso trukmę. Tai padeda apsisaugoti nuo seanso užgrobimo.
const express = require("express");
const jwt = require("jsonwebtoken");
const app = express();
app.use(express.json());
const secretKey = "your-secret-key";
const generateToken = (user) => {
return jwt.sign(user, secretKey, { expiresIn: "15m" });
};
app.post("/login", (req, res) => {
const user = { id: 1, username: "john_doe" };
const token = generateToken(user);
res.json({ token });
});
app.post("/refresh-token", (req, res) => {
const refreshToken = req.body.refreshToken;
const user = decodeRefreshToken(refreshToken);
const newToken = generateToken(user);
res.json({ token: newToken });
});
app.listen(3001, () => {
console.log("Server is running on port 3001");
});
The /login Galutinis taškas grąžina pradinį JWT prieigos raktą po sėkmingo autentifikavimo. The /refresh-token galutinis taškas sugeneruoja naują prieigos raktą naudodamas atnaujinimo prieigos raktą.
Jautrių duomenų šifravimas
Venkite neskelbtinos informacijos tiesiogiai slapukuose ar seansuose. Kad neišvengiamais atvejais išsaugotumėte neskelbtinus duomenis, prieš saugodami juos užšifruokite. Šifravimas suteikia papildomo saugumo lygio, todėl piktavaliams vartotojams sunkiau pasiekti slaptą informaciją, net jei jie perima duomenis:
const sensitiveData = encrypt(data);
document.cookie = `sensitiveData=${sensitiveData}; Secure; HttpOnly; path=/`;
Naudojant atributą SameSite
The SameSite atributas padeda apsisaugoti nuo kelių svetainių užklausų klastojimo (CSRF) atakų, nurodydamas, kada siųsti slapukus su kelių svetainių užklausomis.
Griežtas. Slapukai siunčiami tik pirmosios šalies kontekste, neleidžiant trečiųjų šalių svetainėms pateikti užklausų vartotojo vardu.
document.cookie = "sessionID=abc123; Secure; HttpOnly; SameSite=Strict; path=/";Lax. Leidžia mums siųsti slapukus su aukščiausio lygio naršymu (pvz., spustelėjus nuorodą), bet ne su trečiųjų šalių svetainių inicijuotomis kelių svetainių POST užklausomis:
document.cookie = "sessionID=abc123; Secure; HttpOnly; SameSite=Lax; path=/";
Autentifikavimo ir programos būsenos atskyrimas
Venkite visos programos būsenos saugoti slapukuose arba seansuose. Autentifikavimo duomenis laikykite atskirai nuo kitų su programa susijusių būsenų, kad išlaikytumėte aiškumą ir sumažintumėte neskelbtinos informacijos atskleidimo riziką:
document.cookie = "authToken=xyz789; Secure; HttpOnly; path=/";
Trečiųjų šalių bibliotekų naudojimas slapukų valdymui
Apsvarstykite galimybę naudoti nusistovėjusias trečiųjų šalių bibliotekas slapukų valdymui. Bibliotekoms patinka js-cookie teikti švarią ir patogią API, pašalindama vietinės programos sudėtingumą document.cookie API:
import Cookies from "js-cookie";
Cookies.set("username", "john_doe", { expires: 7, path: "https://www.sitepoint.com/" });
const username = Cookies.get("username");
Cookies.remove("username");
Reguliariai atnaujinkite priklausomybes
Atnaujinkite trečiųjų šalių bibliotekas ir sistemas, kad gautumėte naudos iš saugos pataisų ir patobulinimų. Reguliarus priklausomybių atnaujinimas užtikrina, kad mūsų programa bus mažiau jautri žinomiems pažeidžiamumams.
Saugumo priemonių testavimas
Reguliariai atlikite savo programos saugos auditą ir testavimą. Tai apima įprastų pažeidžiamumų, tokių kaip XSS ir CSRF, testavimą. Apsvarstykite galimybę naudoti saugos įrankius ir praktiką, pvz., turinio saugos politiką (CSP), kad sumažintumėte saugumo riziką.
Santrauka
Slapukai ir seansai yra naudingi įrankiai kuriant saugias ir efektyvias „React“ programas. Jie skirti valdyti vartotojo autentifikavimą, išsaugoti vartotojo nuostatas arba įgyvendinti būsenos sąveiką.
Vadovaudamiesi geriausios praktikos pavyzdžiais ir naudodami nusistovėjusias bibliotekas, sukuriame tvirtas ir patikimas programas, kurios užtikrina sklandžią naudotojo patirtį ir teikiant pirmenybę saugumui.
Jei jums patiko šis „React“ straipsnis, peržiūrėkite šiuos nuostabius „SitePoint“ išteklius:
