Sanitizing user input in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind user input to a reactive variable in Vue.

Vue

<template>
  <input v-model="userInput" placeholder="Enter text" />
  <p>User input: {{ userInput }}</p>
</template>

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

Drag options to blanks, or click blank then click option'

Acomputed

Bref

Creactive

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' instead of 'ref' for primitive values.

Trying to bind directly without a reactive variable.

In Vue 3, ref creates a reactive variable that can be bound to inputs with v-model.

2fill in blank

medium

Complete the code to sanitize user input by trimming whitespace before saving.

Vue

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

function updateInput(value) {
  userInput.value = value.[1]()
}
</script>

Drag options to blanks, or click blank then click option'

Atrim

BtoLowerCase

Creplace

Dslice

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'toLowerCase' which changes case but not spaces.

Using 'replace' without a regex to remove spaces.

The trim() method removes whitespace from both ends of a string, helping sanitize input.

3fill in blank

hard

Fix the error in the code that tries to sanitize input by escaping HTML tags.

Vue

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

function sanitizeInput(value) {
  return value.replace(/[1]/g, '&lt;')
}
</script>

Drag options to blanks, or click blank then click option'

A"

B&

C>

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' which is part of the escape but not the character to replace.

Using '>' which is the closing bracket, not the opening.

The regex should match the less-than sign < to escape HTML tags properly.

4fill in blank

hard

Fill both blanks to create a computed property that returns sanitized user input.

Vue

<script setup>
import { ref, computed } from 'vue'
const rawInput = ref('')

const sanitizedInput = computed(() => rawInput.value.[1]().replace(/[2]/g, '&lt;'))
</script>

Drag options to blanks, or click blank then click option'

Atrim

B<

C>

DtoUpperCase

Attempts:

3 left

💡 Hint

Common Mistakes

Replacing the wrong character in the regex.

Using a method that changes case instead of trimming.

First, trim whitespace, then replace the less-than sign to escape HTML tags.

5fill in blank

hard

Fill all three blanks to create a method that sanitizes input by trimming, escaping < and >, and converting to lowercase.

Vue

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

function sanitize(value) {
  return value.[1]().replace(/[2]/g, '&lt;').replace(/[3]/g, '&gt;').toLowerCase()
}
</script>

Drag options to blanks, or click blank then click option'

Atrim

B<

C>

Dslice

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to replace both < and > characters.

Using 'slice' which does not sanitize input.

Trim removes spaces, then replace < and > to escape HTML tags, finally convert to lowercase for uniformity.

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