fix(gravatar): Add crossOrigin attribute.

In cross origin issolated mode we need to explicitly add crossOrigin
attribute for all resources that are loaded with CORS headers.

react/features/base/avatar/components/web/StatelessAvatar.js

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { Icon } from '../../../icons';
+import { isGravatarURL } from '../../functions';
 import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar';
 
 type Props = AbstractProps & {
@@ -66,6 +67,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
                     <img
                         alt = 'avatar'
                         className = { this._getAvatarClassName() }
+                        crossOrigin = { isGravatarURL(url) ? '' : undefined }
                         data-testid = { this.props.testId }
                         id = { this.props.id }
                         onError = { this.props.onAvatarLoadError }

react/features/base/avatar/constants.js

@@ -0,0 +1,6 @@
+// @flow
+
+/**
+ * The base URL for gravatar images.
+ */
+export const GRAVATAR_BASE_URL = 'https://www.gravatar.com/avatar/';

react/features/base/avatar/functions.js

@@ -3,6 +3,8 @@
 import GraphemeSplitter from 'grapheme-splitter';
 import _ from 'lodash';
 
+import { GRAVATAR_BASE_URL } from './constants';
+
 const AVATAR_COLORS = [
     '#6A50D3',
     '#FF9B42',
@@ -70,3 +72,13 @@ export function getInitials(s: ?string) {
 
     return getFirstGraphemeUpper(firstWord) + getFirstGraphemeUpper(secondWord);
 }
+
+/**
+ * Checks if the passed URL is pointing to the gravatar service.
+ *
+ * @param {string} url - The URL.
+ * @returns {void}
+ */
+export function isGravatarURL(url: string = '') {
+    return url.startsWith(GRAVATAR_BASE_URL);
+}

react/features/base/avatar/index.js

@@ -1,4 +1,5 @@
 // @flow
 
 export * from './components';
+export * from './constants';
 export * from './functions';

react/features/base/participants/functions.js

@@ -3,6 +3,7 @@
 import { getGravatarURL } from '@jitsi/js-utils/avatar';
 import type { Store } from 'redux';
 
+import { GRAVATAR_BASE_URL } from '../avatar';
 import { JitsiParticipantConnectionStatus } from '../lib-jitsi-meet';
 import { MEDIA_TYPE, shouldRenderVideoTrack } from '../media';
 import { toState } from '../redux';
@@ -34,7 +35,7 @@ const AVATAR_CHECKER_FUNCTIONS = [
         if (participant && participant.email) {
             // TODO: remove once libravatar has deployed their new scaled up infra. -saghul
             const gravatarBaseURL
-                = store.getState()['features/base/config'].gravatarBaseURL ?? 'https://www.gravatar.com/avatar/';
+                = store.getState()['features/base/config'].gravatarBaseURL ?? GRAVATAR_BASE_URL;
 
             return getGravatarURL(participant.email, gravatarBaseURL);
         }

react/features/base/participants/preloadImage.web.js

@@ -1,6 +1,8 @@
 
 // @flow
 
+import { isGravatarURL } from '../avatar';
+
 import { isIconUrl } from './functions';
 
 /**
@@ -17,6 +19,9 @@ export function preloadImage(src: string | Object): Promise<string> {
     return new Promise((resolve, reject) => {
         const image = document.createElement('img');
 
+        if (isGravatarURL(src)) {
+            image.setAttribute('crossOrigin', '');
+        }
         image.onload = () => resolve(src);
         image.onerror = reject;