HTTP-only Cookies và CSRF Token: Giải Pháp Đơn Giản, An Toàn và Mượt Mà Cho SPA

Mở Đầu

Hiểu Về HTTP-only Cookies và CSRF Token

HTTP-only Cookies Là Gì?

CSRF Token Là Gì?

Sự Kết Hợp Giúp Tăng Cường Bảo Mật Như Thế Nào?

Ưu Điểm của Giải Pháp HTTP-only Cookies + CSRF Token

1. Miễn Nhiễm Với XSS

2. Gửi Tự Động Token Kèm Mỗi Yêu Cầu

3. Bảo Vệ CSRF Tích Hợp Với Thuộc Tính SameSite và Secure

4. Tương Thích Mượt Mà Với React, SSR, Uploads, Mobile, và Hệ Thống Phức Tạp

Hướng Dẫn Cài Đặt Cơ Bản

Thiết Lập Cookie HTTP-only Trong Express + Node

res.cookie('token', tokenValue, {
  httpOnly: true,
  secure: true, // Chỉ trên HTTPS
  sameSite: 'Lax',
});

Tạo và Gửi CSRF Token

const csurf = require('csurf');
app.use(csurf());

app.get('/form', (req, res) => {
  res.json({ csrfToken: req.csrfToken() });
});

Sử Dụng CSRF Token Trong Client React

fetch('/api/data', {
  method: 'POST',
  headers: {
    'CSRF-Token': csrfToken,
  },
  body: JSON.stringify(data),
});

Ví Dụ Thực Tế và Ứng Dụng



Kết Luận

Tham Khảo