Decode urls safely to avoid crashes

.changeset/fix-uri-crash.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix crash when url contains malformed/dangling uri components.

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -5,6 +5,7 @@
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { mxcUrlToHttp, downloadMedia } from '$utils/matrix';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
+import { safeDecodeUrl } from '$plugins/react-custom-html-parser';
 import * as css from './UrlPreviewCard.css';
 import { UrlPreview, UrlPreviewContent, UrlPreviewDescription } from './UrlPreview';
 import { AudioContent, ImageContent, VideoContent } from '../message';
@@ -15,7 +16,7 @@
 
 const openMediaInNewTab = async (url: string | undefined) => {
   if (!url) {
     console.warn('Attempted to open an empty url');
     return;
   }
   const blob = await downloadMedia(url);
@@ -58,14 +59,14 @@
       );
       const handleAuxClick = (ev: React.MouseEvent) => {
         if (!prev['og:image']) {
           console.warn('No image');
           return;
         }
         if (ev.button === 1) {
           ev.preventDefault();
           const mxcUrl = mxcUrlToHttp(mx, prev['og:image'], /* useAuthentication */ true);
           if (!mxcUrl) {
             console.error('Error converting mxc:// url.');
             return;
           }
           openMediaInNewTab(mxcUrl);
@@ -100,7 +101,7 @@
               priority="300"
             >
               {typeof siteName === 'string' && `${siteName} | `}
-              {decodeURIComponent(url)}
+              {safeDecodeUrl(url)}
             </Text>
             {title && (
               <Text truncate priority="400">
@@ -198,7 +199,7 @@
             size="T200"
             priority="300"
           >
-            {decodeURIComponent(url)}
+            {safeDecodeUrl(url)}
           </Text>
         </UrlPreviewContent>
       );

src/app/plugins/react-custom-html-parser.tsx

@@ -60,6 +60,14 @@ export const LINKIFY_OPTS: LinkifyOpts = {
   ignoreTags: ['span'],
 };
 
+export const safeDecodeUrl = (url: string) => {
+  try {
+    return decodeURIComponent(url);
+  } catch {
+    return url;
+  }
+};
+
 export const makeMentionCustomProps = (
   handleMentionClick?: ReactEventHandler<HTMLElement>,
   content?: string
@@ -161,7 +169,7 @@ export const factoryRenderLinkifyWithMention = (
     content,
   }) => {
     const encodedHref = attributes.href;
-    const decodedHref = encodedHref && decodeURIComponent(encodedHref);
+    const decodedHref = encodedHref && safeDecodeUrl(encodedHref);
 
     if (tagName === 'a' && decodedHref && testMatrixTo(decodedHref)) {
       const mention = mentionRender(decodedHref);
@@ -480,7 +488,7 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'a' && typeof props.href === 'string') {
           const encodedHref = props.href;
-          const decodedHref = encodedHref && decodeURIComponent(encodedHref);
+          const decodedHref = encodedHref && safeDecodeUrl(encodedHref);
           if (!decodedHref || !testMatrixTo(decodedHref)) {
             return undefined;
           }
@@ -492,7 +500,7 @@ export const getReactCustomHtmlParser = (
           const mention = renderMatrixMention(
             mx,
             roomId,
-            decodeURIComponent(props.href),
+            safeDecodeUrl(props.href),
             makeMentionCustomProps(params.handleMentionClick, content),
             params.nicknames
           );