fix(security): sanitize SVG content with DOMPurify (JhaSourav07#1872)

## Description

Fixes JhaSourav07#1847 

This PR fixes a potential XSS risk by sanitizing SVG/HTML content before
rendering it with `dangerouslySetInnerHTML`.

## Pillar

* [ ] 🎨 Pillar 1 — New Theme Design
* [ ] 📐 Pillar 2 — Geometric SVG Improvement
* [ ] 🕐 Pillar 3 — Timezone Logic Optimization
* [x] 🛠️ Other (Bug fix, refactoring, docs)

## 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.

## Validation

* `npm run typecheck` ✅
* `npm run lint` ✅
* `npm run test` ✅

Author: JhaSourav07

app/page.test.tsx

@@ -333,4 +333,32 @@ describe('LandingPage', () => {
 
     expect(screen.queryByText(/Too Many Requests/)).toBeNull();
   });
+
+  it('sanitizes unsafe SVG content before rendering', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue({
+        ok: true,
+        status: 200,
+        text: () =>
+          Promise.resolve(
+            '<svg data-testid="badge-svg"><script>alert("xss")</script><circle /></svg>'
+          ),
+      })
+    );
+
+    render(<LandingPage />);
+
+    const input = screen.getByPlaceholderText('Enter GitHub Username') as HTMLInputElement;
+
+    await act(async () => {
+      fireEvent.change(input, { target: { value: 'octocat' } });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('badge-svg')).toBeDefined();
+    });
+
+    expect(document.querySelector('script')).toBeNull();
+  });
 });

app/page.tsx

@@ -12,6 +12,7 @@ import { useRecentSearches } from '@/hooks/useRecentSearches';
 import { useDebounce } from '@/hooks/useDebounce';
 import { Footer } from '@/app/components/Footer';
 import InteractiveViewer from '@/components/InteractiveViewer';
+import DOMPurify from 'dompurify';
 
 const Icons = {
   Github: () => (
@@ -393,7 +394,11 @@ export default function LandingPage() {
                       animate={{ opacity: 1, scale: 1 }}
                       transition={{ duration: 0.5, ease: 'easeOut' }}
                       className="cp-svg-container w-full max-w-[700px] drop-shadow-[0_30px_60px_rgba(0,0,0,0.15)] dark:drop-shadow-[0_30px_60px_rgba(0,0,0,0.5)] [&>svg]:w-full [&>svg]:h-auto"
-                      dangerouslySetInnerHTML={{ __html: svgContent }}
+                      dangerouslySetInnerHTML={{
+                        __html: DOMPurify.sanitize(svgContent, {
+                          USE_PROFILES: { svg: true, html: true },
+                        }),
+                      }}
                     />
                   )}
                   {svgState === 'loaded' && !svgContent && errorMessage && (

package-lock.json

@@ -27,6 +27,7 @@
     "@resvg/resvg-js": "^2.6.2",
     "@tailwindcss/postcss": "^4.2.2",
     "@vercel/analytics": "^1.6.1",
+    "dompurify": "^3.4.7",
     "framer-motion": "^12.38.0",
     "html-to-image": "^1.11.13",
     "lucide-react": "^1.8.0",
@@ -45,6 +46,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",