XSS prevention in templates in Flask - Mini Project: Build & Apply

XSS Prevention in Flask Templates

📖 Scenario: You are building a simple Flask web app that shows user comments on a page. Users can submit comments, and you want to make sure the comments are safe to display without allowing harmful scripts to run.

🎯 Goal: Build a Flask app that safely displays user comments by preventing cross-site scripting (XSS) attacks using Flask's template autoescaping features.

📋 What You'll Learn

Create a list of user comments with some containing HTML tags

Add a variable to hold a new user comment

Render the comments safely in a Flask template using autoescaping

Add a final route to display the comments page

💡 Why This Matters

🌍 Real World

Web applications often display user-generated content. Preventing XSS attacks is critical to keep users safe and maintain trust.

💼 Career

Understanding how to safely render user input in templates is a key skill for web developers working with Flask or similar frameworks.

1

Create the initial comments list

Create a list called comments with these exact string entries: 'Hello, world!', 'Nice to meet you.', and ''.

Flask

# Create the comments list with the exact entries
# Your code here

Need a hint?

Use square brackets to create a list and include the exact strings with quotes.

2

Add a new user comment variable

Create a variable called new_comment and set it to the string 'Welcome to the site!'.

Flask

comments = ['Hello, world!', 'Nice to meet you.', 'alert("XSS")']
# Create the new_comment variable with the exact string
# Your code here

Need a hint?

Assign the exact string to the variable new_comment using an equals sign.

3

Render comments safely in a Flask template

Write a Flask route function called show_comments that returns the rendered template 'comments.html' passing the comments list and new_comment variable. Use Flask's render_template function.

Flask

comments = ['Hello, world!', 'Nice to meet you.', 'alert("XSS")']
new_comment = 'Welcome to the site!'

# Define the show_comments route function below
# Your code here

Need a hint?

Use the @app.route('/') decorator and define the function with the exact name show_comments. Return render_template with the template name and variables.

4

Complete the comments.html template with autoescaping

Create a Jinja2 template named comments.html that loops over the comments list and displays each comment inside a <li> tag. Also display the new_comment in a separate <p> tag. Use Jinja2's default autoescaping to prevent XSS.

Flask

from flask import Flask, render_template

app = Flask(__name__)

comments = ['Hello, world!', 'Nice to meet you.', 'alert("XSS")']
new_comment = 'Welcome to the site!'

@app.route('/')
def show_comments():
    return render_template('comments.html', comments=comments, new_comment=new_comment)

# Create the comments.html template with a loop and safe display
# Your code here

Need a hint?

Use Jinja2 template syntax with {% for %} to loop and {{ }} to display variables safely.