Fix unsanitized HTML in reply renderer

.changeset/fix-reply-renderer-sanitizer.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Sanitize formatted reply previews before rendering to prevent unsafe HTML from being parsed in reply snippets.

src/app/components/message/Reply.tsx

@@ -25,6 +25,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient';
 import { useMemberEventParser } from '$hooks/useMemberEventParser';
 import { StateEvent, MessageEvent } from '$types/matrix/room';
 import { useMentionClickHandler } from '$hooks/useMentionClickHandler';
+import { sanitizeCustomHtml } from '$utils/sanitize';
 import { useTranslation } from 'react-i18next';
 import * as customHtmlCss from '$styles/CustomHtml.css';
 import {
@@ -91,6 +92,18 @@ type ReplyProps = {
   replyIcon?: JSX.Element;
 };
 
+export const sanitizeReplyFormattedPreview = (formattedBody: string): string => {
+  const strippedHtml = trimReplyFromFormattedBody(formattedBody)
+    .replaceAll(/<br\s*\/?>/gi, ' ')
+    .replaceAll(/<\/p>\s*<p[^>]*>/gi, ' ')
+    .replaceAll(/<\/?p[^>]*>/gi, '')
+    .replaceAll(/<\/li>\s*<li[^>]*>/gi, ' ')
+    .replaceAll(/<\/?(ul|ol|li|blockquote|h[1-6]|pre|div)[^>]*>/gi, '')
+    .replaceAll(/(?:\r\n|\r|\n)/g, ' ');
+
+  return sanitizeCustomHtml(strippedHtml);
+};
+
 export const Reply = as<'div', ReplyProps>(
   (
     { room, timelineSet, replyEventId, threadRootId, mentions, onClick, replyIcon, ...props },
@@ -158,20 +171,14 @@ export const Reply = as<'div', ReplyProps>(
     );
 
     if (format === 'org.matrix.custom.html' && formattedBody) {
-      const strippedHtml = trimReplyFromFormattedBody(formattedBody)
-        .replaceAll(/<br\s*\/?>/gi, ' ')
-        .replaceAll(/<\/p>\s*<p[^>]*>/gi, ' ')
-        .replaceAll(/<\/?p[^>]*>/gi, '')
-        .replaceAll(/<\/li>\s*<li[^>]*>/gi, ' ')
-        .replaceAll(/<\/?(ul|ol|li|blockquote|h[1-6]|pre|div)[^>]*>/gi, '')
-        .replaceAll(/(?:\r\n|\r|\n)/g, ' ');
+      const sanitizedHtml = sanitizeReplyFormattedPreview(formattedBody);
       const parserOpts = getReactCustomHtmlParser(mx, room.roomId, {
         linkifyOpts: replyLinkifyOpts,
         useAuthentication,
         nicknames,
         handleMentionClick: mentionClickHandler,
       });
-      bodyJSX = parse(strippedHtml, parserOpts) as JSX.Element;
+      bodyJSX = parse(sanitizedHtml, parserOpts) as JSX.Element;
     } else if (body) {
       const strippedBody = trimReplyFromBody(body).replaceAll(/(?:\r\n|\r|\n)/g, ' ');
       bodyJSX = scaleSystemEmoji(strippedBody);

src/app/components/message/ThreadIndicator.test.tsx

@@ -14,7 +14,7 @@
 import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { RelationType } from '$types/matrix-sdk';
-import { ThreadIndicator } from './Reply';
+import { sanitizeReplyFormattedPreview, ThreadIndicator } from './Reply';
 
 function Subject({ relType, threadRootId }: { relType?: string; threadRootId?: string }) {
   return <>{relType === RelationType.Thread && !threadRootId && <ThreadIndicator />}</>;
@@ -41,3 +41,26 @@ describe('ThreadIndicator visibility in compose strip', () => {
     expect(screen.queryByText('Thread')).not.toBeInTheDocument();
   });
 });
+
+describe('sanitizeReplyFormattedPreview', () => {
+  it('removes mx-reply quote block content and keeps message text', () => {
+    const html = '<mx-reply><blockquote>quoted</blockquote></mx-reply><p>Visible message</p>';
+
+    const result = sanitizeReplyFormattedPreview(html);
+
+    expect(result).not.toContain('quoted');
+    expect(result).toContain('Visible message');
+  });
+
+  it('sanitizes dangerous HTML before parse', () => {
+    const html =
+      '<mx-reply><blockquote>old</blockquote></mx-reply><p>safe<script>alert(1)</script></p><a href="https://example.org" onclick="alert(1)">x</a>';
+
+    const result = sanitizeReplyFormattedPreview(html);
+
+    expect(result).not.toContain('<script');
+    expect(result).not.toContain('alert(1)');
+    expect(result).not.toContain('onclick=');
+    expect(result).toContain('safe');
+  });
+});