CSRF protection concept in Flask - Mini Project: Build & Apply

CSRF Protection Concept in Flask

📖 Scenario: You are building a simple Flask web app that has a form where users can submit their favorite color. To keep the app safe from CSRF attacks, you will add CSRF protection step-by-step.

🎯 Goal: Build a Flask app with a form that uses CSRF protection to prevent unauthorized form submissions.

📋 What You'll Learn

Create a Flask app with a route for the form

Add a secret key configuration for CSRF

Use Flask-WTF to add CSRF protection to the form

Render the form with CSRF token included

💡 Why This Matters

🌍 Real World

CSRF protection is essential in web apps to stop attackers from tricking users into submitting unwanted requests.

💼 Career

Understanding CSRF and how to protect against it is a key skill for web developers working with Flask or any web framework.

1

Create a basic Flask app with a form route

Create a Flask app by importing Flask and instantiate it as app. Then create a route /color that returns a simple HTML form with a POST method and an input named color.

Flask

from flask import Flask, request

app = Flask(__name__)

# Create a route '/color' that returns a form with method POST and input named 'color'
# Your code here

Need a hint?

Start by importing Flask and creating the app instance. Then define a route '/color' that accepts GET and POST methods. Return a simple HTML form with an input named 'color'.

2

Add a secret key configuration for CSRF

Add a secret key to the Flask app by setting app.config['SECRET_KEY'] to the string 'mysecretkey'. This key is needed for CSRF protection.

Flask

from flask import Flask, request

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

# Your code here

Need a hint?

Set the secret key on the app config to enable secure sessions and CSRF protection.

3

Use Flask-WTF to add CSRF protection to the form

Import FlaskForm and StringField from flask_wtf and wtforms. Create a form class called ColorForm that inherits from FlaskForm and has a color field of type StringField. Then import CSRFProtect from flask_wtf and initialize it with the Flask app.

Flask

from flask import Flask, request
from flask_wtf import FlaskForm, CSRFProtect
from wtforms import StringField

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

csrf = CSRFProtect(app)

class ColorForm(FlaskForm):
    color = StringField('color')

# Your code here

Need a hint?

Import FlaskForm and CSRFProtect. Create a ColorForm class with a color field. Initialize CSRFProtect with the app.

4

Render the form with CSRF token included

Modify the color route to create an instance of ColorForm. Render the form in the response using form.csrf_token inside the form HTML. Use form.color.label and form.color() to render the label and input. Return the form HTML as a string.

Flask

from flask import Flask, request
from flask_wtf import FlaskForm, CSRFProtect
from wtforms import StringField

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

csrf = CSRFProtect(app)

class ColorForm(FlaskForm):
    color = StringField('color')

@app.route('/color', methods=['GET', 'POST'])
def color():
    form = ColorForm()
    # Render the form with CSRF token and color field label and input
    # Your code here

Need a hint?

Create a ColorForm instance. Use f-string to include form.csrf_token, form.color.label, and form.color() inside the form HTML.