CSRF protection in Flask - Step-by-Step Execution

Concept Flow - CSRF protection

User loads form page

↓

Server generates CSRF token

↓

Token embedded in form as hidden field

↓

User submits form with token

↓

Server checks token validity

↓

Process

↓

form data

This flow shows how a CSRF token is created, sent with the form, and checked on submission to protect against unauthorized requests.

Execution Sample

Flask

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from flask_wtf.csrf import CSRFProtect
from flask import Flask

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'

csrf = CSRFProtect(app)

class MyForm(FlaskForm):
    name = StringField('Name')
    submit = SubmitField('Submit')

This code sets up CSRF protection in Flask and creates a form that automatically includes a CSRF token.

Execution Table

Step	Action	CSRF Token Generated	Token Sent in Form	Token Received	Token Valid?	Result
1	User requests form page	Token123	Token123 embedded in form	N/A	N/A	Form displayed with token
2	User fills form and submits	Token123	Token123 sent with form data	Token123	Yes	Form data processed
3	User submits form without token	Token123	No token sent	None	No	Request rejected
4	User submits form with wrong token	Token123	WrongToken456 sent	WrongToken456	No	Request rejected

💡 Execution stops when form submission is accepted or rejected based on token validity.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
csrf_token	None	Token123	Token123	Token123	Token123
form_token_received	None	None	Token123	None	WrongToken456
token_valid	False	N/A	True	False	False

Key Moments - 2 Insights

Why does the server reject the form submission if the CSRF token is missing or wrong?

Because the server compares the received token with the one it generated (see execution_table rows 3 and 4). If they don't match, it means the request might be forged, so it rejects it to protect the user.

How does the CSRF token get into the form the user submits?

The token is generated by the server when the form page loads and embedded as a hidden field inside the form (see execution_table step 1). This way, when the user submits, the token is sent back automatically.

Visual Quiz - 3 Questions

Look at the execution_table, what is the token_valid value at Step 2?

A True

B False

C None

D N/A

💡 Hint

Check the 'Token Valid?' column at Step 2 in the execution_table.

At which step does the server reject the request due to missing token?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for the row where 'Token Received' is 'None' and 'Result' is 'Request rejected'.

If the token sent with the form was changed to 'Token123' at Step 4, what would happen?

A Request rejected

B Form data processed

C Form redisplayed

D Server error

💡 Hint

Compare Step 2 and Step 4 token values and results in the execution_table.

Concept Snapshot

CSRF protection in Flask:
- Server generates a unique token per user session.
- Token is embedded in forms as hidden fields.
- On form submit, server checks token matches.
- If valid, process form; if not, reject request.
- Use Flask-WTF's CSRFProtect for easy setup.

Full Transcript

CSRF protection works by creating a secret token when the user loads a form. This token is hidden inside the form and sent back when the user submits. The server checks if the token matches what it created. If it matches, the form data is accepted. If not, the request is rejected to prevent unauthorized actions. Flask-WTF helps by automatically generating and checking these tokens in forms.