feat: add client-side rate limiting to contact form

- Added `useRateLimit` hook
- Integrated hook into `Contact.tsx`
- Added translations for rate limit error
- Added unit tests
- Fixed type error in `Button.tsx` to allow build to pass
This commit is contained in:
google-labs-jules[bot]
2026-01-26 01:49:05 +00:00
parent 13df58342a
commit 839e1bf82f
11 changed files with 190 additions and 2 deletions

View File

@@ -2,3 +2,8 @@
**Vulnerability:** The application is served without standard security headers (CSP, X-Frame-Options, etc.), leaving it vulnerable to XSS, Clickjacking, and MIME sniffing.
**Learning:** Single Page Applications (SPAs) served via static hosting (like Firebase) rely on infrastructure configuration for security headers, which are often overlooked. Default configurations are rarely secure enough.
**Prevention:** Always configure `firebase.json` (or equivalent) with strict security headers (CSP, X-Frame-Options, HSTS, etc.) at project setup.
## 2026-01-26 - Client-Side Rate Limiting for Serverless Forms
**Vulnerability:** Contact forms using client-side services (like EmailJS) without backend middleware are vulnerable to spam and quota exhaustion.
**Learning:** While true rate limiting requires a backend, client-side throttling via `localStorage` provides a necessary friction layer for legitimate users and simple bots, protecting external service quotas.
**Prevention:** Implement reusable rate-limit hooks for all public-facing form submissions in static/serverless applications.