application-security

Application Security Skill

Secure coding patterns, vulnerability prevention, and security tooling for web applications.

OWASP Top 10 (2021) with Code Examples

A01: Broken Access Control

// BAD - No authorization check
app.get('/api/users/:id', async (req, res) => {
  const user = await db.user.findUnique({ where: { id: req.params.id } });
  res.json(user);
});

// GOOD - Verify ownership or role
app.get('/api/users/:id', authenticate, async (req, res) => {
  if (req.user.id !== req.params.id && req.user.role !== 'ADMIN') {
    return res.status(403).json({ error: 'Forbidden' });
  }
  const user = await db.user.findUnique({ where: { id: req.params.id } });
  res.json(user);
});

A02: Cryptographic Failures

// BAD - Weak hashing
import crypto from 'crypto';
const hash = crypto.createHash('md5').update(password).digest('hex');

// GOOD - Use bcrypt with proper rounds
import bcrypt from 'bcrypt';
const hash = await bcrypt.hash(password, 12);
const isValid = await bcrypt.compare(password, hash);

A03: Injection

// BAD - SQL injection
const query = `SELECT * FROM users WHERE email = '${email}'`;

// GOOD - Parameterized queries (Prisma handles this automatically)
const user = await prisma.user.findUnique({ where: { email } });

// GOOD - Parameterized raw SQL when needed
const users = await prisma.$queryRaw`SELECT * FROM users WHERE email = ${email}`;

A07: Cross-Site Scripting (XSS)

// BAD - Rendering raw HTML
element.innerHTML = userInput;

// GOOD - Use textContent or framework escaping
element.textContent = userInput;

// GOOD - React auto-escapes by default
return <div>{userInput}</div>;

// BAD in React - dangerouslySetInnerHTML
return <div dangerouslySetInnerHTML={{ __html: userInput }} />;

Content Security Policy (CSP)

Recommended Headers

// Next.js middleware
import { NextResponse } from 'next/server';

export function middleware(request: Request) {
  const nonce = crypto.randomUUID();
  const csp = [
    `default-src 'self'`,
    `script-src 'self' 'nonce-${nonce}'`,
    `style-src 'self' 'unsafe-inline'`,
    `img-src 'self' data: https:`,
    `font-src 'self'`,
    `connect-src 'self' https://api.example.com`,
    `frame-ancestors 'none'`,
    `base-uri 'self'`,
    `form-action 'self'`,
  ].join('; ');

  const response = NextResponse.next();
  response.headers.set('Content-Security-Policy', csp);
  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  response.headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
  return response;
}