CSRF protection in Express - Step-by-Step Execution

Concept Flow - CSRF protection

Client sends request

↓

Server checks CSRF token

↓

Process

↓

Send response

The server checks if the CSRF token sent by the client matches the expected token before processing the request.

Execution Sample

Express

const cookieParser = require('cookie-parser');
const csrf = require('csurf');
const express = require('express');
const app = express();
app.use(cookieParser());
app.use(express.urlencoded({ extended: false }));
app.use(csrf({ cookie: true }));
app.get('/form', (req, res) => {
  res.send(`<form method="POST" action="/form">
    <input type="hidden" name="_csrf" value="${req.csrfToken()}">
    <button type="submit">Submit</button>
  </form>`);
});
app.post('/form', (req, res) => {
  res.send('Form submitted');
});

This code adds CSRF protection middleware to an Express app and handles a POST form submission.

Execution Table

Step	Request Type	CSRF Token Present	Token Valid?	Action	Response
1	GET /form	No (token generated)	N/A	Generate token and send form	Form with CSRF token
2	POST /form	Yes (token sent)	Yes	Process form data	Form submitted
3	POST /form	Yes (token sent)	No	Reject request	403 Forbidden
4	POST /form	No token	No	Reject request	403 Forbidden

💡 Requests without a valid CSRF token are rejected to prevent CSRF attacks.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
csrfToken	undefined	generated token string	token string from client	token string from client	undefined

Key Moments - 2 Insights

Why does the server reject a POST request without a CSRF token?

Because the CSRF middleware requires a valid token to confirm the request is from the trusted client, as shown in execution_table rows 3 and 4.

When is the CSRF token generated and sent to the client?

During a safe GET request, the server generates and sends the token embedded in the form, as shown in execution_table row 1.

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 2 when the token is valid?

A The server generates a new CSRF token

B The server rejects the request with 403 Forbidden

C The server processes the form data and sends a success response

D The server ignores the token and processes the request

💡 Hint

Refer to execution_table row 2 under 'Action' and 'Response'

At which step does the server generate the CSRF token?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Check execution_table row 1 where the token is generated and sent

If the client sends a POST request without any CSRF token, what response will the server give?

A 200 OK with form submitted message

B 403 Forbidden error

C Redirect to GET /form

D 500 Internal Server Error

💡 Hint

See execution_table row 4 where no token causes rejection

Concept Snapshot

CSRF protection in Express:
- Use csurf middleware to add CSRF tokens
- Server generates token on safe requests (GET)
- Client sends token with unsafe requests (POST)
- Server validates token before processing
- Reject requests with missing or invalid tokens
- Prevents unauthorized cross-site requests

Full Transcript

CSRF protection in Express works by generating a unique token for each user session during safe requests like GET. This token is sent to the client embedded in forms. When the client submits a form with a POST request, it must include this token. The server checks the token's validity before processing the request. If the token is missing or invalid, the server rejects the request with a 403 Forbidden error. This process prevents attackers from tricking users into submitting unwanted requests from other sites. The csurf middleware handles token generation and validation automatically. The flow starts with the client requesting a form, the server generating and sending a token, then the client submitting the form with the token, and the server validating it before accepting the data.

Practice

1. What is the main purpose of CSRF protection in an Express app?

easy

A. To prevent unauthorized commands from being sent from other websites

B. To speed up the server response time

C. To encrypt user passwords

D. To log user activity on the server

Solution

1. Step 1: Understand CSRF meaning

   CSRF stands for Cross-Site Request Forgery, which tricks users into submitting unwanted actions.

2. Step 2: Identify CSRF protection goal

   Protection stops other sites from sending commands on behalf of a user without permission.

3. Final Answer:

   To prevent unauthorized commands from being sent from other websites -> Option A

4. Quick Check:

   CSRF protection = prevent unauthorized commands [OK]

Hint: CSRF stops fake requests from other sites [OK]

Common Mistakes:

• Confusing CSRF with password encryption
• Thinking it speeds up server
• Believing it logs user activity

2. Which of the following is the correct way to add CSRF protection middleware in Express using the csurf package?

easy

A. app.use(csurf({ cookie: true }))

B. app.use(csrf())

C. app.use(csrfProtection())

D. app.use(csrf({ session: false }))

Solution

1. Step 1: Recall csurf usage

   The csurf middleware is used as csurf({ cookie: true }) to enable cookie-based CSRF tokens.

2. Step 2: Check options correctness

   Options B, C, and D use wrong function names or invalid options.

3. Final Answer:

   app.use(csurf({ cookie: true })) -> Option A

4. Quick Check:

   Correct csurf syntax = app.use(csurf({ cookie: true })) [OK]

Hint: Use csurf with correct function and options [OK]

Common Mistakes:

• Using wrong function name like csrf()
• Missing the cookie option
• Passing invalid options

3. Given this Express route using csurf middleware, what will happen if the CSRF token is missing or invalid?

app.post('/submit', csurf({ cookie: true }), (req, res) => {
  res.send('Form submitted');
});

medium

A. The server redirects to the home page

B. The server responds with 'Form submitted' anyway

C. The server throws a 403 Forbidden error

D. The server crashes with an uncaught exception

Solution

1. Step 1: Understand csurf error handling

   If the CSRF token is missing or invalid, csurf middleware triggers an error with status 403 Forbidden.

2. Step 2: Check route behavior

   The route handler is not called; instead, Express sends a 403 error response.

3. Final Answer:

   The server throws a 403 Forbidden error -> Option C

4. Quick Check:

   Invalid CSRF token = 403 Forbidden error [OK]

Hint: Missing token causes 403 error, not success [OK]

Common Mistakes:

• Assuming form submits anyway
• Thinking server redirects automatically
• Believing server crashes

4. You added csurf middleware but your form keeps failing CSRF validation. Which of these is the most likely cause?

medium

A. You did not install the cookie-parser package

B. You used app.use(express.json()) before csurf()

C. You set cookie: false in csurf options

D. You forgot to include the CSRF token in the form as a hidden input

Solution

1. Step 1: Check form token inclusion

   CSRF protection requires the token to be sent with the form, usually as a hidden input field.

2. Step 2: Evaluate other options

   While cookie-parser is needed if using cookies, the most common cause is missing token in the form.

3. Final Answer:

   You forgot to include the CSRF token in the form as a hidden input -> Option D

4. Quick Check:

   Missing token in form = validation fails [OK]

Hint: Always add CSRF token hidden input in forms [OK]

Common Mistakes:

• Ignoring token in form fields
• Misordering middleware without reason
• Assuming cookie-parser always required

5. You want to protect an Express app using csurf with cookie-based tokens and render the token in a form. Which code snippet correctly sets up the middleware and passes the token to the template?

hard

A. app.use(csurf({ cookie: false })); app.get('/form', (req, res) => { res.render('form', { csrfToken: req.csrfToken() }); });

B. app.use(csurf({ cookie: true })); app.get('/form', (req, res) => { res.render('form', { csrfToken: req.csrfToken() }); });

C. app.use(csurf()); app.get('/form', (req, res) => { res.render('form', { csrfToken: req.csrfToken }); });

D. app.use(csurf({ cookie: true })); app.get('/form', (req, res) => { res.render('form', { csrfToken: req.csrfToken }); });

Solution

1. Step 1: Setup csurf with cookie option

   Use csurf({ cookie: true }) to enable cookie-based CSRF tokens.

2. Step 2: Call req.csrfToken() as a function

   To get the token string, call req.csrfToken(), not just reference the function.

3. Step 3: Pass token to template

   Pass the token as csrfToken in the render call for the form to use.

4. Final Answer:

   app.use(csurf({ cookie: true })); app.get('/form', (req, res) => { res.render('form', { csrfToken: req.csrfToken() }); }); -> Option B

5. Quick Check:

   Correct csurf setup + token call = app.use(csurf({ cookie: true })); app.get('/form', (req, res) => { res.render('form', { csrfToken: req.csrfToken() }); }); [OK]

Hint: Call req.csrfToken() and enable cookie option [OK]

Common Mistakes:

• Not calling req.csrfToken() as a function
• Using cookie: false when cookies are needed
• Passing function reference instead of token string