AppSec - OWASP Top 10

A practitioner's guide to application security based on the OWASP Top 10 2021. This skill covers the full lifecycle of web application security - from threat modeling to concrete code patterns for preventing injection, authentication failures, XSS, CSRF, SSRF, and misconfiguration. Designed for developers who need security guidance at the code level, not just as policy.

When to use this skill

Trigger this skill when the user:

• Asks how to prevent XSS, SQL injection, CSRF, or SSRF
• Implements or reviews authentication / session management
• Sets security headers (CSP, HSTS, X-Frame-Options, etc.)
• Validates or sanitizes user input
• Designs authorization logic or access controls
• Reviews code for OWASP Top 10 vulnerabilities
• Asks about output encoding, parameterized queries, or allowlists

Do NOT trigger this skill for:

• Network-level security (firewalls, VPNs, DDoS mitigation) - use a network security skill instead
• Secrets management / key rotation workflows - use a secrets management skill for those operational concerns

Key principles

1. Never trust user input - All data from the outside world is untrusted: HTTP bodies, headers, query params, cookies, uploaded files, and even data read back from your own database that originated from user input.

2. Defense in depth - Apply multiple independent security controls. If one layer fails, the next one stops the attack. Never rely on a single control.

3. Least privilege - Every component (user accounts, DB connections, API tokens, OS processes) should have only the permissions required and nothing more. Blast radius is limited by privilege scope.

4. Fail securely - When something goes wrong, default to the most restrictive outcome. Deny access on error, not grant it. Surface a generic error message to users, log the detail server-side.

5. Security by default - Secure configuration should be the default state. Developers should have to explicitly opt out of security controls, not opt in.

Core concepts

OWASP Top 10 2021

Threat modeling basics

Before writing security controls, answer four questions:

1. What are we building? - Draw a data-flow diagram including trust boundaries
2. What can go wrong? - Use STRIDE (Spoofing, Tampering, Repudiation, Info Disclosure, Denial of Service, Elevation of Privilege)
3. What are we going to do about it? - For each threat, decide: mitigate, accept, transfer, or eliminate
4. Did we do a good enough job? - Validate controls cover identified threats

Run threat modeling at design time, not after the code is written.

Security headers quick reference

See references/security-headers.md for full CSP directive reference and frame-ancestors vs X-Frame-Options comparison.

Common tasks

Prevent XSS with output encoding

Never insert untrusted data into HTML without context-aware encoding. The encoding rule depends on where in the HTML the data lands.

import DOMPurify from 'dompurify';
import { escape } from 'html-escaper';

// 1. HTML context - escape <, >, &, ", '
function renderComment(userInput: string): string {
  return escape(userInput); // safe: &lt;script&gt; not executed
}

// 2. When you must allow some HTML (e.g. rich text) - sanitize, don't escape
function renderRichText(userHtml: string): string {
  // DOMPurify strips disallowed tags/attributes; allowlist only what you need
  return DOMPurify.sanitize(userHtml, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'li'],
    ALLOWED_ATTR: ['href', 'title'],
  });
}

// 3. JavaScript context - use JSON.stringify, never template-inject
// WRONG:  <script>var name = "<%= userInput %>";</script>
// RIGHT:
function inlineJsonData(data: unknown): string {
  // JSON.stringify encodes <, >, & to unicode escapes automatically
  return `<script>var __DATA__ = ${JSON.stringify(data)};</script>`;
}

Set Content-Security-Policy: default-src 'self'; script-src 'self' so that even if encoding fails, inline scripts are blocked by the browser.

Prevent SQL injection with parameterized queries

Never concatenate user input into SQL strings. Always use parameterized queries or a safe ORM layer.

import { Pool } from 'pg';

const pool = new Pool();

// WRONG - string interpolation:
// const rows = await pool.query(`SELECT * FROM users WHERE email = '${email}'`);

// RIGHT - parameterized ($1, $2 for pg):
async function findUserByEmail(email: string) {
  const { rows } = await pool.query(
    'SELECT id, name, email FROM users WHERE email = $1',
    [email]
  );
  return rows[0] ?? null;
}

// RIGHT - ORM (Prisma example):
// const user = await prisma.user.findUnique({ where: { email } });

// Dynamic ORDER BY (column names can't be parameterized - use an allowlist):
const ALLOWED_SORT_COLUMNS = new Set(['name', 'created_at', 'email'] as const);

async function listUsers(sortBy: string, order: 'ASC' | 'DESC') {
  if (!ALLOWED_SORT_COLUMNS.has(sortBy as any)) {
    throw new Error(`Invalid sort column: ${sortBy}`);
  }
  const direction = order === 'DESC' ? 'DESC' : 'ASC'; // only two valid values
  const { rows } = await pool.query(
    `SELECT id, name FROM users ORDER BY ${sortBy} ${direction}`
  );
  return rows;
}

Implement CSRF protection

For detailed CSRF token pattern and SameSite cookie implementations, see references/auth-csrf-patterns.md.

Set security headers (CSP, HSTS, X-Frame-Options)

import helmet from 'helmet';
import { Express } from 'express';

function applySecurityHeaders(app: Express): void {
  app.use(
    helmet({
      // HSTS: force HTTPS for 2 years, include subdomains, add to preload list
      hsts: {
        maxAge: 63072000,
        includeSubDomains: true,
        preload: true,
      },

      // CSP: restrict resource loading to same origin; tighten per-app
      contentSecurityPolicy: {
        directives: {
          defaultSrc: ["'self'"],
          scriptSrc: ["'self'"],          // no inline scripts, no eval
          styleSrc: ["'self'", "'unsafe-inline'"], // relax only if needed
          imgSrc: ["'self'", 'data:', 'https://cdn.example.com'],
          connectSrc: ["'self'", 'https://api.example.com'],
          fontSrc: ["'self'"],
          objectSrc: ["'none'"],
          frameAncestors: ["'none'"],     // replaces X-Frame-Options
          upgradeInsecureRequests: [],
        },
      },

      // Clickjacking: frameAncestors in CSP is preferred; keep this as fallback
      frameguard: { action: 'deny' },

      // Prevent MIME sniffing
      noSniff: true,

      // Limit referrer leakage
      referrerPolicy: { policy: 'strict-origin-when-cross-origin' },

      // Disable browser features not used by the app
      permittedCrossDomainPolicies: false,
    })
  );

  // Permissions-Policy (not yet in helmet stable - set manually)
  app.use((_req, res, next) => {
    res.setHeader(
      'Permissions-Policy',
      'camera=(), microphone=(), geolocation=(), payment=()'
    );
    next();
  });
}

Implement secure authentication (bcrypt, JWT, session)

For detailed bcrypt password hashing, JWT issuance, and secure login handler implementations, see references/auth-csrf-patterns.md.

Prevent SSRF

Validate and restrict any URL your server fetches on behalf of a user request.

import { URL } from 'url';
import dns from 'dns/promises';
import { isPrivate } from 'private-ip'; // npm i private-ip

const ALLOWED_SCHEMES = new Set(['https:']);
const ALLOWED_HOSTS = new Set(['api.example.com', 'cdn.example.com']);

async function isSafeUrl(rawUrl: string): Promise<boolean> {
  let parsed: URL;
  try {
    parsed = new URL(rawUrl);
  } catch {
    return false; // not a valid URL
  }

  // 1. Allowlist scheme
  if (!ALLOWED_SCHEMES.has(parsed.protocol)) return false;

  // 2. If you can't use a host allowlist, at least block private/internal ranges
  if (!ALLOWED_HOSTS.has(parsed.hostname)) {
    // Resolve the hostname and check its IP
    try {
      const addresses = await dns.lookup(parsed.hostname, { all: true });
      for (const { address } of addresses) {
        if (isPrivate(address)) return false; // blocks 10.x, 172.16-31.x, 192.168.x, 127.x, etc.
      }
    } catch {
      return false; // DNS resolution failure - deny
    }
  }

  return true;
}

async function fetchWebhook(userProvidedUrl: string, payload: unknown) {
  if (!(await isSafeUrl(userProvidedUrl))) {
    throw new Error('URL not allowed');
  }
  // Proceed with fetch - also set a tight timeout
  const res = await fetch(userProvidedUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
    signal: AbortSignal.timeout(5000), // 5-second hard timeout
  });
  return res;
}

Input validation with allowlists

Reject anything that doesn't match your expected format. Allowlists are far safer than blocklists because attackers find encodings you didn't block.

import { z } from 'zod'; // npm i zod

// Define strict schemas - unknown fields are stripped by default
const CreateUserSchema = z.object({
  email: z.string().email().max(254).toLowerCase(),
  name: z.string().min(1).max(100).regex(/^[\p{L}\p{N} '-]+$/u), // letters, digits, space, hyphen, apostrophe
  role: z.enum(['viewer', 'editor', 'admin']), // strict allowlist, not a free string
  age: z.number().int().min(13).max(120).optional(),
});

type CreateUserInput = z.infer<typeof CreateUserSchema>;

function validateCreateUser(body: unknown): CreateUserInput {
  // parse() throws ZodError with field-level detail on failure
  return CreateUserSchema.parse(body);
}

// Use in Express middleware
import { Request, Response, NextFunction } from 'express';

function validateBody<T>(schema: z.ZodSchema<T>) {
  return (req: Request, res: Response, next: NextFunction) => {
    const result = schema.safeParse(req.body);
    if (!result.success) {
      res.status(400).json({
        error: 'Validation failed',
        issues: result.error.flatten().fieldErrors,
      });
      return;
    }
    req.body = result.data; // replace with validated + stripped data
    next();
  };
}

// router.post('/users', validateBody(CreateUserSchema), createUserHandler);

Anti-patterns

Gotchas

1. DNS rebinding bypasses IP-based SSRF blocklists - An attacker registers a domain that initially resolves to a public IP (passing your IP check), then immediately re-resolves to 169.254.169.254 (cloud metadata). The server fetches the attacker's internal target. Mitigate by using a host allowlist, not just an IP blocklist, or by caching the resolved IP and using it for the actual connection.

2. bcrypt.compare() must always run even for missing users - If you return early with "user not found" before calling bcrypt.compare(), the response time is measurably shorter than a failed password check. Timing-based enumeration reveals valid email addresses. Always run bcrypt.compare() against a dummy hash even when the user doesn't exist.

3. CSP unsafe-inline on script-src negates XSS protection - Adding 'unsafe-inline' to script-src allows all inline scripts, which is what CSP exists to prevent. If you need inline styles, use 'unsafe-inline' on style-src only. For inline scripts, use nonces or hashes instead.

4. SameSite=Lax doesn't protect non-GET state-changing requests on cross-site navigation - Top-level navigations with GET are allowed under SameSite=Lax. For mutation endpoints invoked via form POST from another origin, Lax provides no protection. Use SameSite=Strict or implement CSRF tokens for server-rendered form submissions.

5. Dynamic ORDER BY column names can't be parameterized and are injection vectors - You can't use $1 for a column name or SQL keyword. A sortBy query parameter passed directly into ORDER BY ${sortBy} is injectable. Always validate against an explicit allowlist of permitted column names before interpolating.

References

For deeper implementation guidance, load the relevant reference file:

• references/security-headers.md - Full CSP directive reference, HSTS preloading, frame-ancestors vs X-Frame-Options, Permissions-Policy
• references/auth-csrf-patterns.md - CSRF token pattern, SameSite cookie setup, bcrypt/JWT authentication implementation