Why security matters in Vue - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Cross-Site Scripting (XSS) in Vue

What is the main reason Vue automatically escapes HTML in template bindings?

A To prevent attackers from injecting malicious scripts into the app

B To make the app load faster by skipping HTML parsing

C To allow users to write raw HTML in templates without errors

D To enable Vue to style elements automatically

💡 Hint

Think about what happens if user input contains script tags.

Vue escapes HTML in template bindings to stop attackers from running harmful scripts inside your app, which is called Cross-Site Scripting (XSS).

❓ component_behavior

intermediate

Safe Rendering with v-html Directive

What happens if you use v-html with untrusted user input in Vue?

Vue

<template>
  <div v-html="userContent"></div>
</template>

<script setup>
const userContent = '<img src=x onerror=alert(1)>'
</script>

A Vue automatically sanitizes the HTML to remove scripts

B Vue throws an error and stops rendering

C The content is displayed as plain text, no HTML rendered

D The malicious script runs, causing a security risk

💡 Hint

Consider what v-html does with raw HTML strings.

The v-html directive renders raw HTML, so if the content includes malicious scripts, they will run unless you sanitize the input yourself.

🔧 Debug

advanced

Identifying a Security Flaw in Vue Code

Which option shows a Vue snippet that can cause a security vulnerability?

A <template><div>{{ userInput }}</div></template><script setup>const userInput = '<script>alert(1)</script>'</script>

B <template><div v-html="userInput"></div></template><script setup>const userInput = '<script>alert(1)</script>'</script>

C <template><div>{{ userInput }}</div></template><script setup>const userInput = 'Hello World'</script>

D <template><div>{{ userInput }}</div></template><script setup>const userInput = '&lt;script&gt;alert(1)&lt;/script&gt;'</script>

💡 Hint

Look for where raw HTML is rendered without escaping.

Option B uses v-html with raw script tags, which will execute the script and cause an XSS vulnerability.

❓ state_output

advanced

Effect of Sanitizing User Input Before Rendering

If you sanitize user input to remove scripts before assigning it to a Vue reactive variable used with v-html, what will be the output?

Vue

<template>
  <div v-html="safeContent"></div>
</template>

<script setup>
import DOMPurify from 'dompurify'
const rawContent = '<img src=x onerror=alert(1)><p>Hello</p>'
const safeContent = DOMPurify.sanitize(rawContent)
</script>

A Nothing is rendered because the content is blocked

B The malicious script runs and <p>Hello</p> is shown

C Only the <p>Hello</p> is rendered; the malicious script is removed

D Vue throws an error because of the sanitizer

💡 Hint

Think about what sanitizing does to dangerous HTML.

Sanitizing removes harmful parts like scripts but keeps safe HTML tags, so only safe content is rendered.

📝 Syntax

expert

Correct Syntax to Bind Attributes Safely in Vue

Which option correctly binds a user-provided URL to an img tag's src attribute to avoid security issues?

A <img :src="userUrl" alt="User image">

B <img src="{{ userUrl }}" alt="User image">

C <img v-bind:src="userUrl" alt="User image" v-html="userUrl">

D <img src="userUrl" alt="User image">

💡 Hint

Remember how Vue binds dynamic attributes safely.

Using :src or v-bind:src safely binds the URL as an attribute, preventing injection. Using mustache inside src or plain strings does not work correctly.