Merge branch 'fix/CRS-288-fallback-initials-preview' of github.com:GetStream/stream-chat-react into fix/CRS-288-fallback-initials-preview

Author: Jaap

package.json

@@ -34,7 +34,7 @@
     "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.2.0",
-    "react-file-utils": "0.3.16",
+    "react-file-utils": "0.3.17",
     "react-images": "^1.1.7",
     "react-is": "^16.13.1",
     "react-markdown": "^4.3.1",

src/components/Gallery/Image.js

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import ModalWrapper from './ModalWrapper';
+import { sanitizeUrl } from '@braintree/sanitize-url';
 
 /**
  * Image - Small wrapper around an image tag, supports thumbnails
@@ -32,13 +33,14 @@ class Image extends React.PureComponent {
 
   render() {
     const { image_url, thumb_url, fallback } = this.props;
-    const formattedArray = [{ src: image_url || thumb_url }];
+    const imageSrc = sanitizeUrl(image_url || thumb_url);
+    const formattedArray = [{ src: imageSrc }];
     return (
       <React.Fragment>
         <img
           className="str-chat__message-attachment--img"
           onClick={this.toggleModal}
-          src={thumb_url || image_url}
+          src={imageSrc}
           alt={fallback}
           data-testid="image-test"
         />

src/components/Gallery/__tests__/Image.test.js

@@ -17,6 +17,37 @@ describe('Image', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  describe('it should prevent unsafe image uri protocols in the rendered image src', () => {
+    it('should prevent javascript protocol in image src', () => {
+      // eslint-disable-next-line no-script-url
+      const xssJavascriptUri = 'javascript:alert("p0wn3d")';
+      const { getByTestId } = render(<Image image_url={xssJavascriptUri} />);
+      expect(getByTestId('image-test')).not.toHaveAttribute(
+        'src',
+        xssJavascriptUri,
+      );
+    });
+    it('should prevent javascript protocol in thumbnail src', () => {
+      // eslint-disable-next-line no-script-url
+      const xssJavascriptUri = 'javascript:alert("p0wn3d")';
+      const { getByTestId } = render(<Image thumb_url={xssJavascriptUri} />);
+      expect(getByTestId('image-test')).not.toHaveAttribute(
+        'src',
+        xssJavascriptUri,
+      );
+    });
+    it('should prevent dataUris in image src', () => {
+      const xssDataUri = 'data:image/svg+xml;base64,DANGEROUSENCODEDSVG';
+      const { getByTestId } = render(<Image image_url={xssDataUri} />);
+      expect(getByTestId('image-test')).not.toHaveAttribute('src', xssDataUri);
+    });
+    it('should prevent dataUris in thumb src', () => {
+      const xssDataUri = 'data:image/svg+xml;base64,DANGEROUSENCODEDSVG';
+      const { getByTestId } = render(<Image thumb_url={xssDataUri} />);
+      expect(getByTestId('image-test')).not.toHaveAttribute('src', xssDataUri);
+    });
+  });
+
   it('should open modal on image click', async () => {
     jest.spyOn(console, 'warn').mockImplementation(() => null);
     const { getByTestId, getByTitle } = render(

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

@@ -5,5 +5,6 @@ exports[`Image should render component with default props 1`] = `
   className="str-chat__message-attachment--img"
   data-testid="image-test"
   onClick={[Function]}
+  src="about:blank"
 />
 `;

yarn.lock

@@ -9555,10 +9555,10 @@ react-file-icon@^0.2.0:
     react-dom "^16.2.0"
     tinycolor2 "^1.4.1"
 
-[email protected].16:
-  version "0.3.16"
-  resolved "https://registry.yarnpkg.com/react-file-utils/-/react-file-utils-0.3.16.tgz#de646e64ad65b5b75833440f6d8f9119ddf5d60d"
-  integrity sha512-21z3AWxvgtW06ZOvVe4olPdz1dRnfPm0s/a/Era7vzGrMZrSarlGiO9rIfChtotyJwrlPF8UQMFiOp8P42gNtA==
+[email protected].17:
+  version "0.3.17"
+  resolved "https://registry.yarnpkg.com/react-file-utils/-/react-file-utils-0.3.17.tgz#99e9a0583d7e0c362565068ffa09a7ea112754ba"
+  integrity sha512-8EFgRZJkIC8w48SLOtsJY3RHkUFtBebl9iyOM6B5qcz74cn7rvWxavXDUc22P7Ibs4xuNgYEfBt0OMdOLjKP7A==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^1.2.13"
     "@fortawesome/free-regular-svg-icons" "^5.7.0"