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.