Why security matters in Vue - See It in Action

Why security matters in Vue

📖 Scenario: You are building a simple Vue app that shows user comments on a blog. You want to make sure the app is safe from common security problems like showing harmful code.

🎯 Goal: Create a Vue component that safely displays user comments by preventing unsafe HTML from running.

📋 What You'll Learn

Create a Vue 3 component with a list of user comments

Add a configuration variable to control whether to allow HTML in comments

Use Vue's built-in features to safely render comments based on the configuration

Complete the component with proper template and script setup

💡 Why This Matters

🌍 Real World

Web apps often show user-generated content. Unsafe HTML can cause security problems like cross-site scripting (XSS). This project shows how to handle user comments safely in Vue.

💼 Career

Understanding how to prevent security risks in frontend frameworks like Vue is essential for web developers to build safe and trustworthy applications.

1

Set up the comments data

Create a Vue 3 component with a comments array containing these exact strings: 'Hello world!', 'Nice post!', and ''.

Vue

// Create a comments array with the exact strings
// Your code here

Hint

Use const comments = [ ... ] with the exact strings inside.

2

Add a configuration to allow HTML

Add a allowHtml boolean variable set to false to control if comments should render HTML or plain text.

Vue

const comments = [
  'Hello world!',
  'Nice post!',
  'alert("Hacked!")'
]

// Add allowHtml variable here
// Your code here

Hint

Use const allowHtml = false exactly.

3

Render comments safely based on configuration

In the template, use a v-for loop with comment as the item to display each comment. Use v-html to render HTML only if allowHtml is true; otherwise, display the comment as plain text inside a <div>.

Vue

const comments = [
  'Hello world!',
  'Nice post!',
  'alert("Hacked!")'
]

const allowHtml = false



  
  

Hint

Use v-for with comment and index. Use v-html only if allowHtml is true, else show plain text.

4

Complete the component with accessibility and structure

Add a <section> wrapper with an aria-label of "User comments" around the comments list for accessibility.

Vue

const comments = [
  'Hello world!',
  'Nice post!',
  'alert("Hacked!")'
]

const allowHtml = false



  
  

Hint

Wrap the comments in a <section> with aria-label="User comments" for screen readers.