CSRF protection concept in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the CSRF protection extension in Flask.

Flask

from flask_wtf.csrf import [1]

Drag options to blanks, or click blank then click option'

ACSRFProtect

BFlaskForm

Crender_template

DFlask

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FlaskForm instead of CSRFProtect

Importing from flask instead of flask_wtf

Using render_template which is unrelated

The CSRFProtect class is imported from flask_wtf.csrf to enable CSRF protection in Flask apps.

2fill in blank

medium

Complete the code to initialize CSRF protection for the Flask app.

Flask

csrf = [1](app)

Drag options to blanks, or click blank then click option'

ACSRFProtect

BFlaskForm

Crender_template

DFlask

Attempts:

3 left

💡 Hint

Common Mistakes

Using FlaskForm instead of CSRFProtect

Calling CSRFProtect without passing the app

Trying to call render_template here

We create an instance of CSRFProtect and pass the Flask app to enable CSRF protection.

3fill in blank

hard

Fix the error in the form template to include the CSRF token field.

Flask

<form method="POST">
  [1]
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

Drag options to blanks, or click blank then click option'

A{% csrf_token %}

B{{ form.csrf_token }}

C{{ csrf_token }}

D{{ form.token }}

Attempts:

3 left

💡 Hint

Common Mistakes

Using {{ csrf_token }} without form prefix

Using template tags {% csrf_token %} which is invalid in Flask

Using {{ form.token }} which is incorrect

In Flask-WTF templates, the CSRF token is included with {{ form.csrf_token }}.

4fill in blank

hard

Fill both blanks to create a FlaskForm with a CSRF-protected text field and submit button.

Flask

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

class MyForm(FlaskForm):
    name = [1]('Name')
    submit = [2]('Send')

Drag options to blanks, or click blank then click option'

AStringField

BSubmitField

CTextField

DButtonField

Attempts:

3 left

💡 Hint

Common Mistakes

Using TextField which is deprecated

Using ButtonField which does not exist

Mixing up SubmitField and StringField

The form uses StringField for text input and SubmitField for the submit button, both protected by CSRF automatically.

5fill in blank

hard

Fill all three blanks to validate the CSRF token in a Flask route handling POST requests.

Flask

from flask import Flask, render_template, request
from flask_wtf.csrf import CSRFProtect

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'
csrf = CSRFProtect(app)

@app.route('/submit', methods=['GET', 'POST'])
def submit():
    form = MyForm()
    if request.method == '[1]' and form.[2]():
        # Process form data
        return 'Success'
    return render_template('submit.html', form=[3])

Drag options to blanks, or click blank then click option'

APOST

Bvalidate_on_submit

Cform

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for GET instead of POST

Calling form.validate() instead of validate_on_submit()

Passing wrong variable to template

The route checks if the request method is POST, then calls form.validate_on_submit() to validate including CSRF token, and passes the form to the template.