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.