Sanitizing user input in Vue - Mini Project: Build & Apply

Sanitizing user input

📖 Scenario: You are building a simple Vue app where users can enter comments. To keep the app safe and clean, you want to remove any HTML tags from the user input before showing it on the page.

🎯 Goal: Create a Vue 3 component that takes user input from a text box, sanitizes it by removing HTML tags, and displays the clean text below.

📋 What You'll Learn

Use Vue 3 with the Composition API and <script setup>

Create a reactive variable to hold the user input

Create a helper function to sanitize the input by removing HTML tags

Display the sanitized input reactively below the input box

💡 Why This Matters

🌍 Real World

Sanitizing user input is important in web apps to prevent security risks like cross-site scripting (XSS) and to keep displayed content clean.

💼 Career

Many frontend developer roles require knowledge of input sanitization to build safe and user-friendly interfaces.

1

Set up the user input variable

Create a Vue 3 component with <script setup> and import ref from 'vue'. Then create a reactive variable called userInput initialized to an empty string.

Vue

// Create a reactive variable called userInput initialized to an empty string
// Your code here



  

Hint

Use ref to create a reactive variable for the input text.

2

Create a sanitize function

Below the userInput variable, create a function called sanitize that takes a string parameter text and returns the string with all HTML tags removed using a regular expression.

Vue

import { ref } from 'vue'

const userInput = ref('')

// Create a function sanitize(text) that removes HTML tags from text
// Your code here



  

Hint

Use text.replace(/<[^>]*>/g, '') to remove HTML tags.

3

Create a computed sanitized input

Import computed from 'vue'. Then create a computed variable called cleanInput that returns the sanitized version of userInput.value by calling the sanitize function.

Vue

import { ref, computed } from 'vue'

const userInput = ref('')

function sanitize(text) {
  return text.replace(/]*>/g, '')
}

// Create a computed variable cleanInput that returns sanitize(userInput.value)
// Your code here



  

Hint

Use computed(() => sanitize(userInput.value)) to create reactive sanitized text.

4

Display the sanitized input

In the <template>, below the input box, add a <p> element that displays the cleanInput variable. Make sure to bind it using mustache syntax.

Vue

import { ref, computed } from 'vue'

const userInput = ref('')

function sanitize(text) {
  return text.replace(/]*>/g, '')
}

const cleanInput = computed(() => sanitize(userInput.value))



  
  
  

Hint

Use <p>{{ cleanInput }}</p> to show the sanitized text reactively.

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