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.