Sanitizing user input in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when user input contains HTML tags?

Consider a Vue 3 component that sanitizes user input before displaying it. The user types <script>alert('Hi')</script> in the input box. Which option correctly shows the sanitized output in the rendered page?

Vue

<template>
  <div>
    <input v-model="userInput" placeholder="Type here" />
    <p v-html="sanitizedInput"></p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import DOMPurify from 'dompurify'

const userInput = ref('')
const sanitizedInput = computed(() => DOMPurify.sanitize(userInput.value))
</script>

A <script>alert('Hi')</script> (rendered as text, no script runs)

B <script>alert('Hi')</script>

C alert('Hi')

D &lt;script&gt;alert('Hi')&lt;/script&gt;

💡 Hint

Think about how DOMPurify changes dangerous HTML tags to safe text.

DOMPurify converts dangerous tags like <script> into safe text entities so they display as text, not executed code. This prevents scripts from running.

📝 Syntax

intermediate

Which Vue 3 syntax correctly sanitizes user input before rendering?

Given a user input stored in userInput, which option correctly uses DOMPurify to sanitize and render it safely in Vue 3?

A <p>{{ DOMPurify.sanitize(userInput) }}</p>

B <p v-html="DOMPurify.sanitize(userInput)"></p>

C <p v-text="DOMPurify.sanitize(userInput)"></p>

D <p v-html="userInput"></p>

💡 Hint

Remember that v-html renders HTML, but you must sanitize it first.

Option B uses v-html with sanitized input, so HTML tags are safely rendered. Option B escapes HTML and shows tags as text. Option B also escapes HTML. Option B renders raw HTML without sanitizing, which is unsafe.

🔧 Debug

advanced

Why does this Vue 3 component still allow script execution?

Look at this Vue 3 component code:

<template>
  <div>
    <input v-model="userInput" />
    <p v-html="userInput"></p>
  </div>
</template>

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

Why can a user still run scripts by typing HTML with <script> tags?

A Because Vue automatically escapes all HTML in v-html.

B Because v-model does not update the userInput variable correctly.

C Because ref() does not work with strings.

D Because the input is not sanitized before using v-html, so raw HTML including scripts runs.

💡 Hint

Think about what v-html does with raw HTML strings.

Using v-html with unsanitized user input allows scripts to run. Vue does not sanitize automatically. You must sanitize input before binding it to v-html.

🧠 Conceptual

advanced

What is the main reason to sanitize user input in frameworks like Vue?

Why do developers sanitize user input before rendering it in Vue components?

A To make the input look prettier with CSS styles.

B To improve the speed of rendering components.

C To prevent Cross-Site Scripting (XSS) attacks by removing dangerous code.

D To allow users to enter any HTML without restrictions.

💡 Hint

Think about security risks from user input.

Sanitizing input removes harmful scripts that attackers might inject, protecting users from XSS attacks. It is a key security practice.

❓ state_output

expert

What is the value of displayText after input changes?

In this Vue 3 component, what will displayText contain after the user types <b>Hello</b>?

Vue

<template>
  <div>
    <input v-model="userInput" />
    <p v-html="displayText"></p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import DOMPurify from 'dompurify'

const userInput = ref('')
const displayText = computed(() => {
  const dirty = userInput.value
  return DOMPurify.sanitize(dirty, { ALLOWED_TAGS: ['b'] })
})
</script>

A <b>Hello</b>

B Hello

C &lt;b&gt;Hello&lt;/b&gt;

D <script>alert('Hello')</script>

💡 Hint

Check which tags are allowed by DOMPurify in this config.

DOMPurify is configured to allow only b tags, so the <b>Hello</b> input keeps the bold tags and removes others.