Merge pull request #543 from GetStream/fix/CRS-276-improve-attachment-sanitization

[CRS-276] Sanitize URL image sources in Image component

Author: vini-btc

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"
 />
 `;