🔐 Web Security Checklist (Frontend + Web Apps)

Use this as a practical security checklist before shipping to production.

Transport & Network
Authentication & Authorization
Cookies & Storage
Input Validation & XSS
Content Security Policy (CSP)
CSRF Protection
Dependencies & Supply Chain
Headers & Browser Security
Client-Side Safety
API Security
Build & Deployment
Frontend-Specific (React)
Monitoring & Auditing
Data Privacy & Compliance
Common Security Mistakes
Security Testing
Golden Rules
Quick Reference

🧠 Authentication & Authorization

[ ] Never store secrets in frontend
[ ] Use short-lived access tokens (15-30 min)
[ ] Use refresh tokens securely (HttpOnly cookies)
[ ] Enforce server-side authorization
[ ] Protect routes (not just UI)
[ ] Logout clears all tokens
[ ] Prevent token leakage via URLs
[ ] Implement proper session timeout
[ ] Use OAuth 2.0 / OIDC properly
[ ] Implement MFA (Multi-Factor Authentication)
[ ] Secure password reset flows
[ ] Prevent account enumeration
[ ] Implement rate limiting on auth endpoints
[ ] Use PKCE for OAuth flows
[ ] Validate JWT signatures server-side
[ ] Check token expiration
[ ] Implement proper token revocation
[ ] Avoid storing passwords in plaintext
[ ] Use strong password policies
[ ] Implement brute-force protection

🍪 Cookies & Storage

[ ] Prefer HttpOnly cookies for auth tokens
[ ] Use Secure flag on cookies
[ ] Use SameSite=Lax or Strict
[ ] Avoid storing tokens in localStorage
[ ] Clear storage on logout
[ ] Encrypt sensitive data (server-side)
[ ] Set appropriate cookie expiration
[ ] Use __Host- or __Secure- cookie prefixes
[ ] Avoid storing PII in cookies
[ ] Implement cookie consent (GDPR)
[ ] Use sessionStorage for temporary data
[ ] Clear sensitive data from memory
[ ] Don't store secrets in IndexedDB
[ ] Validate cookie domain and path
[ ] Implement cookie rotation

🧼 Input Validation & XSS

[ ] Validate inputs server-side
[ ] Sanitize user-generated content
[ ] Escape HTML output
[ ] Avoid dangerouslySetInnerHTML
[ ] Use trusted sanitizers (DOMPurify)
[ ] Encode data before rendering
[ ] Validate file uploads (type, size, content)
[ ] Use parameterized queries (prevent SQL injection)
[ ] Whitelist allowed characters
[ ] Validate data types and formats
[ ] Implement length limits
[ ] Sanitize URLs before redirects
[ ] Validate JSON schema
[ ] Escape user content in attributes
[ ] Use Content-Type validation
[ ] Prevent HTML injection
[ ] Validate email addresses properly
[ ] Sanitize SVG uploads
[ ] Use CSP to mitigate XSS

🛡️ Content Security Policy (CSP)

[ ] Define strict CSP headers
[ ] Disallow unsafe-inline
[ ] Restrict script sources
[ ] Restrict image/media domains
[ ] Enable object-src 'none'
[ ] Use nonce-based scripts
[ ] Set default-src 'none' as baseline
[ ] Use script-src 'self' when possible
[ ] Implement CSP reporting
[ ] Test CSP in report-only mode first
[ ] Restrict base-uri
[ ] Set form-action directive
[ ] Use upgrade-insecure-requests
[ ] Avoid wildcards in CSP
[ ] Use hash-based CSP for inline scripts
[ ] Implement frame-ancestors
[ ] Monitor CSP violations

🔄 CSRF Protection

[ ] Use CSRF tokens (synchronizer pattern)
[ ] SameSite cookies enabled
[ ] Protect state-changing requests
[ ] Validate origin & referer headers
[ ] Use double-submit cookie pattern
[ ] Require custom headers for AJAX
[ ] Validate CSRF tokens server-side
[ ] Regenerate tokens per session
[ ] Use anti-CSRF libraries
[ ] Protect all POST/PUT/DELETE endpoints
[ ] Don't use GET for state changes
[ ] Implement origin validation
[ ] Check Content-Type header

📦 Dependencies & Supply Chain

[ ] Keep dependencies updated
[ ] Run npm audit / yarn audit regularly
[ ] Avoid unmaintained packages
[ ] Lock dependency versions (package-lock.json)
[ ] Verify third-party scripts
[ ] Use Subresource Integrity (SRI)
[ ] Review dependency licenses
[ ] Use automated dependency updates (Dependabot)
[ ] Scan for known vulnerabilities
[ ] Minimize dependency count
[ ] Audit transitive dependencies
[ ] Use private npm registry
[ ] Implement supply chain attack detection
[ ] Verify package signatures
[ ] Use npm/yarn workspaces safely
[ ] Monitor for compromised packages
[ ] Use reputable CDNs

🧾 Headers & Browser Security

[ ] Set X-Frame-Options: DENY or use CSP frame-ancestors
[ ] Set X-Content-Type-Options: nosniff
[ ] Configure Referrer-Policy: strict-origin-when-cross-origin
[ ] Set Permissions-Policy (formerly Feature-Policy)
[ ] Disable server fingerprinting
[ ] Set X-XSS-Protection: 0 (deprecated, use CSP)
[ ] Configure Cross-Origin-Embedder-Policy (COEP)
[ ] Configure Cross-Origin-Opener-Policy (COOP)
[ ] Configure Cross-Origin-Resource-Policy (CORP)
[ ] Remove server version headers
[ ] Set Expect-CT header
[ ] Configure proper CORS headers
[ ] Avoid exposing stack traces
[ ] Set secure cache headers

🧪 Client-Side Safety

[ ] Avoid exposing internal APIs
[ ] Hide feature flags securely
[ ] Rate-limit sensitive actions
[ ] Prevent brute-force attacks
[ ] Avoid detailed error messages
[ ] Don't expose API keys in frontend
[ ] Implement client-side rate limiting
[ ] Validate user permissions client-side (UX only)
[ ] Protect against clickjacking
[ ] Prevent tabnabbing (rel="noopener noreferrer")
[ ] Validate redirects
[ ] Sanitize user-controlled URLs
[ ] Implement CAPTCHA for sensitive forms
[ ] Use secure random number generation
[ ] Avoid exposing internal IDs
[ ] Implement proper error handling

🗂️ API Security

[ ] Validate all API inputs
[ ] Enforce auth on every request
[ ] Use rate limiting (per IP, per user)
[ ] Protect against mass assignment
[ ] Implement request size limits
[ ] Use API versioning
[ ] Implement proper error handling
[ ] Use HTTPS for all API calls
[ ] Validate Content-Type headers
[ ] Implement API key rotation
[ ] Use JWT with short expiration
[ ] Implement request signing
[ ] Validate request methods
[ ] Prevent parameter pollution
[ ] Implement pagination limits
[ ] Use GraphQL query depth limiting
[ ] Implement field-level authorization
[ ] Log API security events
[ ] Implement API throttling
[ ] Use API gateways

🧑‍💻 Build & Deployment

[ ] Remove source maps from production
[ ] Strip debug logs (console.log, debugger)
[ ] Use environment variables for secrets
[ ] Protect CI/CD secrets
[ ] Enable monitoring & alerts
[ ] Implement automated security scanning
[ ] Use secure build environments
[ ] Verify build artifacts
[ ] Implement signed deployments
[ ] Use separate environments (dev/staging/prod)
[ ] Rotate deployment keys regularly
[ ] Implement rollback procedures
[ ] Use infrastructure as code
[ ] Enable security headers via CDN/server
[ ] Review deployment logs
[ ] Implement blue-green deployments
[ ] Use container scanning

📱 Frontend-Specific (React)

[ ] Never trust client-side checks
[ ] Avoid storing secrets in JavaScript
[ ] Secure redirects (validate URLs)
[ ] Prevent open redirects
[ ] Validate query params
[ ] Avoid eval-like APIs (eval, Function(), setTimeout(string))
[ ] Use React's built-in XSS protection
[ ] Validate props and state
[ ] Sanitize before using dangerouslySetInnerHTML
[ ] Use rel="noopener" on external links
[ ] Implement proper error boundaries
[ ] Avoid inline event handlers in JSX
[ ] Use strict mode
[ ] Validate dynamic component rendering
[ ] Implement proper key management
[ ] Avoid exposing sensitive data in Redux/state
[ ] Use secure routing libraries
[ ] Implement proper authentication guards

🔍 Monitoring & Auditing

[ ] Enable security logging
[ ] Track auth failures
[ ] Monitor unusual traffic patterns
[ ] Set up alerts for security events
[ ] Run security scans regularly
[ ] Implement audit trails
[ ] Monitor for data breaches
[ ] Track API usage patterns
[ ] Log all authentication events
[ ] Monitor failed login attempts
[ ] Track privilege escalation attempts
[ ] Implement real-time alerting
[ ] Use SIEM tools
[ ] Monitor third-party integrations
[ ] Track CSP violations
[ ] Implement anomaly detection
[ ] Review logs regularly
[ ] Set up incident response plan

🔒 Data Privacy & Compliance

[ ] Implement GDPR compliance (if applicable)
[ ] Add privacy policy
[ ] Implement cookie consent
[ ] Enable data export functionality
[ ] Implement right to deletion
[ ] Encrypt PII at rest
[ ] Encrypt PII in transit
[ ] Minimize data collection
[ ] Implement data retention policies
[ ] Anonymize analytics data
[ ] Secure third-party data processors
[ ] Implement CCPA compliance (if applicable)
[ ] Conduct privacy impact assessments
[ ] Implement data breach notification
[ ] Secure user data backups
[ ] Implement access controls for PII

❌ Common Security Mistakes

❌ Storing tokens in localStorage
❌ Over-permissive CORS (Access-Control-Allow-Origin: *)
❌ No Content Security Policy
❌ Blind trust in frontend validation
❌ Exposed API keys in code
❌ Hardcoded credentials
❌ Using HTTP instead of HTTPS
❌ Ignoring npm audit warnings
❌ No rate limiting
❌ Exposing internal error messages
❌ Using deprecated security headers
❌ Not validating redirects
❌ Trusting user input
❌ Weak session management
❌ Missing CSRF protection
❌ Insecure direct object references
❌ Using weak encryption
❌ Not implementing MFA
❌ Exposing stack traces in production
❌ No security headers

🧪 Security Testing

Manual Testing

[ ] Test authentication flows
[ ] Test authorization bypass
[ ] Test XSS vulnerabilities
[ ] Test CSRF protection
[ ] Test input validation
[ ] Test session management
[ ] Test file upload security
[ ] Test API endpoints
[ ] Test error handling
[ ] Test password reset flows

Automated Testing

[ ] Run SAST (Static Application Security Testing)
[ ] Run DAST (Dynamic Application Security Testing)
[ ] Use security linters (ESLint security plugins)
[ ] Implement dependency scanning
[ ] Use vulnerability scanners
[ ] Run penetration tests
[ ] Implement fuzz testing
[ ] Use OWASP ZAP or Burp Suite
[ ] Automated security in CI/CD
[ ] Container security scanning

🎯 Golden Rules

Never trust the client

Client-side code can be modified, bypassed, or reverse-engineered. Always validate and enforce security server-side.

Validate everything server-side

Client-side validation is for UX only. All inputs, authentication, and authorization must be validated on the server.

Least privilege always

Grant minimum necessary permissions. Users, APIs, and services should only have access to what they need.

Assume breach

Design systems assuming attackers may gain partial access. Implement defense in depth with multiple security layers.

Security by design

Include security from the start, not as an afterthought. Security should be part of every feature discussion.

Keep it simple

Complex security implementations are error-prone. Use established, tested security patterns and libraries.

📊 Quick Reference

🔑 Security Headers Template

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=(), camera=()
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

🍪 Secure Cookie Example

Set-Cookie: token=...; 
  HttpOnly; 
  Secure; 
  SameSite=Strict; 
  Max-Age=3600; 
  Path=/; 
  Domain=example.com

🛡️ CSP Example (Strict)

Content-Security-Policy: 
  default-src 'none';
  script-src 'self' 'nonce-{random}';
  style-src 'self' 'nonce-{random}';
  img-src 'self' https: data:;
  font-src 'self';
  connect-src 'self';
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
  upgrade-insecure-requests;
  block-all-mixed-content;

🔒 CORS Configuration (Restrictive)

Access-Control-Allow-Origin: https://trusted-domain.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400

🧪 Security Testing Commands

# Run npm audit
npm audit
npm audit fix

# Check for outdated packages
npm outdated

# Security linting
npx eslint --plugin security .

# OWASP Dependency Check
dependency-check --project myapp --scan .

# Check TLS configuration
nmap --script ssl-enum-ciphers -p 443 example.com

# Test security headers
curl -I https://example.com | grep -E "Strict-Transport|Content-Security|X-Frame"

# Check for exposed secrets
trufflehog filesystem /path/to/repo

# Scan Docker images
docker scan myimage:latest

🚨 Pre-Production Security Checklist

Run before every production deployment:

✅ All authentication flows tested
✅ Authorization checks in place
✅ Input validation on all endpoints
✅ Security headers configured
✅ CSP implemented and tested
✅ HTTPS enforced
✅ Secrets removed from code
✅ npm audit shows no critical issues
✅ Rate limiting enabled
✅ Error messages sanitized
✅ Monitoring and alerting configured
✅ Security scan passed
✅ Third-party scripts reviewed
✅ Cookies configured securely
✅ CORS properly restricted

🎓 Security Resources

OWASP Resources

Tools

Security Scanners: OWASP ZAP, Burp Suite, Nessus
Dependency Checking: Snyk, npm audit, Dependabot
Header Testing: securityheaders.com, Mozilla Observatory
SSL Testing: SSL Labs, testssl.sh
CSP Testing: CSP Evaluator, report-uri.com

Standards & Frameworks

NIST Cybersecurity Framework
ISO 27001
PCI DSS (for payment processing)
SOC 2

🔄 Security Review Cycle

Weekly:

Review dependency updates
Check security alerts
Review access logs

Monthly:

Run security scans
Update dependencies
Review security policies
Test authentication flows

Quarterly:

Penetration testing
Security training
Policy review
Incident response drill

Annually:

Comprehensive security audit
Third-party assessment
Update security documentation
Review and update disaster recovery plan

carefree-ladka/Web Security Checklist (Frontend + Web Apps).mdx