frontend(gravatar): use sha256 instead of md5 (#63688)

Gravatar supports profile and image lookups via sha256. MD5 shows up as
a security finding in most scanning tools. This will remove one less
finding.

static/app/components/avatar/gravatar.tsx

@@ -1,6 +1,6 @@
 import {useCallback, useEffect, useState} from 'react';
 import styled from '@emotion/styled';
-import type HasherHelper from 'crypto-js/md5';
+import type HasherHelper from 'crypto-js/sha256';
 import * as qs from 'query-string';
 
 import ConfigStore from 'sentry/stores/configStore';
@@ -27,23 +27,23 @@ function Gravatar({
   suggested,
 }: Props) {
   const isMountedRef = useIsMountedRef();
-  const [MD5, setMD5] = useState<typeof HasherHelper>();
+  const [SHA256, setSHA256] = useState<typeof HasherHelper>();
 
-  const loadMd5Helper = useCallback(async () => {
-    const mod = await import('crypto-js/md5');
+  const loadSHA256Helper = useCallback(async () => {
+    const mod = await import('crypto-js/sha256');
 
     if (isMountedRef.current) {
       // XXX: Use function invocation of `useState`s setter since the mod.default
       // is a function itself.
-      setMD5(() => mod.default);
+      setSHA256(() => mod.default);
     }
   }, [isMountedRef]);
 
   useEffect(() => {
-    loadMd5Helper();
-  }, [loadMd5Helper]);
+    loadSHA256Helper();
+  }, [loadSHA256Helper]);
 
-  if (MD5 === undefined) {
+  if (SHA256 === undefined) {
     return null;
   }
 
@@ -56,8 +56,8 @@ function Gravatar({
 
   const gravatarBaseUrl = ConfigStore.get('gravatarBaseUrl');
 
-  const md5 = MD5(gravatarId ?? '');
-  const url = `${gravatarBaseUrl}/avatar/${md5}?${query}`;
+  const sha256 = SHA256((gravatarId ?? '').trim());
+  const url = `${gravatarBaseUrl}/avatar/${sha256}?${query}`;
 
   return (
     <Image

static/app/components/avatar/index.spec.tsx

@@ -54,7 +54,7 @@ describe('Avatar', function () {
       const avatarImage = await screen.findByRole('img');
       expect(avatarImage).toHaveAttribute(
         'src',
-        `${gravatarBaseUrl}/avatar/a94c88e18c44e553497bf642449b6398?d=404&s=120`
+        `${gravatarBaseUrl}/avatar/4af0e27cabbfd1860ab7985e5becc4dedeaf5e00deec23a2d92d5f8bb1191ccb?d=404&s=120`
       );
     });