XSS prevention in templates in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind user input safely in Vue template.

Vue

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

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

AuserInput

Bv-html

Cv-text

DrawHtml

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-html directly with user input causes XSS risks.

Trying to display raw HTML without escaping.

Using double curly braces {{ }} in Vue automatically escapes HTML to prevent XSS.

2fill in blank

medium

Complete the code to bind raw HTML safely using Vue directive.

Vue

<template>
  <div [1]="userHtml"></div>
</template>

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

Av-text

Bv-html

Cv-bind

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-text instead of v-html for raw HTML binding.

Binding raw HTML without sanitizing user input.

The v-html directive binds raw HTML content but should be used carefully to avoid XSS.

3fill in blank

hard

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

Vue

<template>
  <p v-html="[1]"></p>
</template>

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

AsanitizedHtml

BrawHtml

CtrustedHtml

DuserInput

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-html with interpolation syntax causes errors.

Binding untrusted HTML without sanitization.

Using v-html with double curly braces is incorrect. To prevent XSS, use {{ }} alone or sanitize HTML before using v-html.

4fill in blank

hard

Fill both blanks to create a computed property that sanitizes HTML before binding.

Vue

<script setup>
import { computed } from 'vue'
import sanitizeHtml from 'sanitize-html'

const rawHtml = '<script>alert(1)</script><p>Hello</p>'

const safeHtml = computed(() => [1](rawHtml))
</script>

<template>
  <div v-html="[2]"></div>
</template>

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

AsanitizeHtml

BrawHtml

CsafeHtml

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Binding rawHtml directly without sanitizing.

Using rawHtml instead of safeHtml in the template.

Use the sanitizeHtml function to clean raw HTML, then bind the sanitized content with v-html using the computed property safeHtml.

5fill in blank

hard

Fill all three blanks to create a safe user comment display with sanitization and reactive input.

Vue

<script setup>
import { ref, computed } from 'vue'
import sanitizeHtml from 'sanitize-html'

const userComment = ref('')

const safeComment = computed(() => [1]([2]))

function updateComment(event) {
  [3] = event.target.value
}
</script>

<template>
  <textarea @input="updateComment" aria-label="User comment input"></textarea>
  <div v-html="safeComment" aria-live="polite"></div>
</template>

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

AsanitizeHtml

BuserComment.value

CuserComment

DuserComment.value = event.target.value

Attempts:

3 left

💡 Hint

Common Mistakes

Not updating the reactive value properly in the event handler.

Binding unsanitized user input directly with v-html.

Sanitize the reactive userComment.value using sanitizeHtml. Update the reactive value inside updateComment function to keep input and display safe.

Practice

1. In Vue templates, which syntax automatically escapes content to prevent XSS attacks?

easy

A. Directly manipulating the DOM with JavaScript

B. Using v-html directive to insert HTML

C. Using triple curly braces like {{{ userInput }}}

D. Using double curly braces like {{ userInput }}

Solution

1. Step 1: Understand Vue's default escaping

   Vue automatically escapes content inside {{ }} to prevent XSS by converting special characters to safe HTML entities.

2. Step 2: Compare with other methods

   Using v-html inserts raw HTML and can cause XSS if content is unsafe. Direct DOM manipulation bypasses Vue's protections.

3. Final Answer:

   Using double curly braces like {{ userInput }} -> Option D

4. Quick Check:

   Vue escapes {{ }} content = A [OK]

Hint: Remember: {{ }} escapes content, v-html does not [OK]

Common Mistakes:

• Thinking v-html escapes content automatically
• Assuming v-text sanitizes HTML
• Believing direct DOM manipulation is safe

2. Which of the following Vue template usages is syntactically correct and safe from XSS by default?

easy

A. <div v-html="userInput"></div>

B. <div>{{ userInput }}</div>

C. <div v-text=userInput></div>

D. <div>{{ userInput</div> }}

Solution

1. Step 1: Check syntax correctness

   <div>{{ userInput }}</div> uses correct Vue syntax with double curly braces and quotes are properly placed.

2. Step 2: Check XSS safety

   <div>{{ userInput }}</div> escapes content automatically, making it safe. <div v-html="userInput"></div> uses v-html which inserts raw HTML and can be unsafe. <div v-text=userInput></div> misses quotes around the binding value, causing syntax error. <div>{{ userInput</div> }} has mismatched braces causing syntax error.

3. Final Answer:

   <div>{{ userInput }}</div> -> Option B

4. Quick Check:

   Correct syntax + auto-escape = D [OK]

Hint: Use {{ }} with quotes for safe, correct syntax [OK]

Common Mistakes:

• Using v-html without sanitizing input
• Omitting quotes in directives
• Mismatching curly braces

3. Given the Vue template code:
<pre><template> <div>{{ userInput }}</div> <div v-html="userInput"></div> </template> And userInput is '<img src=x onerror=alert(1)>', what will be rendered in the browser?

medium

A. The first div shows the raw HTML tag as text; the second div executes the alert popup.

B. Both divs show the raw HTML tag as text without executing alert.

C. Both divs execute the alert popup.

D. The first div executes alert; the second div shows raw HTML tag as text.

Solution

1. Step 1: Analyze the first div with {{ userInput }}

   Vue escapes the content, so the HTML tag is shown as plain text, no alert runs.

2. Step 2: Analyze the second div with v-html

   v-html inserts raw HTML, so the <img> tag runs and triggers the alert.

3. Final Answer:

   The first div shows the raw HTML tag as text; the second div executes the alert popup. -> Option A

4. Quick Check:

   v-html inserts raw HTML = A [OK]

Hint: v-html runs HTML, {{ }} escapes it [OK]

Common Mistakes:

• Assuming both divs escape content
• Thinking v-html escapes content
• Confusing which div triggers alert

4. You have this Vue template:

<div v-html="userContent"></div>

User input is not sanitized. What is the best fix to prevent XSS?

medium

A. Replace v-html with {{ userContent }} to auto-escape

B. Keep v-html but add v-text on the same element

C. Use v-html but trust all user input as safe

D. Wrap v-html inside a <script> tag

Solution

1. Step 1: Identify the risk of v-html with unsanitized input

   v-html inserts raw HTML, so unsanitized user input can cause XSS attacks.

2. Step 2: Choose a safe alternative

   Replacing v-html with {{ userContent }} escapes content automatically, preventing XSS.

3. Final Answer:

   Replace v-html with {{ userContent }} to auto-escape -> Option A

4. Quick Check:

   Use {{ }} to escape user input safely = C [OK]

Hint: Avoid v-html with unsafe input; use {{ }} instead [OK]

Common Mistakes:

• Adding v-text does not sanitize v-html content
• Trusting all user input without sanitization
• Using script tags incorrectly

5. You want to display user comments that may contain safe HTML tags like <b> and <i> but prevent XSS in Vue. Which approach is best?

hard

A. Use {{ comment }} to escape all HTML, showing tags as text

B. Use v-html directly without sanitizing user comments

C. Use v-html with a sanitizer function that removes unsafe tags before binding

D. Replace <b> and <i> tags with <script> tags

Solution

1. Step 1: Understand the need to allow some HTML but block unsafe tags

   Using v-html allows HTML rendering but can cause XSS if input is unsafe.

2. Step 2: Use a sanitizer to clean user input

   Sanitizing removes dangerous tags/scripts but keeps safe tags like <b> and <i>.

3. Step 3: Bind sanitized content with v-html

   This approach safely renders allowed HTML while preventing XSS.

4. Final Answer:

   Use v-html with a sanitizer function that removes unsafe tags before binding -> Option C

5. Quick Check:

   Sanitize input before v-html = B [OK]

Hint: Sanitize user HTML before v-html to allow safe tags [OK]

Common Mistakes:

• Using v-html without sanitizing
• Escaping all HTML losing formatting
• Replacing safe tags with script tags