Sanitizing user input in Vue - Performance & Optimization

Performance: Sanitizing user input

HIGH IMPACT

Sanitizing user input affects page security and rendering stability by preventing injection attacks and layout shifts caused by malicious or malformed input.

Displaying user-generated HTML content safely in a Vue app

Vue

import DOMPurify from 'dompurify';
const userInput = '<img src=x onerror=alert(1)>Hello';
const safeInput = DOMPurify.sanitize(userInput);
<template>
  <div v-html="safeInput"></div>
</template>

Sanitizing removes harmful scripts and malformed tags, preventing layout shifts and security issues.

📈 Performance GainPrevents CLS and reflows caused by injected scripts or broken elements; improves user experience and security.

Displaying user-generated HTML content safely in a Vue app

Vue

const userInput = '<img src=x onerror=alert(1)>Hello';
// Directly binding with v-html
<template>
  <div v-html="userInput"></div>
</template>

Directly injecting user input with v-html allows malicious scripts and causes layout shifts if images fail to load or scripts run.

📉 Performance CostTriggers layout shifts (CLS) and potential reflows due to unexpected DOM changes; security risks can cause browser slowdowns.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct v-html with unsanitized input	Adds unpredictable nodes and event handlers	Multiple reflows if images/scripts load or fail	High paint cost due to layout shifts	[X] Bad
v-html with sanitized input (e.g., DOMPurify)	Adds only safe nodes, no scripts	Single reflow on initial render	Low paint cost, stable layout	[OK] Good

Rendering Pipeline

User input is sanitized before being inserted into the DOM, preventing unexpected layout recalculations and repaints caused by malicious or malformed content.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout due to unexpected DOM changes from unsanitized input

Core Web Vital Affected

CLS

Sanitizing user input affects page security and rendering stability by preventing injection attacks and layout shifts caused by malicious or malformed input.

Optimization Tips

1Never bind raw user input directly with v-html without sanitization.

2Use a trusted sanitization library like DOMPurify to clean HTML input.

3Sanitizing user input reduces layout shifts and improves visual stability (CLS).

Performance Quiz - 3 Questions

What is the main performance risk of inserting unsanitized user input with v-html in Vue?

A Causes layout shifts and security vulnerabilities

B Increases JavaScript bundle size

C Improves rendering speed

D Reduces paint cost

DevTools: Performance

How to check: Record a performance profile while loading user content; look for layout shifts and long tasks caused by script execution or image loading.

What to look for: Check for CLS score spikes and layout recalculations in the flame chart indicating unstable or heavy DOM changes.