Block image trackers

Author: exAspArk

backend/src/trpc-router.ts

@@ -8,6 +8,7 @@ import { BOARD_INVITE_ROUTES } from '@/trpc-routes/board-invite.routes';
 import { BOARD_MEMBER_ROUTES } from '@/trpc-routes/board-member.routes';
 import { COMMENT_ROUTES } from '@/trpc-routes/comment.routes';
 import { EMAIL_DRAFT_ROUTES } from '@/trpc-routes/email-draft.routes';
+import { REPORT_ROUTES } from '@/trpc-routes/report.routes';
 import { SENDER_EMAIL_ADDRESS_ROUTES } from '@/trpc-routes/sender-email-address.routes';
 import { USER_ROUTES } from '@/trpc-routes/user.routes';
 
@@ -22,6 +23,7 @@ const TRPC_ROUTES = {
   ...COMMENT_ROUTES,
   ...SENDER_EMAIL_ADDRESS_ROUTES,
   ...EMAIL_DRAFT_ROUTES,
+  ...REPORT_ROUTES,
 };
 
 export const trpcRouter = createTRPCRouter(TRPC_ROUTES);

backend/src/trpc-routes/report.routes.ts

@@ -0,0 +1,13 @@
+import type { TRPCRouterRecord } from '@trpc/server';
+import { z } from 'zod';
+import { publicProcedure } from '@/trpc-config';
+import { Logger } from '@/utils/logger';
+
+export const REPORT_ROUTES = {
+  report: {
+    suspiciousTracker: publicProcedure.input(z.object({ urls: z.array(z.url()) })).mutation(async ({ input }) => {
+      if (input.urls.length === 0) return;
+      Logger.info(`[Report] Suspicious trackers: ${input.urls.join(', ')}`);
+    }),
+  } satisfies TRPCRouterRecord,
+};

frontend/src/components/board-card/email-draft-card.tsx

@@ -213,11 +213,11 @@ export const EmailDraftCard = ({
   const displayQuotedHtml = useMemo(
     () =>
       sanitizedDisplayHtml({
-        bodyHtml: quotedHtml,
+        html: quotedHtml,
         gmailAttachments: lastEmailMessage?.gmailAttachments || [],
         boardId,
         boardCardId,
-      }),
+      }).displayHtml,
     [quotedHtml, lastEmailMessage?.gmailAttachments, boardId, boardCardId],
   );
 

frontend/src/components/board-card/email-message-card.tsx

@@ -1,12 +1,15 @@
-import { ChevronDownIcon, Paperclip, Reply } from 'lucide-react';
+import { useMutation } from '@tanstack/react-query';
+import { ChevronDownIcon, Paperclip, Reply, ShieldAlert } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { ToggleQuotesButton } from '@/components/board-card/toggle-quotes-button';
 import { Attachment } from '@/components/editor/attachment';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { useEmailIframe } from '@/hooks/use-email-iframe';
+import { useRouteContext } from '@/hooks/use-route-context';
 import type { BoardMember } from '@/query-helpers/board';
 import type { EmailMessage } from '@/query-helpers/board-card';
 import { sanitizedDisplayHtml } from '@/utils/email';
@@ -18,10 +21,12 @@ const EmailMessageBody = ({
   emailMessage,
   boardId,
   boardCardId,
+  setBlockedTrackers,
 }: {
   emailMessage: EmailMessage;
   boardId: string;
   boardCardId: string;
+  setBlockedTrackers: (blockedTrackers: string[]) => void;
 }) => {
   const [displayMainHtml, setDisplayMainHtml] = useState('');
   const [blockquotesExpanded, setBlockquotesExpanded] = useState(false);
@@ -31,26 +36,38 @@ const EmailMessageBody = ({
 
   const { mainHtml, mainText, quotedHtml, quotedText, styles } = emailMessage;
 
+  const { trpc } = useRouteContext();
+  const reportSuspiciousTrackerMutation = useMutation(trpc.report.suspiciousTracker.mutationOptions());
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: ignore mutation to avoid re-running
   useEffect(() => {
     if (mainHtml || quotedHtml) {
-      const displayMain = sanitizedDisplayHtml({
-        bodyHtml: mainHtml || '',
+      const mainResult = sanitizedDisplayHtml({
+        html: mainHtml || '',
         gmailAttachments: emailMessage.gmailAttachments,
         boardId,
         boardCardId,
       });
 
-      const displayQuoted = sanitizedDisplayHtml({
-        bodyHtml: quotedHtml || '',
+      const quotedResult = sanitizedDisplayHtml({
+        html: quotedHtml || '',
         gmailAttachments: emailMessage.gmailAttachments,
         boardId,
         boardCardId,
       });
 
-      setDisplayMainHtml(displayMain);
-      setDisplayQuotedHtml(displayQuoted);
+      const allBlockedTrackers = [...mainResult.blockedTrackers, ...quotedResult.blockedTrackers];
+      const allSuspiciousTrackers = [...mainResult.suspiciousTrackers, ...quotedResult.suspiciousTrackers];
+
+      setDisplayMainHtml(mainResult.displayHtml);
+      setDisplayQuotedHtml(quotedResult.displayHtml);
+      setBlockedTrackers(allBlockedTrackers);
+
+      if (allSuspiciousTrackers.length > 0 && !reportSuspiciousTrackerMutation.isPending) {
+        reportSuspiciousTrackerMutation.mutate({ urls: allSuspiciousTrackers });
+      }
     }
-  }, [mainHtml, quotedHtml, emailMessage.gmailAttachments, boardId, boardCardId]);
+  }, [mainHtml, quotedHtml, emailMessage.gmailAttachments, boardId, boardCardId, setBlockedTrackers]);
 
   useEmailIframe(bodyIframeRef, { html: displayMainHtml, styles: styles ?? '' });
   useEmailIframe(backquotesIframeRef, { html: displayQuotedHtml, styles: styles ?? '', enabled: blockquotesExpanded });
@@ -117,7 +134,7 @@ export const EmailMessageCard = ({
   boardMembers: BoardMember[];
   onReply?: () => void;
 }) => {
-  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [blockedTrackers, setBlockedTrackers] = useState<string[]>([]);
 
   const participants = [
     emailMessage.from,
@@ -180,13 +197,39 @@ export const EmailMessageCard = ({
                 <div className="text-xs text-muted-foreground">{`<${firstParticipant.email}>`}</div>
               </div>
             )}
-            <div className="text-xs text-muted-foreground flex-shrink-0">
+            <div className="text-xs text-muted-foreground flex-shrink-0 flex gap-2">
+              {blockedTrackers.length > 0 && (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button type="button" className="focus:outline-none">
+                      <Badge
+                        variant="outline"
+                        size="sm"
+                        className="gap-1 cursor-pointer hover:bg-accent text-muted-foreground"
+                      >
+                        <ShieldAlert className="size-3" />
+                        {blockedTrackers.length} blocked
+                      </Badge>
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent align="end" className="w-64">
+                    <div className="flex flex-col gap-2">
+                      <div className="font-medium text-muted-foreground text-xs">Blocked trackers</div>
+                      <ul className="list-disc list-inside text-xs">
+                        {blockedTrackers.map((tracker) => (
+                          <li key={tracker}>{tracker}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              )}
               {formattedShortTime(new Date(emailMessage.externalCreatedAt))}
             </div>
           </div>
           <div className="flex items-center gap-1 min-w-0">
             <div className="text-xs text-muted-foreground truncate">{shortAddresses || 'To'}</div>
-            <Popover open={detailsOpen} onOpenChange={setDetailsOpen}>
+            <Popover>
               <PopoverTrigger asChild>
                 <Button variant="ghost" size="icon" className="size-4.5 flex-shrink-0 rounded-full">
                   <ChevronDownIcon className="size-4 text-muted-foreground pt-[2px]" />
@@ -244,7 +287,12 @@ export const EmailMessageCard = ({
           </div>
         </div>
       </div>
-      <EmailMessageBody emailMessage={emailMessage} boardId={boardId} boardCardId={boardCardId} />
+      <EmailMessageBody
+        emailMessage={emailMessage}
+        boardId={boardId}
+        boardCardId={boardCardId}
+        setBlockedTrackers={setBlockedTrackers}
+      />
       {emailMessage.gmailAttachments.length > 0 && (
         <div className="flex flex-col gap-2 mt-4 pt-4 border-t">
           <div className="flex items-center gap-1.5">

frontend/src/routes/auth.tsx

@@ -1,22 +1,9 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { ENV } from '@/utils/env';
 import { API_ENDPOINTS } from '@/utils/urls';
 
 // See frontend/vite.config.ts
 const DEFAULT_HEADERS = {
-  'Content-Security-Policy': [
-    "default-src 'none'",
-    "img-src 'self' https: data:",
-    "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
-    "font-src 'self' https://fonts.gstatic.com",
-    `connect-src 'self' ${ENV.SSR_API_ENDPOINT}`,
-    "script-src 'self' 'unsafe-inline'",
-    "frame-src 'self'",
-    "frame-ancestors 'self'",
-    "manifest-src 'self'",
-    "base-uri 'self'",
-    "form-action 'self'",
-  ].join('; '),
+  'Content-Security-Policy': ["default-src 'none'"].join('; '),
   'X-Frame-Options': 'SAMEORIGIN',
   'Cache-Control': 'no-cache, no-store, must-revalidate, private',
   Pragma: 'no-cache',

frontend/src/utils/email.test.ts

@@ -23,17 +23,17 @@ describe('sanitizedDisplayHtml', () => {
       },
     ];
 
-    const result = sanitizedDisplayHtml({
-      bodyHtml,
+    const { displayHtml } = sanitizedDisplayHtml({
+      html: bodyHtml,
       gmailAttachments,
       boardId: 'board1',
       boardCardId: 'card1',
     });
 
-    expect(result).toContain('gmailAttachmentId=att123');
-    expect(result).toContain('boardId=board1');
-    expect(result).toContain('boardCardId=card1');
-    expect(result).not.toContain('cid:image.png');
+    expect(displayHtml).toContain('gmailAttachmentId=att123');
+    expect(displayHtml).toContain('boardId=board1');
+    expect(displayHtml).toContain('boardCardId=card1');
+    expect(displayHtml).not.toContain('cid:image.png');
   });
 
   it('replaces cid: references with proxy URLs for inline images by contentId', () => {
@@ -47,15 +47,15 @@ describe('sanitizedDisplayHtml', () => {
       },
     ];
 
-    const result = sanitizedDisplayHtml({
-      bodyHtml,
+    const { displayHtml } = sanitizedDisplayHtml({
+      html: bodyHtml,
       gmailAttachments,
       boardId: 'board2',
       boardCardId: 'card2',
     });
 
-    expect(result).toContain('gmailAttachmentId=att456');
-    expect(result).not.toContain('cid:abc123');
+    expect(displayHtml).toContain('gmailAttachmentId=att456');
+    expect(displayHtml).not.toContain('cid:abc123');
   });
 
   it('handles multiple images with different cid references', () => {
@@ -81,17 +81,17 @@ describe('sanitizedDisplayHtml', () => {
       },
     ];
 
-    const result = sanitizedDisplayHtml({
-      bodyHtml,
+    const { displayHtml } = sanitizedDisplayHtml({
+      html: bodyHtml,
       gmailAttachments,
       boardId: 'board3',
       boardCardId: 'card3',
     });
 
-    expect(result).toContain('gmailAttachmentId=att1');
-    expect(result).toContain('gmailAttachmentId=att2');
-    expect(result).not.toContain('cid:image1.png');
-    expect(result).not.toContain('cid:content-id-2');
+    expect(displayHtml).toContain('gmailAttachmentId=att1');
+    expect(displayHtml).toContain('gmailAttachmentId=att2');
+    expect(displayHtml).not.toContain('cid:image1.png');
+    expect(displayHtml).not.toContain('cid:content-id-2');
   });
 
   it('does not replace non-image attachments', () => {
@@ -105,16 +105,16 @@ describe('sanitizedDisplayHtml', () => {
       },
     ];
 
-    const result = sanitizedDisplayHtml({
-      bodyHtml,
+    const { displayHtml } = sanitizedDisplayHtml({
+      html: bodyHtml,
       gmailAttachments,
       boardId: 'board4',
       boardCardId: 'card4',
     });
 
     // Should not replace since it's not an image
-    expect(result).toContain('cid:document.pdf');
-    expect(result).not.toContain('gmailAttachmentId=att789');
+    expect(displayHtml).toContain('cid:document.pdf');
+    expect(displayHtml).not.toContain('gmailAttachmentId=att789');
   });
 
   it('handles HTML without any images', () => {
@@ -128,28 +128,28 @@ describe('sanitizedDisplayHtml', () => {
       },
     ];
 
-    const result = sanitizedDisplayHtml({
-      bodyHtml,
+    const { displayHtml } = sanitizedDisplayHtml({
+      html: bodyHtml,
       gmailAttachments,
       boardId: 'board5',
       boardCardId: 'card5',
     });
 
-    expect(result).toBe('<div><p>Just text content</p></div>');
+    expect(displayHtml).toBe('<div><p>Just text content</p></div>');
   });
 
   it('preserves non-cid image sources', () => {
     const bodyHtml = '<div><img src="https://example.com/image.png" /><p>Content</p></div>';
     const gmailAttachments: Attachment[] = [];
 
-    const result = sanitizedDisplayHtml({
-      bodyHtml,
+    const { displayHtml } = sanitizedDisplayHtml({
+      html: bodyHtml,
       gmailAttachments,
       boardId: 'board6',
       boardCardId: 'card6',
     });
 
-    expect(result).toContain('https://example.com/image.png');
+    expect(displayHtml).toContain('https://example.com/image.png');
   });
 
   it('sanitizes HTML before processing', () => {
@@ -163,49 +163,49 @@ describe('sanitizedDisplayHtml', () => {
       },
     ];
 
-    const result = sanitizedDisplayHtml({
-      bodyHtml,
+    const { displayHtml } = sanitizedDisplayHtml({
+      html: bodyHtml,
       gmailAttachments,
       boardId: 'board7',
       boardCardId: 'card7',
     });
 
-    expect(result).not.toContain('<script>');
-    expect(result).not.toContain('alert');
-    expect(result).toContain('gmailAttachmentId=att1');
+    expect(displayHtml).not.toContain('<script>');
+    expect(displayHtml).not.toContain('alert');
+    expect(displayHtml).toContain('gmailAttachmentId=att1');
   });
 
   it('removes dangerous event handlers via DOMPurify', () => {
     const bodyHtml = '<div onclick="evilCode()"><p onmouseover="steal()">Hover me</p></div>';
     const gmailAttachments: Attachment[] = [];
 
-    const result = sanitizedDisplayHtml({
-      bodyHtml,
+    const { displayHtml } = sanitizedDisplayHtml({
+      html: bodyHtml,
       gmailAttachments,
       boardId: 'board8',
       boardCardId: 'card8',
     });
 
-    expect(result).not.toContain('onclick');
-    expect(result).not.toContain('onmouseover');
-    expect(result).not.toContain('evilCode');
-    expect(result).not.toContain('steal');
-    expect(result).toContain('Hover me');
+    expect(displayHtml).not.toContain('onclick');
+    expect(displayHtml).not.toContain('onmouseover');
+    expect(displayHtml).not.toContain('evilCode');
+    expect(displayHtml).not.toContain('steal');
+    expect(displayHtml).toContain('Hover me');
   });
 
   it('preserves allowed style attributes via DOMPurify', () => {
     const bodyHtml = '<div style="font-weight: bold; color: blue;"><p style="margin: 10px;">Styled content</p></div>';
     const gmailAttachments: Attachment[] = [];
 
-    const result = sanitizedDisplayHtml({
-      bodyHtml,
+    const { displayHtml } = sanitizedDisplayHtml({
+      html: bodyHtml,
       gmailAttachments,
       boardId: 'board9',
       boardCardId: 'card9',
     });
 
-    expect(result).toContain('style="font-weight: bold; color: blue;"');
-    expect(result).toContain('style="margin: 10px;"');
-    expect(result).toContain('Styled content');
+    expect(displayHtml).toContain('style="font-weight: bold; color: blue;"');
+    expect(displayHtml).toContain('style="margin: 10px;"');
+    expect(displayHtml).toContain('Styled content');
   });
 });