Web Security Fundamentals Every Developer Should Know

Cross-Site Scripting (XSS)#

• Always escape user input

• Use React's automatic JSX escaping

• Set Content-Security-Policy headers

• Sanitize HTML with DOMPurify

• Use textContent, not innerHTML

SQL Injection#

// NEVERconst query = 'SELECT * FROM users WHERE id = ' + userId;​// ALWAYSconst user = await prisma.user.findUnique({ where: { id: userId } });

Security Headers#

const securityHeaders = [  { key: "X-Frame-Options", value: "DENY" },  { key: "X-Content-Type-Options", value: "nosniff" },  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },  { key: "Strict-Transport-Security", value: "max-age=31536000" },];

Security Checklist#

• Input validation on both client and server

• Parameterized database queries

• HTTPS everywhere

• Security headers configured

• Rate limiting on auth endpoints

• Dependency vulnerability scanning

• Environment variables for secrets