XSS prevention in templates in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when rendering user input in a Flask template?

Consider a Flask template that displays a user-provided string using the standard Jinja2 syntax: {{ user_input }}. The user inputs the string <script>alert('XSS')</script>. What will the rendered HTML output be?

Flask

{{ user_input }}

A <script>alert('XSS')</script>

B &lt;script&gt;alert('XSS')&lt;/script&gt;

C &amp;lt;script&amp;gt;alert('XSS')&amp;lt;/script&amp;gt;

D alert('XSS')

💡 Hint

Think about how Jinja2 handles HTML special characters by default.

Jinja2 automatically escapes HTML special characters like < and > when rendering variables with {{ }}. So the user input is shown as escaped HTML entities, preventing the script from running.

📝 Syntax

intermediate

Which template syntax disables autoescaping in Flask?

In a Flask Jinja2 template, you want to display raw HTML from a variable html_content without escaping. Which syntax correctly disables autoescaping?

A {{ safe(html_content) }}

B {{ html_content|raw }}

C {{ html_content|safe }}

D {% raw html_content %}

💡 Hint

Look for the Jinja2 filter that marks content as safe.

The safe filter tells Jinja2 not to escape the content, rendering it as raw HTML. Other options are invalid syntax or filters.

🔧 Debug

advanced

Why does this Flask template allow XSS despite using {{ }}?

Given the Flask template snippet:

{{ user_input|safe }}

The user_input contains <script>alert('XSS')</script>. Why does this cause an XSS vulnerability?

A The safe filter encodes the script tag, preventing execution.

B The {{ }} syntax always escapes content, so no XSS is possible.

C The user_input is sanitized automatically by Flask before rendering.

D The safe filter disables escaping, so the script tag is rendered as HTML and runs.

💡 Hint

Consider what the safe filter does to the output.

The safe filter disables Jinja2's automatic escaping, so any HTML or script tags in the variable are rendered directly. This allows malicious scripts to run if user input is not sanitized.

🧠 Conceptual

advanced

How does Flask's autoescaping protect against XSS?

Which statement best describes how Flask's Jinja2 template autoescaping helps prevent XSS attacks?

A It converts special HTML characters in variables to safe entities, so scripts are not executed.

B It removes all HTML tags from user input before rendering.

C It encrypts user input before displaying it in the browser.

D It disables JavaScript execution in the browser automatically.

💡 Hint

Think about what happens to characters like < and > in output.

Autoescaping replaces characters like < and > with HTML entities like < and >, so browsers display them as text, not as HTML tags, preventing script execution.

❓ state_output

expert

What is the rendered output of this Flask template with mixed safe and unsafe variables?

Given the Flask template:

User comment: {{ comment }}
Admin note: {{ admin_note|safe }}

And the variables:

• comment = "<b>Hello</b>"
• admin_note = "<i>Important</i>"

What is the exact rendered HTML output?

A User comment: &lt;b&gt;Hello&lt;/b&gt;<br>Admin note: <i>Important</i>

B User comment: <b>Hello</b><br>Admin note: &lt;i&gt;Important&lt;/i&gt;

C User comment: <b>Hello</b><br>Admin note: <i>Important</i>

D User comment: &lt;b&gt;Hello&lt;/b&gt;<br>Admin note: &lt;i&gt;Important&lt;/i&gt;

💡 Hint

Remember which variables are escaped and which are marked safe.

The comment variable is autoescaped, so HTML tags appear as entities. The admin_note is marked safe, so its HTML tags render normally.

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