From 24848f9d6a92eb1e09189c358636fd1ba32fa6d6 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Thu, 16 Mar 2017 14:59:00 -0400
Subject: PLT-3181 Added crossorigin='anonymous' to all external images (#5774)

* PLT-3181 Added crossorigin='anonymous' to all external images

* Fixed image unit tests

* Added crossorigin='anonymous' to a few more places
---
 webapp/components/post_view/components/post_attachment.jsx     |  3 +++
 .../post_view/components/post_attachment_opengraph.jsx         |  1 +
 webapp/components/post_view/components/post_image.jsx          |  2 ++
 webapp/components/profile_picture.jsx                          |  2 ++
 webapp/components/profile_popover.jsx                          |  1 +
 webapp/tests/formatting_imgs.test.jsx                          | 10 +++++-----
 webapp/utils/markdown.jsx                                      |  1 +
 7 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/webapp/components/post_view/components/post_attachment.jsx b/webapp/components/post_view/components/post_attachment.jsx
index 57335b94a..1b2cddcd6 100644
--- a/webapp/components/post_view/components/post_attachment.jsx
+++ b/webapp/components/post_view/components/post_attachment.jsx
@@ -184,6 +184,7 @@ class PostAttachment extends React.Component {
                 author.push(
                     <img
                         className='attachment__author-icon'
+                        crossOrigin='anonymous'
                         src={data.author_icon}
                         key={'attachment__author-icon'}
                         height='14'
@@ -257,6 +258,7 @@ class PostAttachment extends React.Component {
             image = (
                 <img
                     className='attachment__image'
+                    crossOrigin='anonymous'
                     src={data.image_url}
                 />
             );
@@ -269,6 +271,7 @@ class PostAttachment extends React.Component {
                     className='attachment__thumb-container'
                 >
                     <img
+                        crossOrigin='anonymous'
                         src={data.thumb_url}
                     />
                 </div>
diff --git a/webapp/components/post_view/components/post_attachment_opengraph.jsx b/webapp/components/post_view/components/post_attachment_opengraph.jsx
index 12437e672..b1ebf0a4b 100644
--- a/webapp/components/post_view/components/post_attachment_opengraph.jsx
+++ b/webapp/components/post_view/components/post_attachment_opengraph.jsx
@@ -201,6 +201,7 @@ export default class PostAttachmentOpenGraph extends React.Component {
                     element = this.wrapInSmallImageContainer(
                         <img
                             className={'attachment__image attachment__image--openraph'}
+                            crossOrigin='anonymous'
                             src={imageUrl}
                             ref={(img) => {
                                 this.smallImageElement = img;
diff --git a/webapp/components/post_view/components/post_image.jsx b/webapp/components/post_view/components/post_image.jsx
index 9a761bfca..6fe954e99 100644
--- a/webapp/components/post_view/components/post_image.jsx
+++ b/webapp/components/post_view/components/post_image.jsx
@@ -67,6 +67,7 @@ export default class PostImageEmbed extends React.Component {
             return (
                 <img
                     className='img-div placeholder'
+                    crossOrigin='anonymous'
                     height='500px'
                 />
             );
@@ -75,6 +76,7 @@ export default class PostImageEmbed extends React.Component {
         return (
             <img
                 className='img-div'
+                crossOrigin='anonymous'
                 src={this.props.link}
             />
         );
diff --git a/webapp/components/profile_picture.jsx b/webapp/components/profile_picture.jsx
index 7a5f892db..737a4400b 100644
--- a/webapp/components/profile_picture.jsx
+++ b/webapp/components/profile_picture.jsx
@@ -69,6 +69,7 @@ export default class ProfilePicture extends React.Component {
                             width={this.props.width}
                             height={this.props.width}
                             src={this.props.src}
+                            crossOrigin='anonymous'
                         />
                         <StatusIcon status={this.props.status}/>
                     </span>
@@ -82,6 +83,7 @@ export default class ProfilePicture extends React.Component {
                     width={this.props.width}
                     height={this.props.width}
                     src={this.props.src}
+                    crossOrigin='anonymous'
                 />
                 <StatusIcon status={this.props.status}/>
             </span>
diff --git a/webapp/components/profile_popover.jsx b/webapp/components/profile_popover.jsx
index c7d45474f..e21716cb3 100644
--- a/webapp/components/profile_popover.jsx
+++ b/webapp/components/profile_popover.jsx
@@ -182,6 +182,7 @@ export default class ProfilePopover extends React.Component {
                 height='128'
                 width='128'
                 key='user-popover-image'
+                crossOrigin='anonymous'
             />
         );
 
diff --git a/webapp/tests/formatting_imgs.test.jsx b/webapp/tests/formatting_imgs.test.jsx
index 604472671..fac9a755f 100644
--- a/webapp/tests/formatting_imgs.test.jsx
+++ b/webapp/tests/formatting_imgs.test.jsx
@@ -11,7 +11,7 @@ describe('Markdown.Imgs', function() {
     it('Inline mage', function(done) {
         assert.equal(
             Markdown.format('![Mattermost](/images/icon.png)').trim(),
-            '<p><img src="/images/icon.png" alt="Mattermost" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+            '<p><img src="/images/icon.png" alt="Mattermost" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img" crossorigin="anonymous"></p>'
         );
 
         done();
@@ -20,7 +20,7 @@ describe('Markdown.Imgs', function() {
     it('Image with hover text', function(done) {
         assert.equal(
             Markdown.format('![Mattermost](/images/icon.png "Mattermost Icon")').trim(),
-            '<p><img src="/images/icon.png" alt="Mattermost" title="Mattermost Icon" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+            '<p><img src="/images/icon.png" alt="Mattermost" title="Mattermost Icon" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img" crossorigin="anonymous"></p>'
         );
 
         done();
@@ -29,7 +29,7 @@ describe('Markdown.Imgs', function() {
     it('Image with link', function(done) {
         assert.equal(
             Markdown.format('[![Mattermost](../../images/icon-76x76.png)](https://github.com/mattermost/platform)').trim(),
-            '<p><a class="theme markdown__link" href="https://github.com/mattermost/platform" rel="noreferrer" target="_blank"><img src="../../images/icon-76x76.png" alt="Mattermost" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></a></p>'
+            '<p><a class="theme markdown__link" href="https://github.com/mattermost/platform" rel="noreferrer" target="_blank"><img src="../../images/icon-76x76.png" alt="Mattermost" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img" crossorigin="anonymous"></a></p>'
         );
 
         done();
@@ -38,7 +38,7 @@ describe('Markdown.Imgs', function() {
     it('Image with width and height', function(done) {
         assert.equal(
             Markdown.format('![Mattermost](../../images/icon-76x76.png =50x76 "Mattermost Icon")').trim(),
-            '<p><img src="../../images/icon-76x76.png" alt="Mattermost" title="Mattermost Icon" width="50" height="76" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+            '<p><img src="../../images/icon-76x76.png" alt="Mattermost" title="Mattermost Icon" width="50" height="76" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img" crossorigin="anonymous"></p>'
         );
 
         done();
@@ -47,7 +47,7 @@ describe('Markdown.Imgs', function() {
     it('Image with width', function(done) {
         assert.equal(
             Markdown.format('![Mattermost](../../images/icon-76x76.png =50 "Mattermost Icon")').trim(),
-            '<p><img src="../../images/icon-76x76.png" alt="Mattermost" title="Mattermost Icon" width="50" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+            '<p><img src="../../images/icon-76x76.png" alt="Mattermost" title="Mattermost Icon" width="50" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img" crossorigin="anonymous"></p>'
         );
 
         done();
diff --git a/webapp/utils/markdown.jsx b/webapp/utils/markdown.jsx
index c84df0fa5..fa9c985c7 100644
--- a/webapp/utils/markdown.jsx
+++ b/webapp/utils/markdown.jsx
@@ -152,6 +152,7 @@ class MattermostMarkdownRenderer extends marked.Renderer {
             out += ' height="' + dimensions[1] + '"';
         }
         out += ' onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"';
+        out += ' crossorigin="anonymous"';
         out += this.options.xhtml ? '/>' : '>';
         return out;
     }
-- 
cgit v1.2.3-1-g7c22