[Security] Harden Application with CSP, Security Headers, Input Validation, and CSRF Protection

[KarenZita01]

Description

The frontend has no security hardening whatsoever. As a blockchain-connected application handling financial transactions, security is paramount. The current Next.js configuration is entirely default with no security headers, no CSP (Content Security Policy), no input sanitization, and no protection against common web vulnerabilities.

Security gaps:

• No Content Security Policy headers
• No HTTP security headers (X-Content-Type-Options, X-Frame-Options, HSTS)
• No input validation/sanitization on user inputs
• No XSS protection for dynamic content
• No CSRF token protection on API routes
• No wallet connection origin validation
• No dependency vulnerability scanning
• No secret scanning in CI
• No Subresource Integrity (SRI) for CDN scripts
• No permission checks on API routes
• No transaction simulation before signing (preview what user is signing)

Technical Context & Impact

• Affected Components/Files: next.config.ts, src/middleware.ts, package.json
• Impact: User funds at risk; web application vulnerable to common attacks

Step-by-Step Implementation Guide

1. Add security headers middleware: In src/middleware.ts or next.config.ts:
   • Content-Security-Policy: default-src 'self', script-src 'self', connect-src 'self' https://*.stellar.org, img-src 'self' data:, style-src 'self' 'unsafe-inline' (for Tailwind)
   • Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
   • X-Content-Type-Options: nosniff
   • X-Frame-Options: DENY
   • Referrer-Policy: strict-origin-when-cross-origin
   • Permissions-Policy: camera=(), microphone=(), geolocation=()
2. Implement input validation: All user inputs validated with Zod schemas before processing:
   • Stellar address format validation (G... with valid checksum)
   • Amount/rate range validation
   • Meter ID format validation
3. Add wallet origin validation: Verify that wallet connection requests originate from trusted extensions
4. Implement transaction simulation: Before signing, simulate transaction on Soroban test RPC and show result
5. Add CSRF protection: Generate and verify CSRF tokens on state-changing API routes
6. Set up subresource integrity: For any externally loaded scripts, include integrity hash
7. Add dependency scanning: npm audit in CI; socket.dev for supply chain security
8. Configure environment variable validation: Zod schema for all NEXT_PUBLIC_* vars at build time
9. Add secret scanning: GitHub secret scanning configuration in .github/
10. Create security documentation: SECURITY.md with vulnerability disclosure policy and known security assumptions

Verification & Testing Steps

1. Run security headers check: curl -I https://app.equipchain.io -> verify all security headers present
2. Test CSP: inject <script>alert('xss')</script> -> script blocked by CSP
3. Test CSRF: submit API request without token -> 403
4. Test input validation: enter invalid Stellar address -> form error
5. Run npm audit -> zero high/critical vulnerabilities
6. Run OWASP ZAP scan -> zero high-risk findings