Integrated CSRF middleware properly

backend/package.json

@@ -20,8 +20,9 @@
     "@types/express-validator": "^2.20.33",
     "@types/socket.io": "^3.0.1",
     "bcryptjs": "^3.0.2",
+    "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
-  "cookie-parser": "^1.4.6",
+    "csurf": "^1.11.0",
     "dotenv": "^17.2.3",
     "express": "^5.1.0",
     "express-rate-limit": "^8.2.0",
@@ -33,7 +34,9 @@
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.6",
+    "@types/cookie-parser": "^1.4.3",
     "@types/cors": "^2.8.19",
+    "@types/csurf": "^1.11.5",
     "@types/express": "^5.0.3",
     "@types/jest": "^30.0.0",
     "@types/jsonwebtoken": "^9.0.10",
@@ -45,7 +48,6 @@
     "supertest": "^7.1.4",
     "ts-jest": "^29.4.4",
     "ts-node-dev": "^2.0.0",
-    "@types/cookie-parser": "^1.4.3",
     "typescript": "^5.9.2"
   }
 }

backend/src/app.ts

@@ -8,12 +8,11 @@ import cors from "cors";
 import { 
   corsConfig, 
   helmetConfig, 
-  generalLimiter, 
-  speedLimiter, 
+  generalLimiter,
   securityHeaders, 
-  requestSizeLimiter,
-  csrfProtection
+  requestSizeLimiter
 } from "./middleware/security";
+import { csrfProtection, csrfErrorHandler } from "./middleware/csrf";
 import healthRoutes from "./routes/health";
 import authRoutes from "./routes/auth";
 import projectRoutes from "./routes/project";
@@ -53,6 +52,12 @@ export function createApp() {
   app.get("/", (req, res) => {
     res.json({ message: "Welcome to Collab Code Review API", status: "running" });
   });
+
+  // Add endpoint to get CSRF token (global for all routes)
+  app.get("/api/csrf-token", (req, res) => {
+    res.json({ csrfToken: req.csrfToken() });
+  });
+
 
   app.use("/health", healthRoutes);
   app.use("/api/auth", authRoutes);
@@ -63,5 +68,8 @@ export function createApp() {
   app.use("/api/users", generalLimiter, userRoutes);
   app.use("/api/branch-protection", branchProtectionRoutes);
 
+  // CSRF error handler
+  app.use(csrfErrorHandler);
+
   return { app, server, socketService };
 }

backend/src/middleware/csrf.ts

@@ -0,0 +1,36 @@
+import csrf from 'csurf';
+import { Request, Response, NextFunction } from 'express';
+
+// Create CSRF protection middleware
+// Uses cookies to store the secret (requires cookie-parser)
+export const csrfProtection = csrf({
+  cookie: {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'none' as 'none', // Important for cross-origin
+    path: '/'
+  }
+});
+
+// Error handler for CSRF failures
+export const csrfErrorHandler = (
+  err: any,
+  req: Request,
+  res: Response,
+  next: NextFunction
+) => {
+  if (err.code === 'EBADCSRFTOKEN') {
+    // Log security event
+    console.error('[CSRF] Invalid CSRF token detected', {
+      ip: req.ip,
+      path: req.path,
+      method: req.method
+    });
+
+    return res.status(403).json({
+      error: 'Invalid CSRF token',
+      message: 'Request rejected due to invalid security token'
+    });
+  }
+  next(err);
+};

backend/src/middleware/security.ts

@@ -52,7 +52,8 @@ export const corsConfig = cors({
     'Accept',
     'Authorization',
     'Cache-Control',
-    'X-HTTP-Method-Override'
+    'X-HTTP-Method-Override',
+    'x-csrf-token'
   ],
   maxAge: 86400 // Cache preflight for 24 hours
 });

frontend/frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { initializeCsrf } from './api';
 import { BrowserRouter as Router, Routes, Route, Navigate, Link } from 'react-router-dom';
 import SimpleHome from './pages/SimpleHome';
 import Dashboard from './pages/Dashboard';
@@ -37,6 +38,11 @@ function App() {
     };
   }, []);
 
+  useEffect(() => {
+    // Initialize CSRF token on app mount
+    initializeCsrf();
+  }, []);
+
   return (
     <ErrorProvider>
       <Router>