fix(exports): sanitize and canonicalize SVG before download (JhaSourav07#1946)

## Description

Fixes JhaSourav07#1941 

Improves SVG export safety and consistency by sanitizing and
canonicalizing SVG content before bundling or downloading through
`useShareActions`.

### Changes

* Sanitize exported SVG content to remove unsafe attributes and
elements.
* Canonicalize/normalize SVG output for consistent formatting.
* Ensure markdown exports only include sanitized SVG assets.
* Improve export reliability and security for client-side downloads.

## 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): ...`).
- [ ] 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).
- [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

components/dashboard/ShareSheet.test.tsx

@@ -354,12 +354,13 @@ describe('ShareSheet', () => {
       expect(screen.getByText('SVG Downloaded!')).toBeDefined();
     });
 
-    expect(global.fetch).toHaveBeenCalledWith(
-      `/api/streak?user=${encodeURIComponent(defaultProps.username)}`
+    const fetchedUrl = vi.mocked(global.fetch).mock.calls[0][0] as string;
+    expect(fetchedUrl).toMatch(
+      new RegExp(`/api/streak\\?user=${encodeURIComponent(defaultProps.username)}$`)
     );
 
     const blob = vi.mocked(URL.createObjectURL).mock.calls[0][0] as Blob;
-    expect(blob.type).toBe('image/svg+xml');
+    expect(blob.type).toContain('image/svg+xml');
 
     expect(HTMLAnchorElement.prototype.click).toHaveBeenCalled();
     expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-download');

hooks/useShareActions.test.ts

@@ -36,6 +36,8 @@ describe('useShareActions', () => {
     vi.clearAllMocks();
     vi.useFakeTimers();
 
+    global.fetch = vi.fn();
+
     Object.defineProperty(navigator, 'clipboard', {
       value: {
         writeText: vi.fn().mockResolvedValue(undefined),
@@ -65,6 +67,7 @@ describe('useShareActions', () => {
     vi.useRealTimers();
     vi.restoreAllMocks();
     document.body.innerHTML = '';
+    Reflect.deleteProperty(globalThis, 'fetch');
     Reflect.deleteProperty(globalThis, 'ClipboardItem');
   });
 
@@ -184,6 +187,39 @@ describe('useShareActions', () => {
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
       expect.stringContaining(`/api/streak?user=${mockUsername}`)
     );
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      expect.stringMatching(/^!\[CommitPulse\]\(https?:\/\/[^)]+\/api\/streak\?user=atharv96k\)$/)
+    );
+  });
+
+  it('handleDownloadSVG sanitizes unsafe attributes before creating the download blob', async () => {
+    const maliciousSvg =
+      '<svg><script>alert(1)</script><rect width="10" height="10" onload="evil()" /><a href="javascript:alert(1)"><text>x</text></a></svg>';
+
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      text: vi.fn().mockResolvedValue(maliciousSvg),
+    } as unknown as Response);
+
+    const { result } = renderHook(() => useShareActions(mockUsername, mockExportData, mockClose));
+
+    await act(async () => {
+      await result.current.handleDownloadSVG();
+    });
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      expect.stringMatching(/\/api\/streak\?user=atharv96k$/)
+    );
+    expect(global.URL.createObjectURL).toHaveBeenCalledTimes(1);
+
+    const blob = vi.mocked(global.URL.createObjectURL).mock.calls[0][0] as Blob;
+    const sanitizedSvg = await blob.text();
+
+    expect(sanitizedSvg).toContain('<svg');
+    expect(sanitizedSvg).not.toContain('<script');
+    expect(sanitizedSvg).not.toContain('onload=');
+    expect(sanitizedSvg).not.toContain('javascript:');
+    expect(result.current.states['svg']).toBe('success');
   });
 
   it('handleDownloadJSON bundles and formats a structured JSON data blob download', () => {

hooks/useShareActions.ts

@@ -11,6 +11,113 @@ const BASE_ORIGIN =
   'https://commitpulse.vercel.app';
 const PROFILE_URL = (username: string) => `${BASE_ORIGIN}/dashboard/${username}`;
 
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
+const UNSAFE_SVG_ELEMENTS = new Set([
+  'script',
+  'foreignobject',
+  'iframe',
+  'object',
+  'embed',
+  'audio',
+  'video',
+  'canvas',
+  'meta',
+  'base',
+]);
+
+const CONTROL_CHARS_REGEX = /[\u0000-\u001F\u007F]+/g;
+
+function normalizeLineEndings(value: string): string {
+  return value.replace(/\r\n?/g, '\n');
+}
+
+function sanitizeUsernameForUrl(username: string): string {
+  return username.trim().replace(CONTROL_CHARS_REGEX, '');
+}
+
+function sanitizeFilenameSegment(value: string): string {
+  const cleaned = value
+    .trim()
+    .replace(CONTROL_CHARS_REGEX, '')
+    .replace(/[^a-zA-Z0-9._-]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+
+  return cleaned || 'commitpulse-export';
+}
+
+function buildStreakSvgUrl(username: string): string {
+  const url = new URL('/api/streak', BASE_ORIGIN);
+  url.searchParams.set('user', sanitizeUsernameForUrl(username));
+  return url.toString();
+}
+
+function removeUnsafeSvgAttributes(element: Element) {
+  const attributes = Array.from(element.attributes);
+  for (const attr of attributes) {
+    const attrName = attr.name.toLowerCase();
+    const attrValue = attr.value.trim();
+
+    if (attrName.startsWith('on')) {
+      element.removeAttribute(attr.name);
+      continue;
+    }
+
+    if (attrName === 'href' || attrName === 'xlink:href') {
+      const normalized = attrValue.toLowerCase();
+      if (
+        normalized.startsWith('javascript:') ||
+        normalized.startsWith('vbscript:') ||
+        normalized.startsWith('data:')
+      ) {
+        element.removeAttribute(attr.name);
+      }
+    }
+  }
+}
+
+function sanitizeAndCanonicalizeSvg(svgText: string): string {
+  const normalizedText = normalizeLineEndings(svgText).trim();
+  const parser = new DOMParser();
+  const parsed = parser.parseFromString(normalizedText, 'image/svg+xml');
+  const parseError = parsed.querySelector('parsererror');
+
+  if (parseError) {
+    throw new Error('Invalid SVG payload');
+  }
+
+  const root = parsed.documentElement;
+  if (!root || root.tagName.toLowerCase() !== 'svg') {
+    throw new Error('SVG root element is required');
+  }
+
+  if (!root.getAttribute('xmlns')) {
+    root.setAttribute('xmlns', SVG_NAMESPACE);
+  }
+
+  if (!root.getAttribute('xmlns:xlink')) {
+    root.setAttribute('xmlns:xlink', XLINK_NAMESPACE);
+  }
+
+  const elements = Array.from(parsed.querySelectorAll('*'));
+  for (const element of elements) {
+    if (UNSAFE_SVG_ELEMENTS.has(element.tagName.toLowerCase())) {
+      element.remove();
+      continue;
+    }
+
+    removeUnsafeSvgAttributes(element);
+  }
+
+  removeUnsafeSvgAttributes(root);
+  return `${new XMLSerializer().serializeToString(root)}\n`;
+}
+
+function buildMarkdownExport(username: string): string {
+  return `![CommitPulse](${buildStreakSvgUrl(username)})`;
+}
+
 export function useShareActions(
   username: string,
   exportData: DashboardExportData,
@@ -189,13 +296,13 @@ export function useShareActions(
   const handleDownloadSVG = async () => {
     setOptionState('svg', 'loading');
     try {
-      const response = await fetch(`/api/streak?user=${encodeURIComponent(username)}`);
+      const response = await fetch(buildStreakSvgUrl(username));
       if (!response.ok) throw new Error('Failed to fetch SVG');
-      const svgText = await response.text();
-      const blob = new Blob([svgText], { type: 'image/svg+xml' });
+      const svgText = sanitizeAndCanonicalizeSvg(await response.text());
+      const blob = new Blob([svgText], { type: 'image/svg+xml;charset=utf-8' });
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
-      link.download = `${username}-commitpulse.svg`;
+      link.download = `${sanitizeFilenameSegment(username)}-commitpulse.svg`;
       link.href = url;
       link.click();
       URL.revokeObjectURL(url);
@@ -208,7 +315,7 @@ export function useShareActions(
   const handleCopyMarkdown = async () => {
     setOptionState('markdown', 'loading');
     try {
-      const markdown = `![CommitPulse](${window.location.origin}/api/streak?user=${encodeURIComponent(username)})`;
+      const markdown = buildMarkdownExport(username);
       await navigator.clipboard.writeText(markdown);
       setOptionState('markdown', 'success');
       setTimeout(() => onClose(), 800);