From 208586cead06b3a4608c1f76a8ab979032e9b483 Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Tue, 30 Nov 2021 15:03:50 -0600
Subject: [PATCH] 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.
---
 .../base/avatar/components/web/StatelessAvatar.js    |  2 ++
 react/features/base/avatar/constants.js              |  6 ++++++
 react/features/base/avatar/functions.js              | 12 ++++++++++++
 react/features/base/avatar/index.js                  |  1 +
 react/features/base/participants/functions.js        |  3 ++-
 react/features/base/participants/preloadImage.web.js |  5 +++++
 6 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 react/features/base/avatar/constants.js

diff --git a/react/features/base/avatar/components/web/StatelessAvatar.js b/react/features/base/avatar/components/web/StatelessAvatar.js
index 57a1b8b17..67c85954f 100644
--- a/react/features/base/avatar/components/web/StatelessAvatar.js
+++ b/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 }
diff --git a/react/features/base/avatar/constants.js b/react/features/base/avatar/constants.js
new file mode 100644
index 000000000..4cc9ceaaf
--- /dev/null
+++ b/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/';
diff --git a/react/features/base/avatar/functions.js b/react/features/base/avatar/functions.js
index 4aac4db0f..57f68530f 100644
--- a/react/features/base/avatar/functions.js
+++ b/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);
+}
diff --git a/react/features/base/avatar/index.js b/react/features/base/avatar/index.js
index 359d82e99..2e2602267 100644
--- a/react/features/base/avatar/index.js
+++ b/react/features/base/avatar/index.js
@@ -1,4 +1,5 @@
 // @flow
 
 export * from './components';
+export * from './constants';
 export * from './functions';
diff --git a/react/features/base/participants/functions.js b/react/features/base/participants/functions.js
index bbe271c00..06b70cbea 100644
--- a/react/features/base/participants/functions.js
+++ b/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);
         }
diff --git a/react/features/base/participants/preloadImage.web.js b/react/features/base/participants/preloadImage.web.js
index 2316fee8c..e31325df2 100644
--- a/react/features/base/participants/preloadImage.web.js
+++ b/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;