CSRF protection in Express - Mini Project: Build & Apply

CSRF Protection in Express

📖 Scenario: You are building a simple Express web server that serves a form to submit user data. To keep your app safe from Cross-Site Request Forgery (CSRF) attacks, you want to add CSRF protection.CSRF attacks happen when a malicious site tricks a user's browser into submitting unwanted requests to your server. Using a CSRF token helps your server verify that the form submission is genuine.

🎯 Goal: Build an Express server that uses the csurf middleware to protect a form from CSRF attacks. The form should include a hidden CSRF token field, and the server should validate this token on form submission.

📋 What You'll Learn

Create an Express app with the express and csurf packages

Set up cookie parsing with cookie-parser

Add the csurf middleware configured to use cookies

Serve a simple HTML form that includes the CSRF token as a hidden input

Handle the form POST request and verify the CSRF token

💡 Why This Matters

🌍 Real World

CSRF protection is essential for web apps that accept form submissions to prevent attackers from tricking users into submitting unwanted requests.

💼 Career

Understanding and implementing CSRF protection is a key skill for backend developers working with Express or similar web frameworks to build secure applications.

1

Set up Express app with cookie-parser

Create an Express app by importing express and cookie-parser. Then create an app instance with express() and use cookieParser() as middleware.

Express

const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();

// Your code here

Need a hint?

Use require('express') and require('cookie-parser'). Then call express() to create the app and add cookieParser() as middleware.

2

Add csurf middleware with cookie option

Import csurf and add it as middleware to the app using app.use(). Configure csurf with the option { cookie: true }.

Express

const express = require('express');
const cookieParser = require('cookie-parser');
const csurf = require('csurf');

const app = express();
app.use(cookieParser());

// Your code here

Need a hint?

Import csurf and add it with app.use(csurf({ cookie: true })) to enable CSRF protection using cookies.

3

Serve a form with CSRF token included

Add a GET route at '/' that sends an HTML form. The form must include a hidden input named _csrf with the value from req.csrfToken(). Use res.send() to send the HTML string.

Express

const express = require('express');
const cookieParser = require('cookie-parser');
const csurf = require('csurf');

const app = express();
app.use(cookieParser());
app.use(csurf({ cookie: true }));

// Your code here

Need a hint?

Use app.get('/', (req, res) => { ... }) and send a form with a hidden input named _csrf set to req.csrfToken().

4

Handle POST request and verify CSRF token

Add middleware to parse URL-encoded form data with express.urlencoded({ extended: false }). Then add a POST route at '/process' that sends a success message. The CSRF token will be verified automatically by the csurf middleware.

Express

const express = require('express');
const cookieParser = require('cookie-parser');
const csurf = require('csurf');

const app = express();
app.use(cookieParser());
app.use(csurf({ cookie: true }));

app.get('/', (req, res) => {
    res.send(`
        
            
            Submit
        
    `);
});

// Your code here

Need a hint?

Add express.urlencoded({ extended: false }) middleware to parse form data. Then add a POST route at /process that sends a success message.