fix(Attachment): sanitization of image sources (#1953)

Author: arnautov-anton

src/components/Attachment/Attachment.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { sanitizeUrl } from '@braintree/sanitize-url';
 import type { ReactPlayerProps } from 'react-player';
 import type { Attachment as StreamAttachment } from 'stream-chat';
 
@@ -103,13 +102,9 @@ const renderGroupedAttachments = <
   attachments,
   ...rest
 }: AttachmentProps<StreamChatGenerics>): GroupedRenderedAttachment => {
-  const uploadedImages: StreamAttachment<StreamChatGenerics>[] = attachments
-    .filter((attachment) => isUploadedImage(attachment))
-    .map((attachment) => ({
-      ...attachment,
-      image_url: sanitizeUrl(attachment.image_url),
-      thumb_url: sanitizeUrl(attachment.thumb_url),
-    }));
+  const uploadedImages: StreamAttachment<StreamChatGenerics>[] = attachments.filter((attachment) =>
+    isUploadedImage(attachment),
+  );
 
   const containers = attachments
     .filter((attachment) => !isUploadedImage(attachment))

src/components/Gallery/Gallery.tsx

@@ -1,4 +1,5 @@
 import React, { CSSProperties, MutableRefObject, useState } from 'react';
+import { sanitizeUrl } from '@braintree/sanitize-url';
 import clsx from 'clsx';
 
 import { Modal } from '../Modal';
@@ -81,7 +82,7 @@ const UnMemoizedGallery = <
       >
         <img
           alt='User uploaded content'
-          src={image.previewUrl || image.image_url || image.thumb_url}
+          src={sanitizeUrl(image.previewUrl || image.image_url || image.thumb_url)}
           style={image.style}
           {...(innerRefs?.current && { ref: (r) => (innerRefs.current[i] = r) })}
         />

src/components/Gallery/__tests__/__snapshots__/Gallery.test.js.snap

@@ -11,6 +11,7 @@ exports[`Gallery should render component with 3 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -20,6 +21,7 @@ exports[`Gallery should render component with 3 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -29,6 +31,7 @@ exports[`Gallery should render component with 3 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
 </div>
@@ -45,6 +48,7 @@ exports[`Gallery should render component with 4 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -54,6 +58,7 @@ exports[`Gallery should render component with 4 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -63,6 +68,7 @@ exports[`Gallery should render component with 4 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -72,6 +78,7 @@ exports[`Gallery should render component with 4 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
 </div>
@@ -88,6 +95,7 @@ exports[`Gallery should render component with 5 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -97,6 +105,7 @@ exports[`Gallery should render component with 5 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -106,6 +115,7 @@ exports[`Gallery should render component with 5 images 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -136,6 +146,7 @@ exports[`Gallery should render component with default props 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
   <button
@@ -145,6 +156,7 @@ exports[`Gallery should render component with default props 1`] = `
   >
     <img
       alt="User uploaded content"
+      src="about:blank"
     />
   </button>
 </div>