CSRF protection in Express - Performance & Optimization

Performance: CSRF protection

MEDIUM IMPACT

CSRF protection affects the server response time and client-side interaction by adding security tokens to requests, which can slightly increase payload size and processing.

Protecting forms from CSRF attacks in an Express app

Express

import csurf from 'csurf';
const csrfProtection = csurf({ cookie: true });

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

app.post('/submit', csrfProtection, (req, res) => {
  processForm(req.body);
  res.send('Form submitted');
});

Validates CSRF tokens on requests, preventing unauthorized actions while adding minimal processing and token size overhead.

📈 Performance GainAdds small token (~100 bytes) and one token validation per request; triggers negligible processing delay (~1-3ms).

Protecting forms from CSRF attacks in an Express app

Express

app.post('/submit', (req, res) => {
  // No CSRF token validation
  processForm(req.body);
  res.send('Form submitted');
});

No CSRF protection means the app is vulnerable to malicious cross-site requests, risking user data and actions.

📉 Performance CostNo direct performance cost but high security risk leading to potential user trust loss.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No CSRF Protection	No extra DOM nodes	0	0	[X] Bad - insecure, no protection
CSRF Token in Form (cookie-based)	Adds hidden input for token	0	Minimal	[OK] Good - secure with minimal overhead

Rendering Pipeline

CSRF protection adds token generation and validation steps on the server before sending or accepting requests, slightly increasing server processing time but not affecting browser rendering stages directly.

→Server Processing

→Network Transfer

⚠️ BottleneckServer Processing due to token generation and validation logic

Core Web Vital Affected

INP

CSRF protection affects the server response time and client-side interaction by adding security tokens to requests, which can slightly increase payload size and processing.

Optimization Tips

1CSRF tokens add minimal server processing delay (~1-3ms) per request.

2Use cookie-based tokens to reduce payload size and simplify validation.

3CSRF protection mainly affects interaction responsiveness (INP), not loading speed (LCP).

Performance Quiz - 3 Questions

How does adding CSRF protection typically affect page load speed?

A Adds large payloads that slow down network transfer significantly

B Blocks browser rendering until token is verified

C Slightly increases server response time due to token generation and validation

D Triggers multiple reflows on the client side

DevTools: Network

How to check: Open DevTools > Network tab, submit a form and inspect the request payload and response headers for CSRF token presence.

What to look for: Look for a CSRF token in request headers or form data and verify no large payload increase; check response times for minimal delay.