fix(frontend): sanitize customize numeric url params

Author: eshaanag

app/customize/page.test.tsx

@@ -14,11 +14,22 @@ type MockContainerProps = HTMLAttributes<HTMLElement> & {
 
 type MockControlsPanelProps = {
   username: string;
-  timezone: string;
+  radius: number;
   onUsernameChange: (value: string) => void;
+};
+
+type MockAdvancedSettingsPanelProps = {
+  timezone: string;
+  badgeWidth: number | '';
+  badgeHeight: number | '';
+  grace: number;
   onTimezoneChange: (value: string) => void;
 };
 
+const mockSearchParams = vi.hoisted(() => ({
+  values: new Map<string, string>(),
+}));
+
 vi.mock('next/link', () => ({
   default: ({ href, children, ...props }: MockLinkProps) => (
     <a href={href} {...props}>
@@ -39,7 +50,7 @@ vi.mock('next/navigation', () => ({
     replace: vi.fn(),
   }),
   useSearchParams: () => ({
-    get: () => null,
+    get: (key: string) => mockSearchParams.values.get(key) ?? null,
   }),
 }));
 
@@ -48,33 +59,39 @@ vi.mock('@/components/InteractiveViewer', () => ({
 }));
 
 vi.mock('./components/ControlsPanel', () => ({
-  ControlsPanel: ({ username, onUsernameChange }: MockControlsPanelProps) => (
+  ControlsPanel: ({ username, radius, onUsernameChange }: MockControlsPanelProps) => (
     <div>
       <input
         aria-label="Mock username"
         value={username}
         onChange={(event) => onUsernameChange(event.currentTarget.value)}
       />
+      <output aria-label="Mock radius">{String(radius)}</output>
     </div>
   ),
 }));
 
 vi.mock('./components/AdvancedSettingsPanel', () => ({
   AdvancedSettingsPanel: ({
     timezone,
+    badgeWidth,
+    badgeHeight,
+    grace,
     onTimezoneChange,
-  }: {
-    timezone: string;
-    onTimezoneChange: (value: string) => void;
-  }) => (
-    <select
-      aria-label="Mock timezone"
-      value={timezone}
-      onChange={(event) => onTimezoneChange(event.currentTarget.value)}
-    >
-      <option value="UTC">UTC</option>
-      <option value="Asia/Kolkata">Asia/Kolkata</option>
-    </select>
+  }: MockAdvancedSettingsPanelProps) => (
+    <div>
+      <select
+        aria-label="Mock timezone"
+        value={timezone}
+        onChange={(event) => onTimezoneChange(event.currentTarget.value)}
+      >
+        <option value="UTC">UTC</option>
+        <option value="Asia/Kolkata">Asia/Kolkata</option>
+      </select>
+      <output aria-label="Mock badge width">{String(badgeWidth)}</output>
+      <output aria-label="Mock badge height">{String(badgeHeight)}</output>
+      <output aria-label="Mock grace">{String(grace)}</output>
+    </div>
   ),
 }));
 
@@ -86,6 +103,7 @@ vi.mock('./components/ExportPanel', () => ({
 
 describe('CustomizePage timezone query params', () => {
   beforeEach(() => {
+    mockSearchParams.values.clear();
     global.fetch = vi.fn().mockResolvedValue({
       ok: true,
       text: async () => '<svg></svg>',
@@ -126,4 +144,26 @@ describe('CustomizePage timezone query params', () => {
     expect(snippet).toContain('user=octocat');
     expect(snippet).toContain('tz=Asia%2FKolkata');
   });
+
+  it('falls back when numeric URL params are malformed', () => {
+    mockSearchParams.values.set('user', 'octocat');
+    mockSearchParams.values.set('radius', 'abc');
+    mockSearchParams.values.set('width', 'NaN');
+    mockSearchParams.values.set('height', 'nope');
+    mockSearchParams.values.set('grace', 'bad');
+
+    render(<CustomizePage />);
+
+    expect(screen.getByLabelText('Mock radius').textContent).toBe('8');
+    expect(screen.getByLabelText('Mock badge width').textContent).toBe('');
+    expect(screen.getByLabelText('Mock badge height').textContent).toBe('');
+    expect(screen.getByLabelText('Mock grace').textContent).toBe('1');
+
+    const snippet = screen.getByLabelText('Mock export snippet').textContent;
+    expect(snippet).toContain('user=octocat');
+    expect(snippet).not.toContain('radius=NaN');
+    expect(snippet).not.toContain('width=NaN');
+    expect(snippet).not.toContain('height=NaN');
+    expect(snippet).not.toContain('grace=NaN');
+  });
 });

app/customize/page.tsx

@@ -23,6 +23,27 @@ import type {
 import { useDebounce } from '@/hooks/useDebounce';
 import { getExportSnippet, buildQueryParams } from './utils';
 
+function readNumericSearchParam(
+  searchParams: URLSearchParams,
+  key: string,
+  fallback: number | '',
+  min?: number,
+  max?: number
+): number | '' {
+  const raw = searchParams.get(key);
+  if (!raw) return fallback;
+
+  const parsed = Number(raw);
+  if (!Number.isFinite(parsed) || !Number.isInteger(parsed)) {
+    return fallback;
+  }
+
+  if (min !== undefined && parsed < min) return fallback;
+  if (max !== undefined && parsed > max) return fallback;
+
+  return parsed;
+}
+
 // ─── Main Page ────────────────────────────────────────────────────────────────
 
 function CustomizePageInner(): ReactElement {
@@ -76,16 +97,16 @@ function CustomizePageInner(): ReactElement {
     setSpeed(searchParams.get('speed') ?? '8s');
     setFont((searchParams.get('font') as Font) ?? 'Inter');
     setYear(searchParams.get('year') ?? '');
-    setRadius(Number(searchParams.get('radius') ?? 8));
+    setRadius(readNumericSearchParam(searchParams, 'radius', 8, 0, 50) as number);
     setSize((searchParams.get('size') as BadgeSize) ?? 'medium');
     setHideTitle(searchParams.get('hide_title') === 'true');
     setHideBackground(searchParams.get('hide_background') === 'true');
     setHideStats(searchParams.get('hide_stats') === 'true');
     setViewMode((searchParams.get('view') as ViewMode) ?? 'default');
     setDeltaFormat((searchParams.get('delta_format') as DeltaFormat) ?? 'percent');
-    setBadgeWidth(searchParams.get('width') ? Number(searchParams.get('width')) : '');
-    setBadgeHeight(searchParams.get('height') ? Number(searchParams.get('height')) : '');
-    setGrace(Number(searchParams.get('grace') ?? 1));
+    setBadgeWidth(readNumericSearchParam(searchParams, 'width', '', 100, 1200));
+    setBadgeHeight(readNumericSearchParam(searchParams, 'height', '', 80, 800));
+    setGrace(readNumericSearchParam(searchParams, 'grace', 1, 0, 7) as number);
     setLanguage((searchParams.get('lang') as Language) ?? 'en');
     setTimezone((searchParams.get('tz') as Timezone) ?? 'UTC');
     // eslint-disable-next-line react-hooks/exhaustive-deps