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

Concept Flow - XSS prevention in templates

User Input Received

↓

Template Rendering Begins

↓

Escape Special Characters?

No→Raw Output (Unsafe)

Yes↓

Safe HTML Output Rendered

↓

Browser Displays Content Safely

This flow shows how Django templates handle user input by escaping special characters to prevent unsafe HTML and scripts from running.

Execution Sample

Django

{% autoescape on %}
Hello, {{ user_input }}!
{% endautoescape %}

This template safely outputs user input by escaping HTML special characters to prevent XSS.

Execution Table

Step	Template Part	Input Value	Escape Applied	Output Rendered
1	Start Rendering	user_input = '<script>alert(1)</script>'	N/A	N/A
2	Evaluate {{ user_input }}	<script>alert(1)</script>	Yes	&lt;script&gt;alert(1)&lt;/script&gt;
3	Render Full Template	N/A	N/A	Hello, &lt;script&gt;alert(1)&lt;/script&gt;!

💡 Template rendering completes with escaped user input to prevent XSS.

Variable Tracker

Variable	Start	After Escape	Final Output
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 output show &lt;script&gt; instead of <script>?

Because Django escapes special HTML characters like < and > to &lt; and &gt; to prevent the browser from running scripts, as shown in step 2 of the execution table.

What happens if autoescape is turned off?

If autoescape is off, the raw input is rendered without escaping, which can allow scripts to run and cause XSS, unlike the safe output in step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the output rendered at step 2?

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

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

C alert(1)

D Hello, user!

💡 Hint

Check the 'Output Rendered' column at step 2 in the execution_table.

At which step does Django apply escaping to user input?

A Step 1

B Step 3

C Step 2

D No escaping applied

💡 Hint

Look at the 'Escape Applied' column in the execution_table.

If autoescape was off, how would the final output change?

A It would show escaped characters like &lt; and &gt;

B It would render raw HTML including <script> tags

C It would remove the user input entirely

D It would show an error

💡 Hint

Refer to the key_moments section about autoescape effects.

Concept Snapshot

Django templates escape user input by default to prevent XSS.
Use {{ variable }} inside {% autoescape on %} blocks.
Special characters like <, >, & become &lt;, &gt;, &amp;.
Turning off autoescape renders raw HTML, which is unsafe.
Always trust Django's escaping for safe output.

Full Transcript

This visual execution shows how Django templates prevent cross-site scripting (XSS) by escaping special HTML characters in user input. When rendering a template with user input like '<script>alert(1)</script>', Django replaces < and > with &lt; and &gt; to stop the browser from running scripts. The execution table traces each step: starting with the raw input, applying escaping during template evaluation, and rendering the safe output. The variable tracker shows how the user_input variable changes from raw to escaped form. Key moments clarify why escaping is necessary and what happens if autoescape is turned off. The quiz tests understanding of when escaping happens and how output changes. This ensures beginners see exactly how Django keeps templates safe from XSS attacks.