Why security matters in Vue - Performance Evidence

Performance: Why security matters in Vue

HIGH IMPACT

Security issues in Vue apps can cause slowdowns due to extra processing or errors, impacting user experience and interaction speed.

Rendering user-generated content safely in Vue

Vue

<template>
  <div>{{ userInput }}</div>
</template>
<script setup>
const userInput = '<img src=x onerror=alert(1)>'
</script>

Using text interpolation escapes HTML, preventing script execution and keeping rendering predictable and fast.

📈 Performance GainAvoids extra script execution and layout shifts, improving INP and overall responsiveness.

Rendering user-generated content safely in Vue

Vue

<template>
  <div v-html="userInput"></div>
</template>
<script setup>
const userInput = '<img src=x onerror=alert(1)>'
</script>

Using v-html directly with untrusted input allows malicious scripts to run, causing security risks and potential slowdowns from unexpected script execution.

📉 Performance CostTriggers extra script execution and potential layout thrashing from injected elements, increasing INP and causing jank.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Unsafe v-html with raw user input	Adds unpredictable nodes	Multiple reflows if scripts modify DOM	High paint cost due to layout shifts	[X] Bad
Safe text interpolation with escaped content	Stable DOM nodes	Single reflow on initial render	Low paint cost, no layout shifts	[OK] Good

Rendering Pipeline

Unsafe rendering of user content can inject scripts that run during or after paint, causing layout shifts and blocking input responsiveness.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckPaint and Composite stages due to unexpected DOM changes and script execution

Core Web Vital Affected

INP

Security issues in Vue apps can cause slowdowns due to extra processing or errors, impacting user experience and interaction speed.

Optimization Tips

1Never use v-html with untrusted user input without sanitizing.

2Prefer text interpolation to escape HTML and prevent script injection.

3Check performance in DevTools for layout shifts and long tasks after rendering user content.

Performance Quiz - 3 Questions

What is a performance risk of using v-html with untrusted user input in Vue?

A It can run malicious scripts causing slowdowns and layout shifts

B It automatically optimizes rendering for faster paint

C It reduces DOM nodes and improves performance

D It caches content to speed up future renders

DevTools: Performance

How to check: Record a session while interacting with user-generated content. Look for long tasks or layout shifts after rendering.

What to look for: High INP values or unexpected layout shifts indicate unsafe rendering causing performance issues.