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.