Web Security Essentials: Protecting Your Application from Common Attacks

Security isn't optional - it's a fundamental requirement for every web application. This guide covers the most common attack vectors and practical defenses.

1. Cross-Site Scripting (XSS)

XSS allows attackers to inject malicious scripts into web pages viewed by other users.

// VULNERABLE - Never do this!
element.innerHTML = userInput;

// SAFE - Escape HTML entities
function escapeHtml(text) {
    const div = document.createElement("div");
    div.textContent = text;
    return div.innerHTML;
}

// SAFE - Use textContent
element.textContent = userInput;

// In React, JSX auto-escapes by default
// But NEVER use dangerouslySetInnerHTML with user input

Content Security Policy

// Set CSP headers to prevent inline scripts
Content-Security-Policy: default-src 'self';
    script-src 'self' 'nonce-abc123';
    style-src 'self' 'unsafe-inline';
    img-src 'self' https:;

2. SQL Injection

// VULNERABLE
$query = "SELECT * FROM users WHERE email = '$email'";

// SAFE - Use parameterized queries
$stmt = $pdo->prepare("SELECT * FROM users WHERE email = ?");
$stmt->execute([$email]);

// SAFE - Node.js with parameterized queries
const result = await db.query(
    "SELECT * FROM users WHERE email = $1",
    [email]
);

3. Cross-Site Request Forgery (CSRF)

// Server: Generate and validate CSRF tokens
// In your form
<input type="hidden" name="csrf_token" value="<?= $csrfToken ?>">

// Validation
if ($_POST['csrf_token'] !== $_SESSION['csrf_token']) {
    die('CSRF validation failed');
}

// Also set SameSite cookie attribute
Set-Cookie: session=abc123; SameSite=Strict; Secure; HttpOnly

4. Authentication Best Practices

• Hash passwords properly - Use bcrypt, scrypt, or Argon2 (NEVER MD5/SHA1)
• Implement rate limiting - Prevent brute force attacks
• Use multi-factor authentication - Something they know + something they have
• Session management - Regenerate session ID after login

// Proper password hashing (PHP)
$hash = password_hash($password, PASSWORD_ARGON2ID);
$valid = password_verify($input, $hash);

// Rate limiting (Express.js)
const rateLimit = require("express-rate-limit");
app.use("/login", rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutes
    max: 5, // 5 attempts
    message: "Too many login attempts"
}));

5. Security Headers Checklist

Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()

Security Checklist

• All user input is validated and sanitized
• Parameterized queries everywhere (no string concatenation)
• CSRF tokens on all state-changing forms
• Passwords hashed with modern algorithms
• HTTPS enforced site-wide
• Security headers configured
• Dependencies regularly updated
• Error messages don't leak sensitive information