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.

Practice

1. What is the main purpose of sanitizing user input in a Vue application?

easy

A. To store user input without any changes

B. To speed up the rendering of components

C. To change the style of input fields

D. To remove harmful or unwanted content from user input

Solution

1. Step 1: Understand what sanitizing means

   Sanitizing means cleaning input to remove harmful or unwanted parts.

2. Step 2: Identify the purpose in Vue apps

   In Vue, sanitizing user input helps keep the app safe and prevents issues like code injection.

3. Final Answer:

   To remove harmful or unwanted content from user input -> Option D

4. Quick Check:

   Sanitizing input = Remove harmful content [OK]

Hint: Sanitizing cleans input to keep apps safe [OK]

Common Mistakes:

• Thinking sanitizing changes styles
• Believing sanitizing speeds up rendering
• Assuming sanitizing stores input unchanged

2. Which Vue directive is best used to bind user input for sanitizing as the user types?

easy

A. v-if

B. v-model

C. v-for

D. v-bind

Solution

1. Step 1: Recall Vue directives for input binding

   The v-model directive binds input values to data reactively.

2. Step 2: Understand why v-model fits sanitizing

   Using v-model, you can watch and sanitize input as it changes.

3. Final Answer:

   v-model -> Option B

4. Quick Check:

   Bind input with v-model [OK]

Hint: Use v-model to bind and sanitize input live [OK]

Common Mistakes:

• Confusing v-if with input binding
• Using v-for which is for lists
• Using v-bind which binds attributes, not input values

3. Given this Vue code snippet, what will be the value of cleanInput after typing ""?

  <template>
    <input v-model="userInput" @input="sanitizeInput" />
  </template>

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

  function sanitizeInput() {
    cleanInput.value = userInput.value.replace(/<.*?>/g, '')
  }
  </script>

medium

A. "alert(1)"

B. ""

C. "" (empty string)

D. "<script>alert(1)</script>"

Solution

1. Step 1: Understand the regex in sanitizeInput

   The regex /<.*?>/g matches any text between < and > including the tags.

2. Step 2: Apply regex to input string

   Removing all tags from "<script>alert(1)</script>" leaves "alert(1)".

3. Final Answer:

   "alert(1)" -> Option A

4. Quick Check:

   Tags removed, text remains [OK]

Hint: Regex removes tags, leaving inner text [OK]

Common Mistakes:

• Thinking tags remain in output
• Assuming entire string is removed
• Confusing escaped HTML with raw input

4. Identify the error in this Vue sanitizing method:

function sanitizeInput() {
  cleanInput.value = userInput.value.replace(/<.*>/g, '')
}

medium

A. The function is missing a return statement

B. The replace method is used incorrectly without a callback

C. The regex is greedy and removes too much content

D. cleanInput.value should be assigned userInput.value directly

Solution

1. Step 1: Analyze the regex pattern

   The regex /<.*>/g is greedy and matches from the first < to the last > in the string.

2. Step 2: Understand the impact on input

   This causes removal of large parts of the string, not just individual tags, which is incorrect for sanitizing.

3. Final Answer:

   The regex is greedy and removes too much content -> Option C

4. Quick Check:

   Greedy regex causes over-removal [OK]

Hint: Use non-greedy regex to avoid removing too much [OK]

Common Mistakes:

• Thinking replace needs a return
• Assigning input without sanitizing
• Ignoring regex greediness effects

5. You want to sanitize user input in Vue to allow only letters and spaces, removing all other characters. Which method correctly sanitizes the input?

function sanitizeInput() {
  cleanInput.value = userInput.value.replace(_____, '')
}

hard

A. /[^a-zA-Z ]/g

B. /[a-zA-Z ]/g

C. /[^0-9]/g

D. /[0-9]/g

Solution

1. Step 1: Understand the goal

   We want to remove all characters except letters (a-z, A-Z) and spaces.

2. Step 2: Choose the correct regex

   The regex /[^a-zA-Z ]/g matches any character NOT a letter or space, so replacing these removes unwanted characters.

3. Final Answer:

   /[^a-zA-Z ]/g -> Option A

4. Quick Check:

   Negated regex removes unwanted chars [OK]

Hint: Use negated regex to keep only allowed chars [OK]

Common Mistakes:

• Using regex that matches allowed chars to remove
• Removing digits instead of letters
• Not including space in allowed characters