CSRF protection 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 import [1]

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

AFlaskForm

BCSRFProtect

Crender_template

DFlask

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FlaskForm instead of CSRFProtect

Importing render_template which is unrelated

Importing Flask which is the main framework, not CSRF protection

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

2fill in blank

medium

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

Flask

csrf = CSRFProtect()
app = Flask(__name__)
csrf.[1](app)

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

Ainit_app

Brun

Cstart

Dcreate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'run' or 'start' which are not methods of CSRFProtect

Trying to call 'create' which does not exist

The init_app method connects the CSRF protection to the Flask app instance.

3fill in blank

hard

Fix the error in the form class to include CSRF protection.

Flask

class MyForm([1]):
    name = StringField('Name')
    submit = SubmitField('Submit')

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

ABaseForm

BForm

CFlaskForm

DCSRFProtect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Form' which does not include CSRF by default

Using 'CSRFProtect' which is not a form base class

Forms that inherit from FlaskForm automatically include CSRF protection tokens.

4fill in blank

hard

Fill both blanks to create a dictionary comprehension that includes only fields with data and their CSRF token.

Flask

data = {field.name: field.data for field in form if field.[1] and field.name != '[2]'}

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

Adata

Bcsrf_token

Chas_data

Dis_submitted

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'has_data' which is not a valid attribute

Using 'is_submitted' which is unrelated

Not excluding the 'csrf_token' field

We check field.data to include fields with data and exclude the csrf_token field.

5fill in blank

hard

Fill all three blanks to validate the form and handle CSRF errors in a Flask route.

Flask

from flask_wtf.csrf import [1]

@app.route('/submit', methods=['POST'])
def submit():
    form = MyForm()
    if form.[2]():
        # process form data
        return 'Success'
    else:
        return [3]('CSRF token missing or invalid', 400)

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

ACSRFError

Bvalidate_on_submit

Cabort

Dcsrf_error

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'csrf_error' which is not a class to import

Using 'validate' instead of 'validate_on_submit'

Returning a string instead of aborting with an error code

CSRFError is imported to handle CSRF exceptions, validate_on_submit() checks form validity including CSRF, and abort sends an HTTP error response.

Practice

1. What is the main purpose of CSRF protection in a Flask web application?

easy

A. To prevent unauthorized commands from being transmitted from a user the website trusts

B. To speed up the loading time of web pages

C. To encrypt user passwords in the database

D. To improve the visual design of forms

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 fake requests that appear to come from trusted users, preventing unauthorized actions.

3. Final Answer:

   To prevent unauthorized commands from being transmitted from a user the website trusts -> Option A

4. Quick Check:

   CSRF protection = prevent fake trusted requests [OK]

Hint: CSRF stops fake form submissions from trusted users [OK]

Common Mistakes:

• Confusing CSRF with password encryption
• Thinking CSRF improves page speed
• Believing CSRF changes form appearance

2. Which of the following is the correct way to enable CSRF protection in a Flask app?

easy

A. app = Flask(__name__)
app.secret_key = 'secret'
csrf = CSRFProtect(app)

B. app = Flask(__name__)
csrf = CSRFProtect()
app.secret_key = 'secret'

C. app = Flask(__name__)
csrf = CSRFProtect(app)
app.secret_key = None

D. app = Flask(__name__)
app.secret_key = None
csrf = CSRFProtect(app)

Solution

1. Step 1: Set secret key before CSRFProtect

   CSRF protection requires a secret key set on the Flask app for token generation.

2. Step 2: Initialize CSRFProtect with app

   Passing the app instance to CSRFProtect enables protection on the app.

3. Final Answer:

   app = Flask(__name__) app.secret_key = 'secret' csrf = CSRFProtect(app) -> Option A

4. Quick Check:

   Secret key set + CSRFProtect(app) = correct setup [OK]

Hint: Set secret_key before CSRFProtect(app) call [OK]

Common Mistakes:

• Not setting secret_key or setting it after CSRFProtect
• Passing no app to CSRFProtect
• Setting secret_key to None disables protection

3. Given this Flask form code snippet, what happens if the CSRF token is missing or invalid when submitting the form?

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

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

medium

A. The form submission is accepted without any error

B. The form automatically regenerates a new CSRF token and retries

C. A CSRFError is raised and the request is rejected

D. The form data is saved but a warning is logged

Solution

1. Step 1: Understand FlaskForm CSRF behavior

   FlaskForm automatically checks for a valid CSRF token on submission.

2. Step 2: Effect of missing/invalid token

   If the token is missing or wrong, Flask-WTF raises a CSRFError and rejects the request.

3. Final Answer:

   A CSRFError is raised and the request is rejected -> Option C

4. Quick Check:

   Invalid CSRF token = CSRFError raised [OK]

Hint: Missing CSRF token causes error and blocks form [OK]

Common Mistakes:

• Assuming form submits anyway without token
• Thinking token regenerates automatically on failure
• Believing data saves with just a warning

4. You added CSRFProtect to your Flask app but still get CSRF errors on form submission. Which of these is the most likely cause?

medium

A. You called csrf = CSRFProtect(app) before creating the Flask app

B. You set app.secret_key to a strong random value

C. You used FlaskForm instead of plain WTForms Form

D. You forgot to include {{ form.csrf_token }} inside your HTML form

Solution

1. Step 1: Check CSRF token inclusion in form

   The CSRF token must be included in the HTML form using {{ form.csrf_token }} for validation.

2. Step 2: Understand error cause

   If the token is missing in the form, the server rejects the submission with a CSRF error.

3. Final Answer:

   You forgot to include {{ form.csrf_token }} inside your HTML form -> Option D

4. Quick Check:

   Missing token in form = CSRF errors [OK]

Hint: Always add {{ form.csrf_token }} inside your form tag [OK]

Common Mistakes:

• Assuming secret_key causes errors when set correctly
• Thinking FlaskForm causes errors instead of helping
• Initializing CSRFProtect before app creation causes syntax error, not CSRF error

5. You want to protect an API endpoint in Flask that accepts JSON POST requests from your frontend. Which approach correctly applies CSRF protection?

hard

A. Disable CSRF protection for JSON endpoints because tokens only work with HTML forms

B. Use CSRFProtect and require the frontend to send the CSRF token in a custom header, then validate it in Flask

C. Add {{ form.csrf_token }} in the JSON payload sent by the frontend

D. Use FlaskForm on the API endpoint without any token validation

Solution

1. Step 1: Understand CSRF with JSON APIs

   CSRF tokens can protect JSON POST requests if the token is sent in headers and validated server-side.

2. Step 2: Correct method to protect API

   Use CSRFProtect and require frontend to send token in a custom header (e.g., X-CSRFToken), then validate it in Flask.

3. Final Answer:

   Use CSRFProtect and require the frontend to send the CSRF token in a custom header, then validate it in Flask -> Option B

4. Quick Check:

   CSRF token in header + validation = secure JSON API [OK]

Hint: Send CSRF token in header for JSON API protection [OK]

Common Mistakes:

• Thinking CSRF tokens only work with HTML forms
• Putting CSRF token inside JSON body without validation
• Using FlaskForm without token validation on APIs