XSS prevention in templates in Vue - Step-by-Step Execution

Concept Flow - XSS prevention in templates

User Input Received

↓

Template Binding

↓

Vue Escapes HTML Special Characters

↓

Safe Content Rendered in DOM

↓

User Sees Rendered Output

↓

Use v-html Directive

↓

Developer Must Sanitize Input

↓

Raw HTML Inserted

↓

Potential XSS Risk if Unsanitized

Vue automatically escapes user input in templates to prevent XSS, unless raw HTML is explicitly inserted with v-html, which requires careful sanitization.

Execution Sample

Vue

<template>
  <div>{{ userInput }}</div>
  <div v-html="rawHtml"></div>
</template>

<script setup>
const userInput = '<script>alert(1)</script>'
const rawHtml = '<b>Bold Text</b>'
</script>

This Vue template shows safe rendering of userInput with automatic escaping and raw HTML rendering with v-html.

Execution Table

Step	Action	Input Value	Escaped Output	Rendered DOM Content
1	Bind userInput with {{ }}	<script>alert(1)</script>	&lt;script&gt;alert(1)&lt;/script&gt;	&lt;script&gt;alert(1)&lt;/script&gt;
2	Bind rawHtml with v-html	<b>Bold Text</b>	N/A (raw HTML)	<b>Bold Text</b>
3	Render DOM	N/A	N/A	First div shows escaped text, second div shows bold text
4	User sees output	N/A	N/A	Safe text visible, no script runs; bold text formatted

💡 Rendering completes with safe escaped text for userInput and raw HTML for rawHtml.

Variable Tracker

Variable	Initial	After Render
userInput	"<script>alert(1)</script>"	"<script>alert(1)</script>" (escaped in DOM)
rawHtml	"<b>Bold Text</b>"	"<b>Bold Text</b>" (rendered as HTML)

Key Moments - 3 Insights

Why does the script tag in userInput not run in the browser?

Because Vue escapes special HTML characters in {{ }} bindings, turning < and > into &lt; and &gt;, so the browser treats it as text, not code (see execution_table step 1).

What happens if we use v-html with unsanitized user input?

v-html inserts raw HTML directly into the DOM without escaping, so if the input contains scripts, they will run, causing XSS risks (see concept_flow and execution_table step 2).

How can developers safely insert raw HTML?

They must sanitize the HTML to remove dangerous code before assigning it to a variable used with v-html, preventing XSS attacks (see concept_flow raw HTML path).

Visual Quiz - 3 Questions

Look at the execution_table, what is the rendered DOM content of userInput at step 1?

A <script>alert(1)</script>

B &lt;script&gt;alert(1)&lt;/script&gt;

C alert(1)

D Bold Text

💡 Hint

Check the 'Rendered DOM Content' column for step 1 in execution_table.

At which step does Vue insert raw HTML without escaping?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look for v-html usage in execution_table steps.

If userInput was bound with v-html instead of {{ }}, what risk would appear?

A Scripts in userInput would run causing XSS

B No risk, same safe output

C Raw HTML would be escaped

D Text would be converted to uppercase

💡 Hint

Refer to key_moments about v-html and XSS risks.

Concept Snapshot

Vue templates escape user input by default to prevent XSS.
Use {{ userInput }} for safe text rendering.
Use v-html to insert raw HTML, but sanitize first.
Never trust raw HTML from users without cleaning.
Escaping converts < > & to safe text entities.
This keeps your app safe from malicious scripts.

Full Transcript

In Vue templates, user input shown with double curly braces {{ }} is automatically escaped. This means special characters like < and > become safe text entities, so scripts do not run. For example, if userInput contains a script tag, Vue will show it as text, not execute it. However, if you use the v-html directive, Vue inserts the content as raw HTML. This can be useful for formatting but is risky if the HTML is not sanitized. Unsanitized raw HTML can run scripts and cause cross-site scripting (XSS) attacks. Developers must sanitize any raw HTML before using v-html. This visual trace shows how Vue handles these cases step-by-step, ensuring safe rendering by default and highlighting where risks appear.

Practice

1. In Vue templates, which syntax automatically escapes content to prevent XSS attacks?

easy

A. Directly manipulating the DOM with JavaScript

B. Using v-html directive to insert HTML

C. Using triple curly braces like {{{ userInput }}}

D. Using double curly braces like {{ userInput }}

Solution

1. Step 1: Understand Vue's default escaping

   Vue automatically escapes content inside {{ }} to prevent XSS by converting special characters to safe HTML entities.

2. Step 2: Compare with other methods

   Using v-html inserts raw HTML and can cause XSS if content is unsafe. Direct DOM manipulation bypasses Vue's protections.

3. Final Answer:

   Using double curly braces like {{ userInput }} -> Option D

4. Quick Check:

   Vue escapes {{ }} content = A [OK]

Hint: Remember: {{ }} escapes content, v-html does not [OK]

Common Mistakes:

• Thinking v-html escapes content automatically
• Assuming v-text sanitizes HTML
• Believing direct DOM manipulation is safe

2. Which of the following Vue template usages is syntactically correct and safe from XSS by default?

easy

A. <div v-html="userInput"></div>

B. <div>{{ userInput }}</div>

C. <div v-text=userInput></div>

D. <div>{{ userInput</div> }}

Solution

1. Step 1: Check syntax correctness

   <div>{{ userInput }}</div> uses correct Vue syntax with double curly braces and quotes are properly placed.

2. Step 2: Check XSS safety

   <div>{{ userInput }}</div> escapes content automatically, making it safe. <div v-html="userInput"></div> uses v-html which inserts raw HTML and can be unsafe. <div v-text=userInput></div> misses quotes around the binding value, causing syntax error. <div>{{ userInput</div> }} has mismatched braces causing syntax error.

3. Final Answer:

   <div>{{ userInput }}</div> -> Option B

4. Quick Check:

   Correct syntax + auto-escape = D [OK]

Hint: Use {{ }} with quotes for safe, correct syntax [OK]

Common Mistakes:

• Using v-html without sanitizing input
• Omitting quotes in directives
• Mismatching curly braces

3. Given the Vue template code:
<pre><template> <div>{{ userInput }}</div> <div v-html="userInput"></div> </template> And userInput is '<img src=x onerror=alert(1)>', what will be rendered in the browser?

medium

A. The first div shows the raw HTML tag as text; the second div executes the alert popup.

B. Both divs show the raw HTML tag as text without executing alert.

C. Both divs execute the alert popup.

D. The first div executes alert; the second div shows raw HTML tag as text.

Solution

1. Step 1: Analyze the first div with {{ userInput }}

   Vue escapes the content, so the HTML tag is shown as plain text, no alert runs.

2. Step 2: Analyze the second div with v-html

   v-html inserts raw HTML, so the <img> tag runs and triggers the alert.

3. Final Answer:

   The first div shows the raw HTML tag as text; the second div executes the alert popup. -> Option A

4. Quick Check:

   v-html inserts raw HTML = A [OK]

Hint: v-html runs HTML, {{ }} escapes it [OK]

Common Mistakes:

• Assuming both divs escape content
• Thinking v-html escapes content
• Confusing which div triggers alert

4. You have this Vue template:

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

User input is not sanitized. What is the best fix to prevent XSS?

medium

A. Replace v-html with {{ userContent }} to auto-escape

B. Keep v-html but add v-text on the same element

C. Use v-html but trust all user input as safe

D. Wrap v-html inside a <script> tag

Solution

1. Step 1: Identify the risk of v-html with unsanitized input

   v-html inserts raw HTML, so unsanitized user input can cause XSS attacks.

2. Step 2: Choose a safe alternative

   Replacing v-html with {{ userContent }} escapes content automatically, preventing XSS.

3. Final Answer:

   Replace v-html with {{ userContent }} to auto-escape -> Option A

4. Quick Check:

   Use {{ }} to escape user input safely = C [OK]

Hint: Avoid v-html with unsafe input; use {{ }} instead [OK]

Common Mistakes:

• Adding v-text does not sanitize v-html content
• Trusting all user input without sanitization
• Using script tags incorrectly

5. You want to display user comments that may contain safe HTML tags like <b> and <i> but prevent XSS in Vue. Which approach is best?

hard

A. Use {{ comment }} to escape all HTML, showing tags as text

B. Use v-html directly without sanitizing user comments

C. Use v-html with a sanitizer function that removes unsafe tags before binding

D. Replace <b> and <i> tags with <script> tags

Solution

1. Step 1: Understand the need to allow some HTML but block unsafe tags

   Using v-html allows HTML rendering but can cause XSS if input is unsafe.

2. Step 2: Use a sanitizer to clean user input

   Sanitizing removes dangerous tags/scripts but keeps safe tags like <b> and <i>.

3. Step 3: Bind sanitized content with v-html

   This approach safely renders allowed HTML while preventing XSS.

4. Final Answer:

   Use v-html with a sanitizer function that removes unsafe tags before binding -> Option C

5. Quick Check:

   Sanitize input before v-html = B [OK]

Hint: Sanitize user HTML before v-html to allow safe tags [OK]

Common Mistakes:

• Using v-html without sanitizing
• Escaping all HTML losing formatting
• Replacing safe tags with script tags