Introduction to Web Security

What is Web Security?

Web security encompasses all measures taken to protect websites, web applications, and web services from cyber threats. As a developer, understanding security isn't optional—it's essential for protecting your users and your organization.

Why Web Security Matters

• User Trust - Users expect their data to be protected
• Legal Compliance - GDPR, HIPAA, PCI-DSS require security measures
• Financial Impact - Data breaches cost millions in damages
• Reputation - Security incidents can destroy brand trust
• Business Continuity - Attacks can take down services

The OWASP Top 10

The Open Web Application Security Project (OWASP) maintains a list of the most critical web application security risks:

1. Broken Access Control - Users accessing unauthorized resources
2. Cryptographic Failures - Weak encryption or exposed sensitive data
3. Injection - SQL, NoSQL, OS command injection attacks
4. Insecure Design - Flaws in application architecture
5. Security Misconfiguration - Default or incomplete configurations
6. Vulnerable Components - Using outdated dependencies
7. Authentication Failures - Broken identity verification
8. Software Integrity Failures - Unverified updates or CI/CD issues
9. Logging Failures - Insufficient monitoring and logging
10. Server-Side Request Forgery - SSRF attacks

Security Mindset

Adopt a security-first approach in your development:

// BAD: Trust user input
const userId = req.query.userId;
const user = await db.query(`SELECT * FROM users WHERE id = ${userId}`);

// GOOD: Never trust user input
const userId = parseInt(req.query.userId, 10);
if (isNaN(userId)) {
  return res.status(400).json({ error: 'Invalid user ID' });
}
const user = await db.query('SELECT * FROM users WHERE id = $1', [userId]);

Defense in Depth

Layer multiple security controls so if one fails, others remain:

Layer 1: Network Security (Firewalls, DDoS protection)
Layer 2: Transport Security (HTTPS, TLS)
Layer 3: Application Security (Input validation, output encoding)
Layer 4: Data Security (Encryption at rest, access controls)
Layer 5: Monitoring (Logging, alerting, incident response)

Security Headers

Essential HTTP headers every application should set:

// Express.js security headers
const helmet = require('helmet');
app.use(helmet());

// Or manually:
app.use((req, res, next) => {
  // Prevent clickjacking
  res.setHeader('X-Frame-Options', 'DENY');

  // Prevent MIME type sniffing
  res.setHeader('X-Content-Type-Options', 'nosniff');

  // Enable XSS filter
  res.setHeader('X-XSS-Protection', '1; mode=block');

  // Control referrer information
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');

  // Content Security Policy
  res.setHeader('Content-Security-Policy', "default-src 'self'");

  next();
});

Next.js Security Headers

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
          { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
        ],
      },
    ];
  },
};

Security Principles

• Least Privilege - Give minimum permissions necessary
• Fail Securely - Errors should default to secure state
• Don't Trust Input - Validate and sanitize everything
• Defense in Depth - Multiple layers of security
• Keep It Simple - Complex systems have more vulnerabilities
• Security by Design - Build security in from the start