Add CSRF protection to API endpoints and implement token management

Author: Dave3130

client/src/services/api.js

@@ -1,10 +1,39 @@
-// API service for handling all fetch requests
+// API service for handling all fetch requests, with CSRF token support
+
+let csrfToken = null;
+
+// Utility to fetch and cache CSRF token
+async function getCsrfToken() {
+  if (!csrfToken) {
+    const response = await fetch('/csrf-token');
+    const data = await response.json();
+    csrfToken = data.csrfToken;
+  }
+  return csrfToken;
+}
+
+// Utility to reset CSRF token on error (e.g. 403, token expired)
+function resetCsrfToken() {
+  csrfToken = null;
+}
+
+// Helper to include CSRF token in request headers for mutation requests
+async function withCsrf(headers = {}) {
+  const token = await getCsrfToken();
+  return { ...headers, 'csrf-token': token };
+}
+
 const API = {
-  // Generic fetch method with error handling
-  async fetchData(endpoint, options = {}) {
+  // Generic fetch method with error handling and CSRF support for mutation
+  async fetchData(endpoint, options = {}, requireCsrf = false) {
     try {
+      if (requireCsrf) {
+        options.headers = await withCsrf(options.headers || {});
+      }
       const response = await fetch(endpoint, options);
       if (!response.ok) {
+        // Reset CSRF token if forbidden (possible token expiry)
+        if (response.status === 403) resetCsrfToken();
         const errorData = await response.json().catch(() => ({}));
         throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);
       }
@@ -22,10 +51,10 @@ const API = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(userData),
-    }),
+    }, true),
     delete: (userId) => API.fetchData(`/api/users/${userId}`, {
       method: 'DELETE',
-    }),
+    }, true),
   },
 
   products: {
@@ -34,7 +63,7 @@ const API = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(productData),
-    }),
+    }, true),
   },
 
   tasks: {
@@ -43,12 +72,12 @@ const API = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(taskData),
-    }),
+    }, true),
     toggleComplete: (taskId, completed) => API.fetchData(`/api/tasks/${taskId}`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ completed: !completed }),
-    }),
+    }, true),
   },
 
   orders: {
@@ -57,7 +86,7 @@ const API = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(orderData),
-    }),
+    }, true),
   },
 
   search: {

server/index.js

@@ -1,5 +1,7 @@
 const express = require('express');
 const cors = require('cors');
+const cookieParser = require('cookie-parser');
+const csurf = require('csurf');
 require('dotenv').config();
 
 const app = express();
@@ -29,7 +31,18 @@ let tasks = [
 
 // Middleware
 app.use(cors());
+app.use(cookieParser());
 app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// CSRF protection middleware
+const csrfProtection = csurf({ cookie: true });
+app.use(csrfProtection);
+
+// Endpoint to provide CSRF token to clients
+app.get('/csrf-token', (req, res) => {
+  res.json({ csrfToken: req.csrfToken() });
+});
 
 // Request logging middleware
 app.use((req, res, next) => {
@@ -107,7 +120,7 @@ app.get('/api/users/:id', (req, res) => {
   res.json(user);
 });
 
-app.post('/api/users', (req, res) => {
+app.post('/api/users', csrfProtection, (req, res) => {
   const { name, email, role = 'user' } = req.body;
 
   if (!name || !email) {
@@ -136,7 +149,7 @@ app.post('/api/users', (req, res) => {
   });
 });
 
-app.put('/api/users/:id', (req, res) => {
+app.put('/api/users/:id', csrfProtection, (req, res) => {
   const userId = parseInt(req.params.id);
   const userIndex = users.findIndex(u => u.id === userId);
 
@@ -153,7 +166,7 @@ app.put('/api/users/:id', (req, res) => {
   });
 });
 
-app.delete('/api/users/:id', (req, res) => {
+app.delete('/api/users/:id', csrfProtection, (req, res) => {
   const userId = parseInt(req.params.id);
   const userIndex = users.findIndex(u => u.id === userId);
 
@@ -217,7 +230,7 @@ app.get('/api/products/:id', (req, res) => {
   res.json(product);
 });
 
-app.post('/api/products', (req, res) => {
+app.post('/api/products', csrfProtection, (req, res) => {
   const { name, price, category, stock, description } = req.body;
 
   if (!name || !price || !category) {
@@ -261,7 +274,7 @@ app.get('/api/orders', (req, res) => {
   });
 });
 
-app.post('/api/orders', (req, res) => {
+app.post('/api/orders', csrfProtection, (req, res) => {
   const { userId, productId, quantity = 1 } = req.body;
 
   if (!userId || !productId) {
@@ -331,7 +344,7 @@ app.get('/api/tasks', (req, res) => {
   });
 });
 
-app.post('/api/tasks', (req, res) => {
+app.post('/api/tasks', csrfProtection, (req, res) => {
   const { title, priority = 'medium', assignedTo } = req.body;
 
   if (!title) {
@@ -355,7 +368,7 @@ app.post('/api/tasks', (req, res) => {
   });
 });
 
-app.put('/api/tasks/:id', (req, res) => {
+app.put('/api/tasks/:id', csrfProtection, (req, res) => {
   const taskId = parseInt(req.params.id);
   const taskIndex = tasks.findIndex(t => t.id === taskId);
 
@@ -508,7 +521,7 @@ app.get('/api/test/large-data', (req, res) => {
   });
 });
 
-app.post('/api/test/echo', (req, res) => {
+app.post('/api/test/echo', csrfProtection, (req, res) => {
   res.json({
     message: 'Echo endpoint - returning your data',
     received: req.body,
@@ -575,7 +588,7 @@ app.get('/api/users/paginated', (req, res) => {
 });
 
 // ============ BULK OPERATIONS ============
-app.post('/api/users/bulk', (req, res) => {
+app.post('/api/users/bulk', csrfProtection, (req, res) => {
   const { users: newUsers } = req.body;
 
   if (!Array.isArray(newUsers)) {