fix: sanitize svg colors and secure track-user ip rate limiting (JhaSourav07#1996)

## Description

Fixes JhaSourav07#1983 

This PR addresses two security issues:
1. **SVG XSS Mitigation**: Explicitly passes user-supplied parameters
through `sanitizeHexColor` before injecting them into the fallback error
SVG (`generateNotFoundSVG`), mitigating any potential risk of unescaped
hex color XSS.
2. **MongoDB Exhaustion/DoS Mitigation**: Hardens the IP resolution
logic in the `/api/track-user` endpoint by resolving the true client IP
using Vercel's trusted headers (`x-real-ip` and the last IP in the
`x-forwarded-for` chain). This effectively patches the IP-spoofing
rate-limit bypass.

## Pillar

- [ ] dYZ" Pillar 1 ?" New Theme Design
- [ ] dY"? Pillar 2 ?" Geometric SVG Improvement
- [ ] dY ? Pillar 3 ?" Timezone Logic Optimization
- [x] dY>,? Other (Bug fix, refactoring, docs)

## Visual Preview
N/A (Backend Security Fixes)

## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [x] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have started the repo.
- [x] I have made sure that i have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [x] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/api/streak/route.ts

@@ -16,6 +16,7 @@ import { getSecondsUntilUTCMidnight, getSecondsUntilMidnightInTimezone } from '@
 import type { BadgeParams } from '@/types';
 import { themes } from '@/lib/svg/themes';
 import { streakParamsSchema } from '@/lib/validations';
+import { sanitizeHexColor } from '@/lib/svg/sanitizer';
 
 const SVG_CSP_HEADER =
   "default-src 'none'; style-src 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; connect-src https://fonts.gstatic.com;";
@@ -299,15 +300,15 @@ function buildErrorResponse(error: unknown, parseResult: ParseResult): NextRespo
     message.toLowerCase().includes('validation') ||
     message.toLowerCase().includes('strictly for organizations');
 
-  const errBg = `#${(parseResult.success && parseResult.data.bg) || '0d1117'}`;
-  const errAccent = `#${
+  const errBg = `#${sanitizeHexColor(parseResult.success ? parseResult.data.bg : undefined, '0d1117')}`;
+  const errAccentRaw =
     (parseResult.success &&
       (Array.isArray(parseResult.data.accent)
         ? parseResult.data.accent[parseResult.data.accent.length - 1]
         : parseResult.data.accent)) ||
-    '58a6ff'
-  }`;
-  const errText = `#${(parseResult.success && parseResult.data.text) || 'c9d1d9'}`;
+    undefined;
+  const errAccent = `#${sanitizeHexColor(errAccentRaw, '58a6ff')}`;
+  const errText = `#${sanitizeHexColor(parseResult.success ? parseResult.data.text : undefined, 'c9d1d9')}`;
   const errRadius = parseResult.success
     ? (() => {
         const r = Number(parseResult.data.radius);

app/components/navbar.test.tsx

@@ -58,9 +58,17 @@ vi.mock('lucide-react', () => ({
 
 describe('Navbar mobile menu', () => {
   beforeEach(() => {
+    Object.defineProperty(window, 'localStorage', {
+      value: {
+        getItem: vi.fn(),
+        setItem: vi.fn(),
+        clear: vi.fn(),
+      },
+      writable: true,
+    });
     window.innerWidth = 500;
     mockMatchMedia(false);
-    window.localStorage.clear();
+    window.localStorage?.clear();
     document.documentElement.className = '';
   });
 
@@ -106,8 +114,16 @@ describe('Navbar mobile menu', () => {
 
 describe('Navbar responsive breakpoints', () => {
   beforeEach(() => {
+    Object.defineProperty(window, 'localStorage', {
+      value: {
+        getItem: vi.fn(),
+        setItem: vi.fn(),
+        clear: vi.fn(),
+      },
+      writable: true,
+    });
     window.innerWidth = 500;
-    window.localStorage.clear();
+    window.localStorage?.clear();
     document.documentElement.className = '';
   });
 

app/page.test.tsx

@@ -29,6 +29,10 @@ vi.mock('next/link', () => ({
   ),
 }));
 
+vi.mock('@/utils/tracking', () => ({
+  trackUser: vi.fn(),
+}));
+
 // Mock GSAP so FeatureCards don't break in JSDOM
 vi.mock('gsap', () => {
   const tween = { kill: vi.fn() };