0
0
Vueframework~20 mins

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

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
XSS Prevention Mastery in Vue
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
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>
AThe div remains empty because Vue blocks unsafe content.
BThe script tag runs and shows an alert popup.
CVue throws a runtime error preventing rendering.
DThe script tag is shown as plain text inside the div, no alert runs.
Attempts:
2 left
💡 Hint
Think about how Vue handles interpolation with double curly braces.
📝 Syntax
intermediate
2:00remaining
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?
AUse <code>&lt;div v-html="htmlContent"&gt;&lt;/div&gt;</code>
BUse <code>&lt;div :text="htmlContent"&gt;&lt;/div&gt;</code>
CUse <code>&lt;div&gt;{{ htmlContent }}&lt;/div&gt;</code>
DUse <code>&lt;div v-text="htmlContent"&gt;&lt;/div&gt;</code>
Attempts:
2 left
💡 Hint
One directive tells Vue to insert raw HTML inside an element.
🔧 Debug
advanced
2:00remaining
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>
Av-html escapes all HTML so no risk exists.
BThe component throws an error because of invalid HTML.
Cv-html renders raw HTML, so malicious scripts can run.
DVue automatically sanitizes v-html content to prevent XSS.
Attempts:
2 left
💡 Hint
Think about what happens when you insert raw HTML from untrusted sources.
🧠 Conceptual
advanced
2:00remaining
How does Vue's template interpolation prevent XSS?
Which mechanism does Vue use to prevent XSS attacks when rendering variables inside double curly braces {{ }}?
AVue escapes special HTML characters like <, >, &, and quotes.
BVue automatically sanitizes the HTML content before rendering.
CVue disables JavaScript execution inside templates.
DVue uses a sandboxed iframe to isolate content.
Attempts:
2 left
💡 Hint
Think about how browsers treat escaped characters.
❓ state_output
expert
2:00remaining
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>
AThe div shows the image tag as text, no alert appears.
BThe div updates to show the image, and an alert with 42 pops up.
CVue blocks the update and shows an error in console.
DThe div remains unchanged because v-html does not update dynamically.
Attempts:
2 left
💡 Hint
Remember what v-html does when its bound value changes.