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

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue template render?

Consider this Vue 3 template snippet:

<template>
  <div>{{ userInput }}</div>
</template>

If userInput contains the string <script>alert('XSS')</script>, what will the browser display?

Vue

<template>
  <div>{{ userInput }}</div>
</template>

<script setup>
import { ref } from 'vue'
const userInput = ref("<script>alert('XSS')</script>")
</script>

A The div remains empty because Vue blocks unsafe content.

B The script tag runs and shows an alert popup.

C Vue throws a runtime error preventing rendering.

D The script tag is shown as plain text inside the div, no alert runs.

💡 Hint

Think about how Vue handles interpolation with double curly braces.

Vue escapes HTML special characters inside {{ }} interpolation by default, so the script tag is shown as text, not executed.

📝 Syntax

intermediate

Which Vue directive safely renders raw HTML?

You want to render some HTML content stored in a variable htmlContent inside your Vue template. Which directive correctly renders the HTML without escaping it?

A Use <code>&lt;div v-html="htmlContent"&gt;&lt;/div&gt;</code>

B Use <code>&lt;div :text="htmlContent"&gt;&lt;/div&gt;</code>

C Use <code>&lt;div&gt;{{ htmlContent }}&lt;/div&gt;</code>

D Use <code>&lt;div v-text="htmlContent"&gt;&lt;/div&gt;</code>

💡 Hint

One directive tells Vue to insert raw HTML inside an element.

The v-html directive inserts raw HTML inside the element. The others either escape HTML or set text content.

🔧 Debug

advanced

Why does this Vue component cause an XSS vulnerability?

This Vue component uses v-html to render user input:

<template>
  <div v-html="userInput"></div>
</template>

What is the main security risk here?

Vue

<template>
  <div v-html="userInput"></div>
</template>

<script setup>
import { ref } from 'vue'
const userInput = ref('<img src=x onerror=alert(1)>')
</script>

A v-html escapes all HTML so no risk exists.

B The component throws an error because of invalid HTML.

C v-html renders raw HTML, so malicious scripts can run.

D Vue automatically sanitizes v-html content to prevent XSS.

💡 Hint

Think about what happens when you insert raw HTML from untrusted sources.

v-html inserts raw HTML without escaping, so if userInput contains malicious code, it runs in the browser causing XSS.

🧠 Conceptual

advanced

How does Vue's template interpolation prevent XSS?

Which mechanism does Vue use to prevent XSS attacks when rendering variables inside double curly braces {{ }}?

A Vue escapes special HTML characters like <, >, &, and quotes.

B Vue automatically sanitizes the HTML content before rendering.

C Vue disables JavaScript execution inside templates.

D Vue uses a sandboxed iframe to isolate content.

💡 Hint

Think about how browsers treat escaped characters.

Vue escapes special HTML characters so the browser treats them as text, not code, preventing script execution.

❓ state_output

expert

What is the output after updating user input with v-html?

Given this Vue 3 component:

<template>
  <div v-html="content"></div>
  <button @click="updateContent">Update</button>
</template>

<script setup>
import { ref } from 'vue'
const content = ref('<p>Hello</p>')
function updateContent() {
  content.value = '<img src=x onerror=alert(42)>'
}
</script>

What happens when the user clicks the Update button?

Vue

<template>
  <div v-html="content"></div>
  <button @click="updateContent">Update</button>
</template>

<script setup>
import { ref } from 'vue'
const content = ref('<p>Hello</p>')
function updateContent() {
  content.value = '<img src=x onerror=alert(42)>'
}
</script>

A The div shows the image tag as text, no alert appears.

B The div updates to show the image, and an alert with 42 pops up.

C Vue blocks the update and shows an error in console.

D The div remains unchanged because v-html does not update dynamically.

💡 Hint

Remember what v-html does when its bound value changes.

v-html inserts raw HTML and updates dynamically, so the image with onerror runs the alert when loaded.

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