Web Security: Complete Guide to Protecting Your Applications

Jan 21, 2024 • 14 min read

Web security is critical for protecting user data, maintaining application integrity, and building trust with your users. This comprehensive guide covers essential security practices, common vulnerabilities, and how to implement robust security measures in your web applications.

Understanding Web Security Threats

Common Attack Vectors

  • Cross-Site Scripting (XSS): Injecting malicious scripts
  • Cross-Site Request Forgery (CSRF): Unauthorized actions on behalf of users
  • SQL Injection: Manipulating database queries
  • Authentication Bypass: Gaining unauthorized access
  • Session Hijacking: Stealing user sessions
  • Man-in-the-Middle Attacks: Intercepting communications

Input Validation and Sanitization

Client-Side Validation

// HTML5 validation
<form>
  <input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="password" required minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
  <input type="number" min="0" max="100">
</form>

// JavaScript validation
function validateForm(formData) {
  const email = formData.get('email');
  const password = formData.get('password');

  // Email validation
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    throw new Error('Invalid email format');
  }

  // Password strength validation
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  if (!passwordRegex.test(password)) {
    throw new Error('Password must be at least 8 characters with uppercase, lowercase, number, and special character');
  }

  return true;
}

Server-Side Validation

// Node.js with Express
const express = require("express");
const { body, validationResult } = require("express-validator");

const app = express();

app.post(
  "/register",
  [
    body("email").isEmail().normalizeEmail(),
    body("password")
      .isLength({ min: 8 })
      .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])/),
    body("username")
      .isLength({ min: 3, max: 30 })
      .matches(/^[a-zA-Z0-9_]+$/),
    body("age").isInt({ min: 13, max: 120 }),
  ],
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    // Process valid data
    res.json({ message: "Registration successful" });
  },
);

SQL Injection Prevention

// Vulnerable code (DON'T DO THIS)
const query = `SELECT * FROM users WHERE username = '${username}' AND password = '${password}'`;

// Secure code using parameterized queries
const query = "SELECT * FROM users WHERE username = ? AND password = ?";
const params = [username, hashedPassword];

// Using prepared statements
const stmt = connection.prepare(
  "SELECT * FROM users WHERE username = ? AND password = ?",
);
stmt.execute([username, hashedPassword]);

// Using ORM (Sequelize example)
const user = await User.findOne({
  where: {
    username: username,
    password: hashedPassword,
  },
});

Cross-Site Scripting (XSS) Prevention

Content Security Policy (CSP)

<!-- HTML meta tag -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"
/>

<!-- HTTP header -->
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
'unsafe-eval'; style-src 'self' 'unsafe-inline';

Output Encoding

// HTML encoding
function escapeHtml(text) {
  const map = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#039;",
  };
  return text.replace(/[&<>"']/g, (m) => map[m]);
}

// JavaScript encoding
function escapeJavaScript(text) {
  return text
    .replace(/\\/g, "\\\\")
    .replace(/'/g, "\\'")
    .replace(/"/g, '\\"')
    .replace(/\n/g, "\\n")
    .replace(/\r/g, "\\r")
    .replace(/\t/g, "\\t");
}

// URL encoding
function encodeUrl(url) {
  return encodeURIComponent(url);
}

// Usage in templates
const userInput = req.body.comment;
const safeOutput = escapeHtml(userInput);
res.send(`<div>${safeOutput}</div>`);

React XSS Prevention

// React automatically escapes content
function UserComment({ comment }) {
  return <div>{comment}</div>; // Safe - React escapes automatically
}

// For dangerouslySetInnerHTML (use with caution)
function RichContent({ htmlContent }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(htmlContent) }} />
  );
}

// HTML sanitization library
import DOMPurify from "dompurify";

function sanitizeHtml(html) {
  return DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ["b", "i", "em", "strong", "a"],
    ALLOWED_ATTR: ["href", "target"],
  });
}

Cross-Site Request Forgery (CSRF) Protection

CSRF Tokens

// Express.js CSRF protection
const csrf = require("csurf");
const csrfProtection = csrf({ cookie: true });

app.use(csrfProtection);

// Generate CSRF token
app.get("/form", (req, res) => {
  res.render("form", { csrfToken: req.csrfToken() });
});

// Validate CSRF token
app.post("/submit", csrfProtection, (req, res) => {
  // Token is automatically validated
  res.json({ message: "Form submitted successfully" });
});

<!-- HTML form with CSRF token -->
<form action="/submit" method="POST">
  <input type="hidden" name="_csrf" value="{{ csrfToken }}" />
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">Submit</button>
</form>

// AJAX request with CSRF token
fetch("/submit", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "CSRF-Token": document
      .querySelector('meta[name="csrf-token"]')
      .getAttribute("content"),
  },
  body: JSON.stringify(formData),
});

SameSite Cookies

// Set secure cookies
app.use(
  session({
    secret: "your-secret-key",
    cookie: {
      secure: true, // HTTPS only
      httpOnly: true, // Not accessible via JavaScript
      sameSite: "strict", // CSRF protection
      maxAge: 24 * 60 * 60 * 1000, // 24 hours
    },
  }),
);

Authentication and Authorization

Password Security

const bcrypt = require("bcrypt");
const crypto = require("crypto");

// Password hashing
async function hashPassword(password) {
  const saltRounds = 12;
  return await bcrypt.hash(password, saltRounds);
}

// Password verification
async function verifyPassword(password, hash) {
  return await bcrypt.compare(password, hash);
}

// Password strength validation
function validatePassword(password) {
  const minLength = 8;
  const hasUpperCase = /[A-Z]/.test(password);
  const hasLowerCase = /[a-z]/.test(password);
  const hasNumbers = /\d/.test(password);
  const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);

  return (
    password.length >= minLength &&
    hasUpperCase &&
    hasLowerCase &&
    hasNumbers &&
    hasSpecialChar
  );
}

JWT Security

const jwt = require("jsonwebtoken");

// Generate JWT
function generateToken(user) {
  return jwt.sign(
    {
      userId: user.id,
      email: user.email,
      role: user.role,
    },
    process.env.JWT_SECRET,
    {
      expiresIn: "1h",
      issuer: "your-app",
      audience: "your-app-users",
    },
  );
}

// Verify JWT
function verifyToken(token) {
  try {
    return jwt.verify(token, process.env.JWT_SECRET, {
      issuer: "your-app",
      audience: "your-app-users",
    });
  } catch (error) {
    throw new Error("Invalid token");
  }
}

// Middleware for protected routes
function authenticateToken(req, res, next) {
  const authHeader = req.headers["authorization"];
  const token = authHeader && authHeader.split(" ")[1];

  if (!token) {
    return res.status(401).json({ error: "Access token required" });
  }

  try {
    const user = verifyToken(token);
    req.user = user;
    next();
  } catch (error) {
    return res.status(403).json({ error: "Invalid token" });
  }
}

Role-Based Access Control (RBAC)

// Role-based middleware
function requireRole(roles) {
  return (req, res, next) => {
    if (!req.user) {
      return res.status(401).json({ error: "Authentication required" });
    }

    if (!roles.includes(req.user.role)) {
      return res.status(403).json({ error: "Insufficient permissions" });
    }

    next();
  };
}

// Usage
app.get("/admin", authenticateToken, requireRole(["admin"]), (req, res) => {
  res.json({ message: "Admin access granted" });
});

app.get(
  "/user",
  authenticateToken,
  requireRole(["user", "admin"]),
  (req, res) => {
    res.json({ message: "User access granted" });
  },
);

Session Management

Secure Session Configuration

const session = require("express-session");
const RedisStore = require("connect-redis")(session);

app.use(
  session({
    store: new RedisStore({
      host: "localhost",
      port: 6379,
      ttl: 86400, // 24 hours
    }),
    secret: process.env.SESSION_SECRET,
    name: "sessionId", // Don't use default 'connect.sid'
    cookie: {
      secure: true, // HTTPS only
      httpOnly: true, // Not accessible via JavaScript
      sameSite: "strict",
      maxAge: 24 * 60 * 60 * 1000, // 24 hours
    },
    resave: false,
    saveUninitialized: false,
  }),
);

Session Fixation Prevention

// Regenerate session after login
app.post("/login", async (req, res) => {
  const { username, password } = req.body;

  // Validate credentials
  const user = await validateUser(username, password);

  if (user) {
    // Regenerate session to prevent session fixation
    req.session.regenerate((err) => {
      if (err) {
        return res.status(500).json({ error: "Session error" });
      }

      // Set user data in new session
      req.session.userId = user.id;
      req.session.userRole = user.role;

      res.json({ message: "Login successful" });
    });
  } else {
    res.status(401).json({ error: "Invalid credentials" });
  }
});

HTTPS and Transport Security

SSL/TLS Configuration

const https = require("https");
const fs = require("fs");

const options = {
  key: fs.readFileSync("path/to/private-key.pem"),
  cert: fs.readFileSync("path/to/certificate.pem"),
  ca: fs.readFileSync("path/to/ca-bundle.crt"),
  ciphers: [
    "ECDHE-RSA-AES256-GCM-SHA384",
    "ECDHE-RSA-AES128-GCM-SHA256",
    "ECDHE-RSA-AES256-SHA384",
    "ECDHE-RSA-AES128-SHA256",
  ].join(":"),
  honorCipherOrder: true,
  minVersion: "TLSv1.2",
};

https.createServer(options, app).listen(443);

Security Headers

const helmet = require("helmet");

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        scriptSrc: ["'self'"],
        imgSrc: ["'self'", "data:", "https:"],
        connectSrc: ["'self'"],
        fontSrc: ["'self'"],
        objectSrc: ["'none'"],
        mediaSrc: ["'self'"],
        frameSrc: ["'none'"],
      },
    },
    hsts: {
      maxAge: 31536000,
      includeSubDomains: true,
      preload: true,
    },
  }),
);

// Additional security headers
app.use((req, res, next) => {
  res.setHeader("X-Content-Type-Options", "nosniff");
  res.setHeader("X-Frame-Options", "DENY");
  res.setHeader("X-XSS-Protection", "1; mode=block");
  res.setHeader("Referrer-Policy", "strict-origin-when-cross-origin");
  res.setHeader(
    "Permissions-Policy",
    "geolocation=(), microphone=(), camera=()",
  );
  next();
});

API Security

Rate Limiting

const rateLimit = require("express-rate-limit");

// General rate limiting
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // limit each IP to 100 requests per windowMs
  message: "Too many requests from this IP, please try again later.",
  standardHeaders: true,
  legacyHeaders: false,
});

app.use(limiter);

// Specific route rate limiting
const loginLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // limit each IP to 5 login attempts per windowMs
  message: "Too many login attempts, please try again later.",
  skipSuccessfulRequests: true,
});

app.use("/login", loginLimiter);

API Key Authentication

// API key middleware
function validateApiKey(req, res, next) {
  const apiKey = req.headers["x-api-key"];

  if (!apiKey) {
    return res.status(401).json({ error: "API key required" });
  }

  // Validate API key against database
  const isValid = validateApiKeyInDatabase(apiKey);

  if (!isValid) {
    return res.status(401).json({ error: "Invalid API key" });
  }

  next();
}

// Usage
app.use("/api", validateApiKey);

Database Security

SQL Injection Prevention

// Using parameterized queries
const mysql = require("mysql2/promise");

async function getUserById(id) {
  const connection = await mysql.createConnection(config);

  try {
    const [rows] = await connection.execute(
      "SELECT * FROM users WHERE id = ?",
      [id],
    );
    return rows[0];
  } finally {
    await connection.end();
  }
}

// Using ORM (Sequelize)
const { User } = require("./models");

async function getUserById(id) {
  return await User.findByPk(id);
}

Database Connection Security

// Secure database configuration
const dbConfig = {
  host: process.env.DB_HOST,
  port: process.env.DB_PORT,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
  ssl: {
    rejectUnauthorized: false,
  },
  connectionLimit: 10,
  acquireTimeout: 60000,
  timeout: 60000,
  reconnect: true,
};

Logging and Monitoring

Security Logging

const winston = require("winston");

// Security logger
const securityLogger = winston.createLogger({
  level: "info",
  format: winston.format.combine(
    winston.format.timestamp(),
    winston.format.json(),
  ),
  transports: [new winston.transports.File({ filename: "security.log" })],
});

// Log security events
function logSecurityEvent(event, details) {
  securityLogger.info({
    event,
    details,
    timestamp: new Date().toISOString(),
    ip: req.ip,
    userAgent: req.get("User-Agent"),
  });
}

// Usage
app.post("/login", (req, res) => {
  // ... login logic
  if (loginFailed) {
    logSecurityEvent("failed_login", { username: req.body.username });
  }
});

Intrusion Detection

// Simple intrusion detection
const failedAttempts = new Map();

function checkBruteForce(ip, action) {
  const key = `${ip}:${action}`;
  const attempts = failedAttempts.get(key) || 0;

  if (attempts > 5) {
    logSecurityEvent("brute_force_detected", { ip, action });
    return false; // Block request
  }

  failedAttempts.set(key, attempts + 1);

  // Reset after 15 minutes
  setTimeout(
    () => {
      failedAttempts.delete(key);
    },
    15 * 60 * 1000,
  );

  return true;
}

Security Testing

Automated Security Testing

// Security test suite
const security = require("helmet");
const rateLimit = require("express-rate-limit");

describe("Security Tests", () => {
  test("should have security headers", async () => {
    const response = await request(app).get("/").expect(200);

    expect(response.headers).toHaveProperty("x-content-type-options");
    expect(response.headers).toHaveProperty("x-frame-options");
    expect(response.headers).toHaveProperty("x-xss-protection");
  });

  test("should prevent XSS", async () => {
    const maliciousInput = '<script>alert("xss")</script>';

    const response = await request(app)
      .post("/comment")
      .send({ comment: maliciousInput })
      .expect(200);

    expect(response.body.comment).not.toContain("<script>");
  });

  test("should prevent SQL injection", async () => {
    const maliciousInput = "'; DROP TABLE users; --";

    const response = await request(app)
      .post("/search")
      .send({ query: maliciousInput })
      .expect(400);
  });
});

Best Practices Summary

1. Input Validation

  • Validate all inputs on both client and server
  • Use whitelist approach for allowed characters
  • Sanitize data before processing

2. Authentication

  • Use strong password policies
  • Implement multi-factor authentication
  • Use secure session management
  • Implement proper logout

3. Authorization

  • Implement role-based access control
  • Use principle of least privilege
  • Validate permissions on every request

4. Data Protection

  • Encrypt sensitive data at rest
  • Use HTTPS for all communications
  • Implement proper key management
  • Regular security audits

5. Monitoring

  • Log security events
  • Monitor for suspicious activity
  • Implement alerting for security incidents
  • Regular penetration testing

Conclusion

Web security is an ongoing process that requires constant vigilance and regular updates. The key is to implement security measures at multiple layers and to stay informed about new threats and vulnerabilities.

Remember that security is not just about preventing attacks, but also about detecting and responding to them quickly. Implement comprehensive logging, monitoring, and incident response procedures to ensure your applications remain secure.

The most important principle is to never trust user input and to always validate and sanitize data at every step of your application.