Web Security Guide 2026: Protect Your Applications

// ❌ Vulnerable Code
<div innerHTML={userInput}></div>

// ✅ Safe Code
import DOMPurify from 'dompurify'
<div innerHTML={DOMPurify.sanitize(userInput)}></div>

// React automatically escapes
<div>{userInput}</div>

// Prevention:
• Escape user input
• Use Content Security Policy (CSP)
• Sanitize HTML
• Validate input

// ❌ Vulnerable
const query = `SELECT * FROM users WHERE id = ${userId}`

// ✅ Safe - Parameterized Query
const query = 'SELECT * FROM users WHERE id = ?'
db.query(query, [userId])

// ✅ Safe - ORM
const user = await User.findByPk(userId)

// Prevention:
• Use parameterized queries
• Use ORMs (Sequelize, Prisma)
• Validate input
• Least privilege database access

// ✅ CSRF Token
// Backend
app.use(csrf())
app.get('/form', (req, res) => {
  res.render('form', { csrfToken: req.csrfToken() })
})

// Frontend
<form method="POST">
  <input type="hidden" name="_csrf" value={csrfToken} />
  <button type="submit">Submit</button>
</form>

// Prevention:
• CSRF tokens
• SameSite cookies
• Verify Origin/Referer headers
• Double submit cookies

// ✅ Hash Passwords with bcrypt
const bcrypt = require('bcrypt')

// Register
const hashedPassword = await bcrypt.hash(password, 10)
await User.create({ email, password: hashedPassword })

// Login
const user = await User.findOne({ where: { email } })
const isValid = await bcrypt.compare(password, user.password)

// Best Practices:
• Never store plain text passwords
• Use bcrypt, argon2, or scrypt
• Salt rounds: 10-12
• Enforce strong password policy
• Implement rate limiting
• Use 2FA/MFA

const jwt = require('jsonwebtoken')

// ✅ Generate Token
const token = jwt.sign(
  { userId: user.id, role: user.role },
  process.env.JWT_SECRET,
  { expiresIn: '1h' }
)

// ✅ Verify Token
const decoded = jwt.verify(token, process.env.JWT_SECRET)

// Best Practices:
• Use strong secret (256-bit)
• Short expiration time
• Refresh tokens for long sessions
• Store in httpOnly cookies
• Validate on every request
• Implement token blacklist for logout

// Free SSL Certificates
• Let's Encrypt (certbot)
• Cloudflare
• AWS Certificate Manager
• Vercel/Netlify (automatic)

// Security Headers
app.use((req, res, next) => {
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains')
  res.setHeader('X-Content-Type-Options', 'nosniff')
  res.setHeader('X-Frame-Options', 'DENY')
  res.setHeader('X-XSS-Protection', '1; mode=block')
  next()
})

// CSP Header
Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'unsafe-inline' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';

// Next.js Example
// next.config.js
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline';"
  }
]

module.exports = {
  async headers() {
    return [{ source: '/:path*', headers: securityHeaders }]
  }
}

// ✅ Validate with Zod
import { z } from 'zod'

const userSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8).max(100),
  age: z.number().min(18).max(120)
})

try {
  const validData = userSchema.parse(req.body)
} catch (error) {
  return res.status(400).json({ error: error.errors })
}

// ✅ Sanitize Input
import validator from 'validator'

const email = validator.normalizeEmail(req.body.email)
const name = validator.escape(req.body.name)

// Rules:
• Validate on client AND server
• Whitelist, don't blacklist
• Sanitize before storage
• Validate data types
• Check length limits

// Express Rate Limit
const rateLimit = require('express-rate-limit')

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // Limit each IP to 100 requests per windowMs
  message: 'Too many requests, please try again later.'
})

app.use('/api/', limiter)

// Login Rate Limit (stricter)
const loginLimiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 5,
  skipSuccessfulRequests: true
})

app.post('/api/login', loginLimiter, loginHandler)

// Benefits:
• Prevent brute force attacks
• Prevent DDoS
• Reduce server load
• Fair resource usage