XSS prevention in templates in Flask - Step-by-Step Execution

Concept Flow - XSS prevention in templates

User Input Received

↓

Template Rendering

↓

Auto-escape Enabled?

No→Raw Output (Unsafe)

Yes↓

Escape Special Characters

↓

Safe HTML Output Rendered

This flow shows how Flask templates handle user input by escaping special characters to prevent XSS attacks before rendering HTML.

Execution Sample

Flask

from flask import Flask, render_template_string
app = Flask(__name__)
@app.route('/')
def home():
    user_input = '<script>alert(1)</script>'
    return render_template_string('{{ user_input }}', user_input=user_input)

This Flask route renders a template with user input that includes a script tag, showing how Flask escapes it to prevent XSS.

Execution Table

Step	Action	Input Value	Escaped Output	Rendered Output
1	Receive user input	<script>alert(1)</script>
2	Pass input to template	<script>alert(1)</script>
3	Template engine checks autoescape	Autoescape enabled
4	Escape special chars	<script>alert(1)</script>	&lt;script&gt;alert(1)&lt;/script&gt;
5	Render escaped output		&lt;script&gt;alert(1)&lt;/script&gt;	&lt;script&gt;alert(1)&lt;/script&gt;
6	Browser displays output			&lt;script&gt;alert(1)&lt;/script&gt; shown as text, no script runs

💡 Rendering stops after safe escaped output is sent to browser, preventing script execution.

Variable Tracker

Variable	Start	After Escaping	Final Rendered
user_input	<script>alert(1)</script>	&lt;script&gt;alert(1)&lt;/script&gt;	&lt;script&gt;alert(1)&lt;/script&gt;

Key Moments - 2 Insights

Why does the script tag not run in the browser even though it is in the user input?

Because Flask's template engine automatically escapes special characters like < and > (see execution_table step 4), so the browser sees them as text, not HTML tags.

What happens if autoescape is turned off in the template?

The raw input would be rendered without escaping (execution_table step 3 No branch), allowing scripts to run and causing XSS vulnerabilities.

Visual Quiz - 3 Questions

Look at the execution table, what is the escaped output at step 4?

A &lt;script&gt;alert(1)&lt;/script&gt;

B <script>alert(1)</script>

C &amp;lt;script&amp;gt;alert(1)&amp;lt;/script&amp;gt;

D alert(1)

💡 Hint

Check the 'Escaped Output' column at step 4 in the execution_table.

At which step does Flask confirm that autoescape is enabled?

A Step 2

B Step 3

C Step 5

D Step 6

💡 Hint

Look at the 'Action' column in execution_table where autoescape is checked.

If user_input was 'Hello <b>World</b>', what would be the final rendered output?

A Hello <b>World</b> (bold text)

B Hello World (no tags)

C Hello &lt;b&gt;World&lt;/b&gt; (text with tags shown)

D Error in rendering

💡 Hint

Refer to variable_tracker and how special characters are escaped before rendering.

Concept Snapshot

Flask templates autoescape user input by default.
Special HTML characters like <, >, & are replaced with safe codes.
This prevents scripts from running (XSS attacks).
Disable autoescape only if you trust the input.
Use {{ variable }} to autoescape, use |safe to disable escaping.

Full Transcript

This visual trace shows how Flask prevents cross-site scripting (XSS) by escaping user input in templates. When a user sends input containing HTML or script tags, Flask's template engine automatically replaces special characters like < and > with safe codes such as &lt; and &gt;. This escaping happens before the output is sent to the browser, so the browser displays the tags as text instead of running them as code. The execution table walks through each step from receiving input, checking autoescape, escaping characters, and rendering safe output. The variable tracker shows how the user input changes from raw to escaped form. Key moments clarify why scripts do not run and what happens if autoescape is off. The quiz tests understanding of escaping and rendering steps. Remember, always keep autoescape enabled to protect your web app from XSS attacks.

Practice

1. What does Flask's template engine do by default to prevent XSS attacks when rendering variables inside {{ }}?

easy

A. It converts all text to uppercase.

B. It disables rendering of any user input.

C. It automatically escapes special HTML characters in the variable content.

D. It removes all spaces from the variable content.

Solution

1. Step 1: Understand Flask template variable rendering

   Flask templates use Jinja2, which escapes HTML special characters by default inside {{ }} to prevent scripts from running.

2. Step 2: Recognize the purpose of escaping

   Escaping converts characters like <, >, & into safe HTML entities, stopping malicious scripts from executing.

3. Final Answer:

   It automatically escapes special HTML characters in the variable content. -> Option C

4. Quick Check:

   Default escaping = safe output [OK]

Hint: Flask auto-escapes variables in {{ }} to block scripts [OK]

Common Mistakes:

• Thinking Flask disables all user input rendering
• Believing Flask changes text case automatically
• Assuming Flask removes spaces from variables

2. Which of the following is the correct way to safely display a user input variable named user_input in a Flask template to prevent XSS?

easy

A. {{ user_input|safe }}

B. {% raw user_input %}

C. {% safe user_input %}

D. {{ user_input }}

Solution

1. Step 1: Identify safe default rendering

   Using {{ user_input }} automatically escapes content, preventing XSS.

2. Step 2: Understand the risk of |safe filter

   The |safe filter disables escaping and should be used only with trusted content.

3. Final Answer:

   {{ user_input }} -> Option D

4. Quick Check:

   Use {{ variable }} without |safe for safety [OK]

Hint: Use {{ variable }} without |safe to keep escaping [OK]

Common Mistakes:

• Using |safe on untrusted user input
• Trying to use {% raw %} incorrectly
• Assuming {% safe %} is a valid Jinja2 tag

3. Given this Flask template snippet:

<p>User comment: {{ comment }}</p>

If the variable comment contains <script>alert('XSS')</script>, what will be the rendered HTML output?

medium

A. User comment: <script>alert('XSS')</script>

B. User comment:

C. User comment: &lt;script&gt;alert('XSS')&lt;/script&gt;

D. User comment: alert('XSS')

Solution

1. Step 1: Recognize Flask autoescaping behavior

   Flask escapes HTML special characters like < and > in variables inside {{ }}.

2. Step 2: Convert script tags to safe HTML entities

   The <script> tags become <script> in raw HTML, but browsers render them as <script> text, not executable code.

3. Final Answer:

   <p>User comment: <script>alert('XSS')</script></p> -> Option A

4. Quick Check:

   Escaped tags show as text, not scripts [OK]

Hint: Escaped script tags show as text, not run scripts [OK]

Common Mistakes:

• Thinking scripts run when escaped
• Confusing < with &lt;
• Assuming output removes tags completely

4. You see this Flask template code:

<p>Message: {{ message|safe }}</p>

What is the main problem with this code if message contains user input?

medium

A. It will cause a syntax error in the template.

B. It disables escaping, allowing XSS attacks if input is malicious.

C. It will remove all HTML tags from the message.

D. It automatically sanitizes the input, so no problem.

Solution

1. Step 1: Understand the effect of |safe filter

   The |safe filter tells Flask not to escape the content, rendering raw HTML.

2. Step 2: Recognize security risk with user input

   If message is user input, malicious scripts can run, causing XSS attacks.

3. Final Answer:

   It disables escaping, allowing XSS attacks if input is malicious. -> Option B

4. Quick Check:

   Using |safe on user input = security risk [OK]

Hint: Avoid |safe on user input to prevent XSS [OK]

Common Mistakes:

• Thinking |safe sanitizes input
• Believing it causes syntax errors
• Assuming it strips HTML tags

5. You want to display a user-submitted comment that may contain some safe HTML tags like <b> and <i>, but prevent any scripts or dangerous tags from running. Which Flask approach best achieves this?

hard

A. Sanitize the comment in Python code to allow only safe tags, then mark safe with |safe in template.

B. Use {{ comment|safe }} directly to allow all HTML.

C. Use {{ comment }} to escape everything, disallowing all HTML tags.

D. Use {% raw %}{{ comment }}{% endraw %} to render raw input.

Solution

1. Step 1: Understand the need for selective HTML allowance

   Allowing only safe tags requires cleaning input to remove scripts but keep tags like <b> and <i>.

2. Step 2: Use Python sanitization before rendering

   Sanitize the comment in backend code (e.g., with bleach library) to whitelist safe tags, then mark safe in template.

3. Step 3: Avoid unsafe direct |safe usage

   Directly using |safe without sanitization risks XSS.

4. Final Answer:

   Sanitize the comment in Python code to allow only safe tags, then mark safe with |safe in template. -> Option A

5. Quick Check:

   Sanitize first, then use |safe safely [OK]

Hint: Sanitize input in Python, then use |safe to allow safe HTML [OK]

Common Mistakes:

• Using |safe without sanitizing user input
• Escaping everything and losing desired formatting
• Using {% raw %} which disables escaping completely