fix(avatar): enforce client-side aspect ratio cropping and svg sanitization on profile image upload

[Pcmhacker-hero]

Description

Uploading avatars in frontend/src/routes/avatar.tsx and frontend/src/services/imageUpload.ts allows uploading raw uncropped rectangular images and raw SVG files. Rectangular images stretch and distort inside circular avatar containers across the UI. Furthermore, un-sanitized SVG uploads expose users to stored Cross-Site Scripting (XSS) via embedded <script> or <svg onload=...> payloads.

Steps to Reproduce

1. Upload a non-square 1920x1080 banner image as profile avatar; image is distorted in profile and comment headers.
2. Upload an SVG file containing <script>alert(1)</script>.
3. Avatar renders with malicious inline script execution.

Expected Behavior

• Frontend: Integrate a square 1:1 image cropper modal prior to upload in imageUpload.ts.
• Backend: Reject SVG mime types or sanitize vector XML trees with defusedxml before persisting to S3 / local storage.

Implementation Hints

Frontend (frontend/src/services/imageUpload.ts):

export function validateAndCropImage(file: File): Promise<Blob> {
  const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
  if (!allowedTypes.includes(file.type)) {
    throw new Error("Only JPG, PNG, and WebP images are allowed for avatars.");
  }
  if (file.size > 5 * 1024 * 1024) {
    throw new Error("Avatar image must not exceed 5MB.");
  }
  // Process 1:1 square crop...
}

Affected Files

• frontend/src/services/imageUpload.ts
• backend/app/core/file_validation.py
• frontend/src/routes/avatar.tsx

Labels
type:bug, level:intermediate, GSSoC-26