CSRF protection concept in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main purpose of CSRF protection in Flask?

CSRF protection is important in web applications. What does it mainly prevent?

A It prevents attackers from submitting forms on behalf of authenticated users without their consent.

B It stops users from entering invalid data in forms.

C It encrypts user passwords before storing them in the database.

D It blocks all external requests to the Flask server.

💡 Hint

Think about what happens if a malicious site tricks a logged-in user into submitting a form.

CSRF protection stops unauthorized commands sent from a user’s browser without their knowledge, protecting user actions.

❓ component_behavior

intermediate

What happens if a Flask form is submitted without a valid CSRF token?

Consider a Flask app using Flask-WTF with CSRF enabled. What is the typical behavior when a form is submitted without the correct CSRF token?

A The server ignores the CSRF token and logs a warning but processes the form.

B The form submission is accepted and processed normally.

C The server raises a <code>CSRFError</code> and rejects the request.

D The server redirects the user to the homepage without any message.

💡 Hint

CSRF protection is designed to block suspicious requests.

Flask-WTF raises a CSRFError when the token is missing or invalid, stopping the form processing.

📝 Syntax

advanced

Which Flask code snippet correctly enables CSRF protection using Flask-WTF?

Choose the code that properly sets up CSRF protection in a Flask app using Flask-WTF.

Flask

from flask import Flask
from flask_wtf import CSRFProtect

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

# Which line correctly enables CSRF protection?

A csrf = CSRFProtect(app)

B

csrf = CSRFProtect(app)
app.csrf = csrf

C

csrf = CSRFProtect()
csrf.init_app(app)

D

app.csrf = CSRFProtect(app)
csrf.init_app(app)

💡 Hint

Check how the CSRFProtect object is created and linked to the app.

Both creating CSRFProtect with the app as an argument or creating it first and then calling init_app(app) are valid patterns.

🔧 Debug

advanced

Why does this Flask form raise a CSRF error despite using Flask-WTF?

Given this Flask form code, why might a CSRF error occur?

Flask

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

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

# In the template:
# <form method="POST">
#   {{ form.name.label }} {{ form.name() }}
#   {{ form.submit() }}
# </form>

A The form uses GET method instead of POST.

B The template is missing the {{ form.csrf_token }} field inside the form.

C The form class does not inherit from FlaskForm.

D The submit button is not named 'submit'.

💡 Hint

CSRF token must be included in the form HTML.

Flask-WTF requires the CSRF token field to be rendered inside the form for validation.

❓ state_output

expert

What is the output of this Flask route when CSRF token is missing in POST request?

Consider this Flask route using Flask-WTF CSRF protection. What response will the client receive if the POST request lacks a CSRF token?

Flask

from flask import Flask, request
from flask_wtf import CSRFProtect

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

@app.route('/submit', methods=['POST'])
def submit():
    return 'Form submitted successfully'

# Client sends POST to /submit without CSRF token.

A HTTP 400 Bad Request with a CSRF error message.

B HTTP 200 OK with 'Form submitted successfully'.

C HTTP 500 Internal Server Error due to missing token.

D HTTP 302 Redirect to the login page.

💡 Hint

CSRFProtect blocks requests missing valid tokens with a specific error code.

Flask-WTF returns HTTP 400 Bad Request with a CSRF error when token is missing or invalid.

Practice

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

easy

A. To speed up the loading time of web pages

B. To encrypt user passwords in the database

C. To prevent attackers from making users perform unwanted actions without their consent

D. To improve the visual design of forms

Solution

1. Step 1: Understand what CSRF stands for

   CSRF means Cross-Site Request Forgery, which tricks users into submitting unwanted requests.

2. Step 2: Identify the purpose of CSRF protection

   CSRF protection stops attackers from forcing users to perform actions they did not intend.

3. Final Answer:

   To prevent attackers from making users perform unwanted actions without their consent -> Option C

4. Quick Check:

   CSRF protection = prevent unwanted user actions [OK]

Hint: CSRF stops fake actions from attackers using your login [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 using Flask-WTF?

easy

A. from flask_wtf import CSRFProtect
app = Flask(__name__)
csrf = CSRFProtect(app)
csrf.init_app(app)

B. from flask_wtf import CSRFProtect
csrf = CSRFProtect()
app = Flask(__name__)

C. app = Flask(__name__)
app.csrf = True

D. from flask_wtf import CSRFProtect
csrf = CSRFProtect(app)

Solution

1. Step 1: Recall Flask-WTF CSRF setup

   You import CSRFProtect and pass the Flask app instance to it to enable protection.

2. Step 2: Check the options for correct syntax

   from flask_wtf import CSRFProtect csrf = CSRFProtect(app) correctly imports CSRFProtect and initializes it with the app in one step.

3. Final Answer:

   from flask_wtf import CSRFProtect csrf = CSRFProtect(app) -> Option D

4. Quick Check:

   CSRFProtect(app) initializes protection [OK]

Hint: Initialize CSRFProtect with app instance directly [OK]

Common Mistakes:

• Calling CSRFProtect without passing app
• Setting app.csrf = True (not valid)
• Calling init_app after passing app (redundant)

3. Given this Flask route with CSRF protection enabled, what happens if the form is submitted without a CSRF token?

@app.route('/submit', methods=['POST'])
def submit():
    return 'Success'

medium

A. The server raises a CSRF error and rejects the request

B. The server ignores the CSRF token and processes normally

C. The request is accepted and returns 'Success'

D. The server redirects to the home page without error

Solution

1. Step 1: Understand CSRF token role in POST requests

   CSRF tokens verify that the form submission is from a trusted source.

2. Step 2: Check behavior when token is missing

   Without a valid CSRF token, Flask-WTF raises an error and rejects the request.

3. Final Answer:

   The server raises a CSRF error and rejects the request -> Option A

4. Quick Check:

   Missing CSRF token = error rejection [OK]

Hint: POST without token triggers CSRF error [OK]

Common Mistakes:

• Assuming request is accepted without token
• Thinking server silently ignores missing token
• Believing server redirects instead of error

4. You added CSRF protection to your Flask app but get a 'CSRF token missing' error on form submission. Which fix will solve this issue?

medium

A. Add {{ form.csrf_token }} inside the HTML form

B. Remove the CSRFProtect initialization from the app

C. Change the form method to GET instead of POST

D. Disable CSRF protection in Flask-WTF config

Solution

1. Step 1: Identify cause of missing CSRF token

   The form must include the CSRF token field to send it with the request.

2. Step 2: Choose the fix that adds the token to the form

   Adding {{ form.csrf_token }} in the form template includes the token correctly.

3. Final Answer:

   Add {{ form.csrf_token }} inside the HTML form -> Option A

4. Quick Check:

   Include CSRF token in form to fix error [OK]

Hint: Always include {{ form.csrf_token }} in your forms [OK]

Common Mistakes:

• Removing CSRF protection instead of fixing token
• Changing POST to GET (not secure)
• Disabling CSRF protection globally

5. You want to protect a Flask route that updates user data via POST. Which combination correctly applies CSRF protection and form token usage?

hard

A. Use CSRFProtect(app) but omit the token in the form for simplicity

B. Enable CSRFProtect(app) and include {{ form.csrf_token }} in the HTML form

C. Skip CSRFProtect and rely on session cookies only

D. Add {{ form.csrf_token }} in form but do not enable CSRFProtect in app

Solution

1. Step 1: Understand CSRF protection requirements

   Both enabling CSRFProtect in the app and including the token in the form are needed to protect POST routes.

2. Step 2: Evaluate each option for completeness

   Only Enable CSRFProtect(app) and include {{ form.csrf_token }} in the HTML form correctly enables protection and includes the token in the form.

3. Final Answer:

   Enable CSRFProtect(app) and include {{ form.csrf_token }} in the HTML form -> Option B

4. Quick Check:

   Protect POST routes with CSRFProtect and token [OK]

Hint: Both app and form need CSRF setup for protection [OK]

Common Mistakes:

• Enabling protection but missing token in form
• Including token but not enabling protection
• Relying only on session cookies