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.