How to sanitize user input in JavaScript

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;')
}

// Usage
const userInput = '<script>alert("XSS")</script>'
const safe = escapeHtml(userInput)
console.log(safe)
// &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

// Display safely
document.getElementById('output').textContent = userInput
// or
document.getElementById('output').innerHTML = escapeHtml(userInput)

npm install dompurify

import DOMPurify from 'dompurify'

// Sanitize HTML
const dirty = '<img src=x onerror=alert("XSS")>'
const clean = DOMPurify.sanitize(dirty)
console.log(clean)
// <img src="x">

// Allow specific tags
const userHtml = '<p>Hello <script>alert("XSS")</script> <b>world</b></p>'
const sanitized = DOMPurify.sanitize(userHtml, {
  ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong']
})
console.log(sanitized)
// <p>Hello  <b>world</b></p>

// Allow specific attributes
const withLinks = '<a href="javascript:alert(1)">Click</a>'
const safe = DOMPurify.sanitize(withLinks, {
  ALLOWED_TAGS: ['a'],
  ALLOWED_ATTR: ['href']
})
console.log(safe)
// <a>Click</a> (javascript: protocol removed)

function sanitizeInput(input, type = 'text') {
  switch (type) {
    case 'email':
      // Remove non-email characters
      return input.toLowerCase().trim().replace(/[^a-z0-9@._-]/g, '')

    case 'phone':
      // Keep only digits, +, -, (, )
      return input.replace(/[^0-9+\-()]/g, '')

    case 'alphanumeric':
      // Keep only letters and numbers
      return input.replace(/[^a-zA-Z0-9]/g, '')

    case 'number':
      // Keep only digits
      return input.replace(/[^0-9]/g, '')

    case 'url':
      // Validate URL format
      try {
        const url = new URL(input)
        // Only allow http and https
        if (url.protocol === 'http:' || url.protocol === 'https:') {
          return url.toString()
        }
      } catch {
        return ''
      }
      return ''

    case 'text':
    default:
      // Remove control characters
      return input.replace(/[\x00-\x1F\x7F]/g, '')
  }
}

// Usage
console.log(sanitizeInput('[email protected]', 'email'))
// [email protected]

console.log(sanitizeInput('(555) 123-4567!!!', 'phone'))
// (555) 123-4567

console.log(sanitizeInput('User123<script>', 'alphanumeric'))
// User123

console.log(sanitizeInput('javascript:alert(1)', 'url'))
// (empty - invalid protocol)

// Bad - vulnerable to SQL injection
function getUserBad(username) {
  const query = `SELECT * FROM users WHERE username = '${username}'`
  return db.query(query)
}

// Attack: username = "admin' OR '1'='1"
// Query becomes: SELECT * FROM users WHERE username = 'admin' OR '1'='1'

// Good - use parameterized queries
function getUserGood(username) {
  const query = 'SELECT * FROM users WHERE username = ?'
  return db.query(query, [username])
}

// With prepared statements
async function getUserSecure(username) {
  const stmt = await db.prepare('SELECT * FROM users WHERE username = ?')
  return stmt.get(username)
}

// Or use ORM (e.g., TypeORM, Sequelize)
import { User } from './models'

async function getUserORM(username) {
  return User.findOne({ where: { username } })
}

const path = require('path')

function sanitizeFilename(filename) {
  // Remove path separators
  let safe = filename.replace(/[/\\]/g, '')

  // Remove null bytes
  safe = safe.replace(/\x00/g, '')

  // Remove leading/trailing dots and spaces
  safe = safe.replace(/^[.\s]+|[.\s]+$/g, '')

  // Replace multiple dots
  safe = safe.replace(/\.{2,}/g, '.')

  return safe
}

// Usage
const userFilename = '../../../etc/passwd'
const safe = sanitizeFilename(userFilename)
console.log(safe)
// etcpasswd

// Secure file path construction
function getSecureFilePath(userInput) {
  const sanitized = sanitizeFilename(userInput)
  const uploadsDir = path.resolve(__dirname, 'uploads')
  const fullPath = path.join(uploadsDir, sanitized)

  // Verify file is within uploads directory
  if (!fullPath.startsWith(uploadsDir)) {
    throw new Error('Invalid file path')
  }

  return fullPath
}

const { exec } = require('child_process')

// Bad - vulnerable to command injection
function convertImageBad(filename) {
  exec(`convert ${filename} output.jpg`, (error, stdout, stderr) => {
    console.log(stdout)
  })
}

// Attack: filename = "input.jpg; rm -rf /"

// Good - use array arguments
const { execFile } = require('child_process')

function convertImageGood(filename) {
  // Validate filename first
  const safe = sanitizeFilename(filename)

  // Use execFile with array (no shell interpretation)
  execFile('convert', [safe, 'output.jpg'], (error, stdout, stderr) => {
    if (error) {
      console.error('Conversion failed:', error)
      return
    }
    console.log(stdout)
  })
}

function sanitizeJson(input) {
  try {
    // Parse to validate JSON structure
    const parsed = JSON.parse(input)

    // Remove dangerous properties
    const dangerous = ['__proto__', 'constructor', 'prototype']

    function cleanObject(obj) {
      if (typeof obj !== 'object' || obj === null) {
        return obj
      }

      if (Array.isArray(obj)) {
        return obj.map(cleanObject)
      }

      const cleaned = {}
      for (const [key, value] of Object.entries(obj)) {
        if (!dangerous.includes(key)) {
          cleaned[key] = cleanObject(value)
        }
      }

      return cleaned
    }

    return JSON.stringify(cleanObject(parsed))
  } catch {
    throw new Error('Invalid JSON')
  }
}

// Usage
const malicious = '{"__proto__": {"admin": true}, "name": "John"}'
const safe = sanitizeJson(malicious)
console.log(safe)
// {"name":"John"}

function sanitizeRegex(input) {
  // Escape special regex characters
  return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}

// Usage
const userInput = 'search.for(this)'
const escaped = sanitizeRegex(userInput)
const regex = new RegExp(escaped)

console.log(regex.test('search.for(this)')) // true
console.log(regex.test('search for this')) // false

// Prevent ReDoS attacks
function isRegexSafe(pattern, maxLength = 100) {
  // Limit pattern length
  if (pattern.length > maxLength) {
    return false
  }

  // Detect potentially dangerous patterns
  const dangerous = [
    /(\w+\*)+/, // Repeated quantifiers
    /(\w+)+\$/, // Backtracking with end anchor
    /(a+)+b/    // Nested quantifiers
  ]

  return !dangerous.some(d => d.test(pattern))
}

// Client-side (can be bypassed - not security)
function validateEmailClient(email) {
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return pattern.test(email)
}

// Server-side (mandatory for security)
function validateEmailServer(email) {
  // Sanitize
  const sanitized = email.toLowerCase().trim()

  // Validate format
  const pattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/
  if (!pattern.test(sanitized)) {
    throw new Error('Invalid email format')
  }

  // Check length
  if (sanitized.length > 254) {
    throw new Error('Email too long')
  }

  // Additional checks (domain exists, etc.)
  return sanitized
}

// Never trust client-side validation alone
app.post('/api/users', (req, res) => {
  try {
    const email = validateEmailServer(req.body.email)
    // Proceed with validated email
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
})

// Express middleware
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'"
  )
  next()
})

// Helmet for security headers
const helmet = require('helmet')

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", 'trusted-cdn.com'],
      styleSrc: ["'self'", "'unsafe-inline'"],
      imgSrc: ["'self'", 'data:', 'https:'],
      connectSrc: ["'self'", 'api.example.com']
    }
  }
}))

class InputSanitizer {
  static sanitize(input, rules = {}) {
    let sanitized = input

    // Trim whitespace
    if (rules.trim !== false) {
      sanitized = sanitized.trim()
    }

    // Remove HTML
    if (rules.stripHtml) {
      sanitized = this.stripHtml(sanitized)
    }

    // Escape HTML
    if (rules.escapeHtml) {
      sanitized = this.escapeHtml(sanitized)
    }

    // Limit length
    if (rules.maxLength) {
      sanitized = sanitized.slice(0, rules.maxLength)
    }

    // Allow only specific characters
    if (rules.allowedChars) {
      const regex = new RegExp(`[^${rules.allowedChars}]`, 'g')
      sanitized = sanitized.replace(regex, '')
    }

    // Custom sanitizer function
    if (rules.custom) {
      sanitized = rules.custom(sanitized)
    }

    return sanitized
  }

  static stripHtml(input) {
    return input.replace(/<[^>]*>/g, '')
  }

  static escapeHtml(input) {
    const map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#x27;'
    }
    return input.replace(/[&<>"']/g, char => map[char])
  }
}

// Usage
const username = InputSanitizer.sanitize(
  '  John<script>alert(1)</script>Doe  ',
  {
    stripHtml: true,
    maxLength: 50,
    allowedChars: 'a-zA-Z0-9'
  }
)
console.log(username) // JohnDoe

const comment = InputSanitizer.sanitize(
  '<b>Hello</b> <script>alert(1)</script>',
  { escapeHtml: true }
)
console.log(comment)
// &lt;b&gt;Hello&lt;/b&gt; &lt;script&gt;alert(1)&lt;/script&gt;