Web Security Essentials for Developers

Security vulnerabilities can be devastating. Here's how to protect your applications from common attacks.

Cross-Site Scripting (XSS)#

// XSS happens when user input is rendered as HTML

// ❌ Vulnerable to XSS
app.get('/search', (req, res) => {
  const query = req.query.q;
  res.send(`<h1>Results for: ${query}</h1>`);
  // If query = "<script>alert('xss')</script>", it executes
});

// ✓ Escape output
import { escape } from 'html-escaper';

app.get('/search', (req, res) => {
  const query = escape(req.query.q);
  res.send(`<h1>Results for: ${query}</h1>`);
});

// React escapes by default
function SearchResults({ query }) {
  // Safe - React escapes content
  return <h1>Results for: {query}</h1>;
}

// ❌ Dangerous - bypasses React's protection
function DangerousComponent({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

// ✓ If you must render HTML, sanitize it
import DOMPurify from 'dompurify';

function SafeHtmlComponent({ html }) {
  const sanitized = DOMPurify.sanitize(html);
  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
}

Cross-Site Request Forgery (CSRF)#

// CSRF exploits authenticated sessions

// ❌ Vulnerable endpoint
app.post('/transfer', (req, res) => {
  const { to, amount } = req.body;
  // An attacker's page could submit this form
  transferMoney(req.user.id, to, amount);
});

// ✓ Use CSRF tokens
import csrf from 'csurf';

const csrfProtection = csrf({ cookie: true });

app.get('/transfer', csrfProtection, (req, res) => {
  res.render('transfer', { csrfToken: req.csrfToken() });
});

app.post('/transfer', csrfProtection, (req, res) => {
  // Token verified automatically
  transferMoney(req.user.id, req.body.to, req.body.amount);
});

// In your form
<form action="/transfer" method="POST">
  <input type="hidden" name="_csrf" value="{{csrfToken}}" />
  <!-- form fields -->
</form>

// For APIs, use SameSite cookies
app.use(session({
  cookie: {
    httpOnly: true,
    secure: true,
    sameSite: 'strict', // Prevents CSRF for most cases
  },
}));

SQL Injection#

// ❌ Vulnerable to SQL injection
const query = `SELECT * FROM users WHERE email = '${email}'`;
// If email = "' OR '1'='1", returns all users

// ✓ Use parameterized queries
const result = await db.query(
  'SELECT * FROM users WHERE email = $1',
  [email]
);

// ✓ ORMs handle this automatically
const user = await prisma.user.findUnique({
  where: { email },
});

// ❌ Even with ORMs, raw queries can be vulnerable
const users = await prisma.$queryRaw`
  SELECT * FROM users WHERE email = '${email}'
`; // Still vulnerable!

// ✓ Use proper interpolation
const users = await prisma.$queryRaw`
  SELECT * FROM users WHERE email = ${email}
`; // Prisma handles escaping

Security Headers#

import helmet from 'helmet';

const app = express();

// Helmet sets multiple security headers
app.use(helmet());

// Or configure individually
app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      scriptSrc: ["'self'"],
      imgSrc: ["'self'", 'data:', 'https:'],
    },
  },
  hsts: {
    maxAge: 31536000,
    includeSubDomains: true,
    preload: true,
  },
  referrerPolicy: { policy: 'strict-origin-when-cross-origin' },
}));

// Key headers explained:
// Content-Security-Policy: Controls resource loading
// Strict-Transport-Security: Forces HTTPS
// X-Content-Type-Options: Prevents MIME sniffing
// X-Frame-Options: Prevents clickjacking
// Referrer-Policy: Controls referrer information

Authentication Security#

// Password hashing
import bcrypt from 'bcrypt';

const SALT_ROUNDS = 12;

async function hashPassword(password: string): Promise<string> {
  return bcrypt.hash(password, SALT_ROUNDS);
}

async function verifyPassword(
  password: string,
  hash: string
): Promise<boolean> {
  return bcrypt.compare(password, hash);
}

// Secure session configuration
app.use(session({
  secret: process.env.SESSION_SECRET!, // Long random string
  name: 'sessionId', // Don't use default 'connect.sid'
  cookie: {
    httpOnly: true,   // Prevents JavaScript access
    secure: true,     // HTTPS only
    sameSite: 'lax',  // CSRF protection
    maxAge: 24 * 60 * 60 * 1000, // 24 hours
  },
  resave: false,
  saveUninitialized: false,
}));

// Rate limiting for auth endpoints
import rateLimit from 'express-rate-limit';

const authLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // 5 attempts
  message: 'Too many login attempts',
});

app.post('/login', authLimiter, async (req, res) => {
  // Login logic
});

Input Validation#

import { z } from 'zod';

// Define schema
const userSchema = z.object({
  email: z.string().email().max(255),
  password: z.string().min(8).max(100),
  age: z.number().int().min(0).max(150).optional(),
});

// Validate input
app.post('/users', (req, res) => {
  const result = userSchema.safeParse(req.body);

  if (!result.success) {
    return res.status(400).json({
      error: 'Validation failed',
      details: result.error.flatten(),
    });
  }

  // result.data is typed and validated
  createUser(result.data);
});

// Sanitize output
function sanitizeUser(user: User): PublicUser {
  const { password, ...publicUser } = user;
  return publicUser;
}

File Upload Security#

import multer from 'multer';
import path from 'path';

// Validate file type
const upload = multer({
  storage: multer.diskStorage({
    destination: './uploads',
    filename: (req, file, cb) => {
      // Generate safe filename
      const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
      cb(null, `${uniqueSuffix}${path.extname(file.originalname)}`);
    },
  }),
  limits: {
    fileSize: 5 * 1024 * 1024, // 5MB
  },
  fileFilter: (req, file, cb) => {
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];

    if (!allowedTypes.includes(file.mimetype)) {
      cb(new Error('Invalid file type'));
      return;
    }

    // Also check magic bytes for extra security
    cb(null, true);
  },
});

app.post('/upload', upload.single('file'), (req, res) => {
  // File is validated and saved
});

Secrets Management#

// ❌ Never hardcode secrets
const apiKey = 'sk_live_abc123';

// ✓ Use environment variables
const apiKey = process.env.API_KEY;

// ✓ Validate required env vars at startup
function validateEnv(): void {
  const required = ['DATABASE_URL', 'JWT_SECRET', 'API_KEY'];
  const missing = required.filter(key => !process.env[key]);

  if (missing.length > 0) {
    throw new Error(`Missing env vars: ${missing.join(', ')}`);
  }
}

// ✓ Use secrets manager in production
import { SecretsManager } from '@aws-sdk/client-secrets-manager';

async function getSecret(name: string): Promise<string> {
  const client = new SecretsManager();
  const response = await client.getSecretValue({ SecretId: name });
  return response.SecretString!;
}

Security Checklist#

Authentication:
✓ Hash passwords with bcrypt/argon2
✓ Implement rate limiting
✓ Use secure session settings
✓ Implement MFA where appropriate

Data:
✓ Validate all input
✓ Escape all output
✓ Use parameterized queries
✓ Sanitize file uploads

Transport:
✓ Use HTTPS everywhere
✓ Set security headers
✓ Configure CORS properly
✓ Use secure cookies

Secrets:
✓ Never commit secrets
✓ Use environment variables
✓ Rotate credentials regularly
✓ Use secrets manager in production

Security requires defense in depth. Validate input, escape output, use parameterized queries, set security headers, and manage secrets properly. Regular security audits and staying updated on vulnerabilities are essential for maintaining secure applications.