JavaScript Security Best Practices

// 1. XSS Prevention - Sanitize user input
function sanitizeHTML(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

const userInput = '<script>alert("XSS")</script>';
const safe = sanitizeHTML(userInput);
// Safe to use in innerHTML

// 2. Content Security Policy (CSP)
// Add meta tag in HTML:
// <meta http-equiv="Content-Security-Policy" 
//   content="default-src 'self'; script-src 'self'">

// 3. Avoid eval() - executes arbitrary code
// BAD:
// eval(userInput);

// GOOD:
// Use JSON.parse() for JSON data
const data = JSON.parse(jsonString);

// 4. Validate and sanitize on both client and server
function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

// 5. Use HTTPS only
// Enforce with:
// <meta http-equiv="Content-Security-Policy" 
//   content="upgrade-insecure-requests">

// 6. Secure cookies
// Set flags: HttpOnly, Secure, SameSite
// document.cookie = "session=abc; Secure; HttpOnly; SameSite=Strict";

// 7. Avoid storing sensitive data in localStorage
// BAD:
// localStorage.setItem('password', userPassword);

// GOOD:
// Use httpOnly cookies for session tokens

// 8. CSRF Protection
// Include CSRF token in forms
function getCSRFToken() {
  return document.querySelector('meta[name="csrf-token"]')
    ?.content;
}

// Include in fetch requests
fetch('/api/data', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': getCSRFToken()
  }
});

// 9. Rate limiting (server-side)
// Implement on backend to prevent abuse

// 10. Input validation
function validateAge(age) {
  if (typeof age !== 'number') {
    throw new Error('Age must be a number');
  }
  if (age < 0 || age > 150) {
    throw new Error('Invalid age');
  }
  return age;
}

// 11. Avoid inline event handlers
// BAD:
// <button onclick="doSomething()">

// GOOD:
// button.addEventListener('click', doSomething);

// 12. Use secure dependencies
// Regularly update packages
// npm audit
// Use tools like Snyk

// 13. Encrypt sensitive data
async function encryptData(data, key) {
  const encoder = new TextEncoder();
  const encoded = encoder.encode(data);
  
  const cryptoKey = await crypto.subtle.importKey(
    'raw', key, 'AES-GCM', false, ['encrypt']
  );
  
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const encrypted = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv },
    cryptoKey,
    encoded
  );
  
  return { encrypted, iv };
}

// 14. Secure password handling
// Never store plain text passwords
// Use bcrypt or similar on server
// Hash passwords before sending

// 15. Regular security audits
// Use tools like OWASP ZAP
// Conduct code reviews
// Stay updated on vulnerabilities