plan.md (4039B)
1 # WhatsApp Logger: Media Upgrade & Security Enhancement Plan 2 3 This plan outlines the architecture and implementation steps to upgrade the WhatsApp Logger. The primary objective is to introduce media support (images, videos, voice messages) by offloading large blobs to a Hugging Face dataset while retaining Firebase for lightweight text and metadata storage, alongside targeted security improvements. 4 5 ## Phase 1: Architecture & Infrastructure 6 7 To bypass Firebase's 1GB free-tier limitation, media storage will utilize a distributed approach: 8 9 1. **Media Interception:** The Baileys instance in `index.js` will be updated to detect `imageMessage`, `videoMessage`, and `audioMessage` types. 10 2. **Blob Extraction:** Use Baileys' `downloadMediaMessage` to extract the binary buffers of incoming media. 11 3. **Hugging Face Storage:** Push the extracted buffers directly to a designated Hugging Face dataset repository using the HF Hub API. 12 4. **Asset Delivery:** Route the media delivery through a custom Cloudflare Pages and Workers setup to act as a CDN. This allows dynamic serving of the raw media files stored in the Hugging Face dataset directly to the frontend without exposing HF API tokens. 13 5. **Database Linking:** Save the generated Cloudflare CDN URL, along with the `mimeType` and message metadata, into the existing Firebase Firestore `Messages` collection. 14 15 ## Phase 2: Backend Implementation (`index.js`) 16 17 1. **Dependency Updates:** Add required packages for API requests (e.g., `axios` or standard `fetch`) to handle Hugging Face Hub uploads. 18 2. **Message Parsing Logic:** 19 * Expand the `messages.upsert` event listener. 20 * Implement conditional checks for media attachments. 21 * Create an async upload utility function to push the buffer to Hugging Face and construct the corresponding Cloudflare CDN endpoint URL. 22 3. **Firestore Schema Update:** 23 * Modify the `set` operation in Firestore to include `mediaUrl`, `mediaType`, and `caption` (falling back to the standard `text` field for captions). 24 25 ## Phase 3: Frontend & UI/UX Updates (`index.html`) 26 27 1. **Message Rendering:** 28 * Update the `renderMsgs` function to check for the `mediaUrl` property. 29 * Implement conditional HTML generation to inject `<img loading="lazy">`, `<video controls>`, or `<audio controls>` elements within the `.msg-text` container. 30 2. **Material Design 3 Polish:** Ensure media containers utilize strict M3 specifications, maintaining consistent border radii (`border-radius: 12px` inside bubbles), proper padding, and surface container alignments to match the existing brutally clean aesthetic. 31 3. **Offline Caching (`sw.js` & IndexedDB):** 32 * Update the IndexedDB schema if necessary to store media URLs. 33 * *Note:* Raw media files should rely on standard browser caching via the Cloudflare CDN headers rather than bloating the local IndexedDB or Service Worker cache. 34 35 ## Phase 4: Security Enhancements 36 37 1. **Firebase Rules:** Review the existing Firestore security rules to ensure that the addition of media metadata does not open any injection vulnerabilities. The current read-only/update-only structure is solid, but validate that backend service accounts are securely handling the new data shape. 38 2. **Frontend Protection:** 39 * Ensure the HTML sanitizer (`escapeHTML`) correctly handles incoming media URLs to prevent XSS. 40 * Implement Content Security Policy (CSP) headers in the frontend deployment to whitelist the specific Cloudflare custom subdomains used for media delivery. 41 42 ## Phase 5: Testing & Deployment 43 44 1. **Local Testing:** Run the Docker container locally to verify Baileys correctly downloads and buffers media without crashing on large video files. 45 2. **CDN Verification:** Ensure the Cloudflare Worker script successfully proxies the Hugging Face dataset URLs with appropriate CORS headers to allow the frontend to render them. 46 3. **Render Deployment:** Push changes to the GitHub repository and monitor the Render build logs for the updated backend.