Sanitizing user input in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does sanitizing user input mean in Vue?

Sanitizing user input means cleaning or filtering the data users type in to remove harmful or unwanted parts before using it in your app.

beginner

Why is sanitizing user input important in Vue apps?

It helps prevent security problems like cross-site scripting (XSS), where bad code from users can run and harm your app or users.

beginner

Which Vue directive can help prevent unsafe HTML rendering?

Use the {{ }} double curly braces to display text safely. Avoid using v-html with untrusted input because it renders raw HTML.

intermediate

How can you sanitize user input before displaying it in Vue?

You can use libraries like DOMPurify to clean HTML strings or write simple functions to remove unwanted characters before showing input.

intermediate

What is a simple example of sanitizing input in Vue?

You can trim spaces and remove special characters from a string before using it, for example: input.trim().replace(/[^a-zA-Z0-9 ]/g, '')

What Vue feature helps prevent XSS by default when showing user input?

A Using v-html directive

B Using {{ }} interpolation

C Using v-bind:html

D Using v-on directive

The {{ }} interpolation escapes HTML automatically, preventing unsafe code from running.

Which library is commonly used to sanitize HTML in Vue apps?

A Axios

B Lodash

C DOMPurify

D Moment.js

DOMPurify cleans HTML strings to remove unsafe code before rendering.

What is a risk of using v-html with user input without sanitizing?

A It can cause cross-site scripting (XSS)

B It slows down the app

C It breaks CSS styles

D It disables Vue reactivity

v-html renders raw HTML, so unsafe input can run harmful scripts.

Which of these is NOT a good sanitizing practice?

A Directly inserting user input into v-html without cleaning

B Using trusted libraries to clean HTML

C Escaping HTML special characters

D Removing unwanted characters from input

Directly inserting user input into v-html without cleaning is unsafe.

How can you sanitize a string to allow only letters and numbers in Vue?

A Use input.split(' ')

B Use input.toUpperCase()

C Use input.trim() only

D Use input.replace(/[^a-zA-Z0-9 ]/g, '')

This regex removes all characters except letters, numbers, and spaces.

Explain why sanitizing user input is important in Vue applications and how Vue helps with this by default.

Think about how bad code from users can harm your app and what Vue does automatically.

Describe a simple way to sanitize user input in Vue before displaying it, including any tools or methods you might use.

Consider both built-in Vue features and external helpers.

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