Keselamatan Web: localStorage vs cookie untuk menyimpan token

Amalan yang paling selamat ialah menyimpan token dalam keadaan aplikasi. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa jika pengguna memuat semula aplikasi, token akan ditetapkan semula. Itu boleh menyebabkan kehilangan status pengesahan pengguna.

Itulah sebabnya token perlu disimpan dalam kuki atau localStorage/sessionStorage.

localStorage VS cookie untuk menyimpan token

Menyimpan token pengesahan dalam localStorage boleh menimbulkan risiko keselamatan, terutamanya dalam konteks kerentanan Skrip Silang Tapak (XSS), yang berpotensi membawa kepada kecurian token oleh pelakon yang berniat jahat.

Memilih untuk menyimpan token dalam kuki, dikonfigurasikan dengan atribut HttpOnly, boleh meningkatkan keselamatan kerana ia tidak boleh diakses oleh JavaScript pihak pelanggan. Dalam aplikasi sampel kami, kami menggunakan js-cookie untuk pengurusan kuki, dengan mengandaikan API sebenar akan menguatkuasakan atribut HttpOnly untuk keselamatan yang dipertingkatkan dan aplikasi itu tidak mempunyai akses kepada kuki dari pihak pelanggan.

Pelaksanaan menggunakan React dan Typescript

Untuk melaksanakan pengurusan token selamat dalam aplikasi React TypeScript dengan js-cookie, di mana API sebenar akan menguatkuasakan atribut HttpOnly, anda boleh mengikuti langkah berikut:

1. Memahami Persediaan

Kuki HttpOnly: Kuki ini ditetapkan oleh pelayan dan tidak boleh diakses melalui JavaScript, menjadikannya lebih selamat daripada serangan XSS.
Andaian: Pelayan akan mengendalikan tetapan dan mengurus kuki HttpOnly. Kod pihak pelanggan anda akan menumpukan pada pengendalian token melalui respons dan permintaan API.

2. React TypeScript Setup

Pertama, pastikan anda telah memasang js-cookie:

npm install js-cookie

3. Menyediakan Pengurusan Token

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. Menggunakan Konteks Auth dalam Komponen

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. Mengendalikan Kuki HttpOnly

Memandangkan kod sisi klien tidak boleh mengakses kuki HttpOnly secara langsung, pelayan mesti mengendalikan kuki ini. Dalam senario dunia sebenar:

Log Masuk: Apabila pengguna log masuk, pelayan menetapkan kuki HttpOnly dan pelanggan tidak mengurusnya secara langsung.
Permintaan API: Semua permintaan yang memerlukan pengesahan harus menyertakan kelayakan: pilihan 'termasuk' untuk menghantar kuki HttpOnly.

6. Pelaksanaan Bahagian Pelayan

Pastikan API sebelah pelayan anda menetapkan token sebagai kuki HttpOnly. Contohnya, dalam pelayan Express.js:

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

7. Lindungi Permohonan Anda

• Sentiasa gunakan https dalam pengeluaran untuk memastikan kuki dihantar dengan selamat.

• Pertimbangkan tetapan selamat: benar dalam kuki anda untuk memastikan ia hanya dihantar melalui HTTPS.

• Gunakan SameSite=Strict atau Lax untuk menghalang serangan CSRF.

Terima kasih kerana membaca! Jika anda mendapati artikel ini membantu, sila berikan acungan tangan. Jika anda mempunyai sebarang soalan atau memerlukan penjelasan lanjut tentang sebarang topik yang dibincangkan, sila hubungi saya. Saya di sini untuk membantu dan ingin mendengar daripada anda! Anda boleh menemui saya di Twitter atau LinkedIn Tidak sabar-sabar untuk berhubung dengan anda!.

Atas ialah kandungan terperinci Keselamatan Web: localStorage vs cookie untuk menyimpan token. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!