XSS prevention in templates in Django - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to safely display a variable in a Django template.

Django

<p>{{ [1] }}</p>

Drag options to blanks, or click blank then click option'

Auser_input|escape

Buser_input|raw

Cuser_input

Duser_input|safe

Attempts:

3 left

💡 Hint

Common Mistakes

Using |safe or |raw without understanding they disable escaping.

Trying to manually escape variables in the template.

In Django templates, variables like {{ user_input }} are automatically escaped to prevent XSS.

2fill in blank

medium

Complete the code to mark a string as safe and avoid escaping in a Django template.

Django

<p>{{ [1] }}</p>

Drag options to blanks, or click blank then click option'

Auser_input

Buser_input|safe

Cuser_input|escape

Duser_input|raw

Attempts:

3 left

💡 Hint

Common Mistakes

Using |escape which actually escapes the string.

Using |raw which is not a Django template filter.

The |safe filter tells Django not to escape the variable, so HTML tags are rendered as HTML.

3fill in blank

hard

Fix the error in the template code to prevent XSS by escaping user input.

Django

<div>{{ [1] }}</div>

Drag options to blanks, or click blank then click option'

Auser_input|escape

Buser_input|raw

Cuser_input|safe

Duser_input

Attempts:

3 left

💡 Hint

Common Mistakes

Using safe which disables escaping and can cause XSS.

Using raw which is not a valid Django filter.

The escape filter ensures that any HTML in user_input is shown as text, preventing XSS.

4fill in blank

hard

Fill both blanks to create a safe link with escaped URL and safe link text.

Django

<a href="{{ [1] }}">{{ [2] }}</a>

Drag options to blanks, or click blank then click option'

Aurl|escape

Blink_text|safe

Curl|safe

Dlink_text|escape

Attempts:

3 left

💡 Hint

Common Mistakes

Marking the URL as safe which can allow XSS.

Escaping the link text unnecessarily if it contains safe HTML.

The URL should be escaped to prevent injection, while the link text can be marked safe if it contains trusted HTML.

5fill in blank

hard

Fill all three blanks to safely render a user comment with escaped content and safe username.

Django

<div class="comment">
  <strong>{{ [1] }}</strong>
  <p>{{ [2] }}</p>
  <small>{{ [3] }}</small>
</div>

Drag options to blanks, or click blank then click option'

Ausername|safe

Bcomment_text|escape

Cdate_posted

Dusername|escape

Attempts:

3 left

💡 Hint

Common Mistakes

Not escaping comment text, which can lead to XSS.

Escaping username unnecessarily if it is trusted.

The username is marked safe if trusted, the comment text is escaped to prevent XSS, and the date is shown as is.

Practice

1. What does Django do by default to protect against XSS attacks when rendering variables in templates?

easy

A. It disables rendering of any user input.

B. It automatically escapes variables to prevent malicious code execution.

C. It requires manual escaping of variables in every template.

D. It converts all variables to uppercase before rendering.

Solution

1. Step 1: Understand Django's default template behavior

   Django templates automatically escape variables to prevent malicious scripts from running in the browser.

2. Step 2: Compare options with this behavior

   Only It automatically escapes variables to prevent malicious code execution. correctly states this automatic escaping feature, while others describe incorrect or unrelated behaviors.

3. Final Answer:

   It automatically escapes variables to prevent malicious code execution. -> Option B

4. Quick Check:

   Default escaping = It automatically escapes variables to prevent malicious code execution. [OK]

Hint: Remember: Django escapes variables automatically unless told otherwise [OK]

Common Mistakes:

• Thinking you must manually escape variables always
• Believing Django disables user input rendering
• Assuming variables are transformed instead of escaped

2. Which of the following is the correct way to mark a variable as safe (not escaped) in a Django template?

easy

A. {{ variable|escape }}

B. {{ variable|strip }}

C. {{ variable|safe }}

D. {{ variable|clean }}

Solution

1. Step 1: Identify the filter that marks content safe

   The safe filter tells Django not to escape the variable, rendering HTML as-is.

2. Step 2: Check other filters

   escape escapes content, strip and clean are not standard Django filters for safety.

3. Final Answer:

   {{ variable|safe }} -> Option C

4. Quick Check:

   Use safe filter to disable escaping = {{ variable|safe }} [OK]

Hint: Use '|safe' to show trusted HTML without escaping [OK]

Common Mistakes:

• Using '|escape' which does the opposite
• Confusing '|strip' or '|clean' as safety filters
• Forgetting to mark trusted content safe explicitly

3. Given the template code:

{{ user_input }}

and the user input is <script>alert('XSS')</script>, what will be rendered in the browser?

medium

A. <script>alert('XSS')</script> shown as text

B. executed as script

C. An error message about unsafe content

D. Nothing will be shown

Solution

1. Step 1: Understand default escaping of variables

   Django escapes user input by default, so HTML tags are shown as text, not executed.

2. Step 2: Apply this to the given input

   The script tags will be converted to safe text entities and displayed literally.

3. Final Answer:

   <script>alert('XSS')</script> shown as text -> Option A

4. Quick Check:

   Escaped input shows tags as text = <script>alert('XSS')</script> shown as text [OK]

Hint: Default escape shows tags as text, not scripts [OK]

Common Mistakes:

• Thinking the script runs automatically
• Expecting an error instead of safe output
• Assuming nothing is shown for unsafe input

4. You see this template code:

{{ comment|safe }}

but users report XSS attacks. What is the likely problem?

medium

A. The template engine is disabled.

B. The escape filter is missing.

C. The template variable is not wrapped in quotes.

D. The safe filter is used on untrusted user input.

Solution

1. Step 1: Analyze the use of the safe filter

   Using safe on user input disables escaping, allowing scripts to run if input is malicious.

2. Step 2: Identify the cause of XSS

   Applying safe to untrusted input is unsafe and causes XSS vulnerabilities.

3. Final Answer:

   The safe filter is used on untrusted user input. -> Option D

4. Quick Check:

   Unsafe use of safe filter = The safe filter is used on untrusted user input. [OK]

Hint: Never use '|safe' on untrusted user input [OK]

Common Mistakes:

• Assuming escape filter fixes safe misuse
• Thinking quotes affect XSS protection
• Believing template engine disables XSS automatically

5. You want to display user comments that may contain safe HTML tags like <b> and <i>, but prevent scripts. Which approach best prevents XSS while allowing these tags?

hard

A. Sanitize the comment in the backend to allow only safe tags, then use {{ comment|safe }}.

B. Use {{ comment|safe }} directly in the template.

C. Escape the comment with {{ comment|escape }} and then use |safe.

D. Store comments as plain text and never allow any HTML tags.

Solution

1. Step 1: Understand the need to allow some HTML safely

   Allowing safe tags requires cleaning input to remove dangerous scripts but keep allowed tags.

2. Step 2: Choose the correct method

   Sanitizing backend input to whitelist safe tags then marking safe in template is the secure way.

3. Step 3: Evaluate other options

   Using {{ comment|safe }} directly risks XSS by trusting raw input; combining |escape and |safe misuses filters; disallowing all HTML prevents desired formatting.

4. Final Answer:

   Sanitize the comment in the backend to allow only safe tags, then use {{ comment|safe }}. -> Option A

5. Quick Check:

   Backend sanitize + safe filter = Sanitize the comment in the backend to allow only safe tags, then use {{ comment|safe }}. [OK]

Hint: Clean input backend, then mark safe in template [OK]

Common Mistakes:

• Trusting raw user input with safe filter
• Misusing escape and safe filters together
• Disallowing all HTML when some is needed