Interactive Nuxt app showcasing real-world security vulnerabilities and their fixes.
Danger of rendering untrusted HTML.
Learn about XSS vulnerabilities by testing malicious payloads in a safe environment. See the difference between vulnerable and secure implementations.
v-html - extremely dangerous!<div v-html="userInput"></div>{}<div>{}</div>Cross-Site Scripting allows attackers to inject malicious scripts into web pages viewed by other users.
XSS can steal cookies, hijack sessions, deface websites, or redirect users to malicious sites.
Always escape user input, validate data, use CSP headers, and avoid innerHTML/v-html with user data.
<script>alert('XSS Success!')</script>Most common XSS payload - shows a popup alert
<img src='invalid' onerror='alert("Image XSS")'/>Uses broken image to trigger JavaScript execution
<svg onload='alert("SVG XSS")'></svg>SVG element with JavaScript in onload attribute
<input onfocus='alert("Input XSS")' autofocus>Auto-focusing input that triggers XSS immediately
<a href='javascript:alert("Link XSS")'>Click me</a>Link that executes JavaScript when clicked
To prevent XSS, avoid rendering raw HTML with v-html. Use text interpolation or sanitize inputs with libraries like DOMPurify.
import DOMPurify from 'dompurify';
const sanitizedInput = DOMPurify.sanitize(userInput);
Why storing sensitive data in localStorage is dangerous.
Avoid storing sensitive data in localStorage, as any script can access it. Use HTTP-only cookies or server-side sessions.
// Backend (e.g., Express.js)
res.cookie('authToken', token, { httpOnly: true, secure: true });
Dangers of using weak hashing algorithms.
Use strong hashing like bcrypt instead of MD5 or SHA-1.