Sanitizing user input in Vue - Step-by-Step Execution

Concept Flow - Sanitizing user input

User types input

↓

Input captured by Vue ref

↓

Sanitize input (remove unsafe chars)

↓

Update reactive state with clean input

↓

Display sanitized input in UI

User input is captured, cleaned to remove unsafe characters, then stored reactively and shown safely in the UI.

Execution Sample

Vue

import { ref } from 'vue'
const userInput = ref('')
function sanitize(input) {
  return input.replace(/[<>"'&]/g, '')
}
function onInput(event) {
  userInput.value = sanitize(event.target.value)
}

This Vue code captures user input, removes unsafe characters, and updates the reactive variable.

Execution Table

Step	User Input	Sanitize Function Output	Reactive State (userInput.value)	UI Display
1	<script>	script	script	script
2	Hello & welcome	Hello welcome	Hello welcome	Hello welcome
3	Use 'quotes'	Use quotes	Use quotes	Use quotes
4	5 > 3	5 3	5 3	5 3
5	Normal text	Normal text	Normal text	Normal text

💡 Input processed and sanitized for safe display in UI.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5
userInput.value	""	"script"	"Hello welcome"	"Use quotes"	"5 3"	"Normal text"

Key Moments - 2 Insights

Why do some characters disappear from the input after typing?

Because the sanitize function removes unsafe characters like <, >, &, and quotes to keep the input safe, as shown in execution_table rows 1-4.

Is the original user input stored anywhere?

No, only the sanitized version is stored in userInput.value, so unsafe characters are never saved or displayed, as seen in variable_tracker.

Visual Quiz - 3 Questions

Look at the execution table, what is userInput.value after step 2?

A "Hello welcome"

B "Hello & welcome"

C "Hello welcome"

D "Hello &amp; welcome"

💡 Hint

Check the 'Reactive State (userInput.value)' column in row 2 of execution_table.

At which step does the sanitize function remove the single quotes?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Sanitize Function Output' column for step 3 in execution_table.

If the sanitize function did not remove < and >, what would happen in the UI display?

A Unsafe HTML could be rendered, causing security risks

B Input would appear exactly the same

C Input would be empty

D Vue would throw an error

💡 Hint

Sanitizing removes unsafe characters to prevent HTML injection, as shown in concept_flow.

Concept Snapshot

Sanitizing user input in Vue:
- Capture input with ref and event handler
- Use a function to remove unsafe chars (e.g., <, >, &, quotes)
- Update reactive state with clean input
- Display sanitized input safely in UI
- Prevents security risks like HTML injection

Full Transcript

This visual trace shows how Vue captures user input, sanitizes it by removing unsafe characters such as <, >, &, and quotes, then updates the reactive variable userInput.value. The sanitized input is displayed safely in the UI, preventing security risks. Each step shows the input before and after sanitizing, how the reactive state changes, and what the user sees. Key moments clarify why characters disappear and why only sanitized input is stored. The quiz tests understanding of these changes and their importance.

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