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

@@ -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>

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;

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}
             />
         );

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>

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'
             />
         );
 

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();

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;
     }