refactor(experience): remove the image CORS attributes (#6959)

* refactor(experience): remove the image CORS prop

remove the image tag CORS property, do not check the source CORS headers

* chore: add changeset

add changeset

* chore: fix typo

fix typo

* chore: update the changeset

update the changeset

.changeset/soft-kings-grin.md

@@ -0,0 +1,9 @@
+---
+"@logto/experience": patch
+---
+
+remove the image element's `cross-origin="anonymous"` attribute.
+
+Some public image resources may not have the proper cross-origin headers configured, those images may fail to load when the `cross-origin="anonymous"` attribute is present.
+Since those image elements are only used for display purposes, Logto does not need to access the image data, so the `cross-origin="anonymous"` attribute is not necessary.
+To make the image elements more compatible with public image resources, remove the `cross-origin="anonymous"` attribute from the image elements.

packages/experience-legacy/src/components/BrandingHeader/index.tsx

@@ -31,17 +31,10 @@ const BrandingHeader = ({
       {shouldShowLogo && (
         <div className={styles.logoWrapper}>
           {thirdPartyLogo && (
-            <img
-              className={styles.logo}
-              alt="third party logo"
-              src={thirdPartyLogo}
-              crossOrigin="anonymous"
-            />
+            <img className={styles.logo} alt="third party logo" src={thirdPartyLogo} />
           )}
           {shouldConnectSvg && <ConnectIcon className={styles.connectIcon} />}
-          {logo && (
-            <img className={styles.logo} alt="app logo" src={logo} crossOrigin="anonymous" />
-          )}
+          {logo && <img className={styles.logo} alt="app logo" src={logo} />}
         </div>
       )}
 

packages/experience-legacy/src/components/Button/SocialLinkButton.tsx

@@ -49,12 +49,7 @@ const SocialLinkButton = ({
       onClick={onClick}
     >
       {logo && !isLoadingActive && (
-        <img
-          src={logo}
-          alt={target}
-          className={socialLinkButtonStyles.icon}
-          crossOrigin="anonymous"
-        />
+        <img src={logo} alt={target} className={socialLinkButtonStyles.icon} />
       )}
       {isLoadingActive && (
         <span className={socialLinkButtonStyles.loadingIcon}>

packages/experience-legacy/src/containers/SocialLanding/index.tsx

@@ -18,11 +18,7 @@ const SocialLanding = ({ className, connectorId, isLoading = false }: Props) =>
   return (
     <div className={classNames(styles.container, className)}>
       <div className={styles.connector}>
-        {result ? (
-          <img src={getConnectorLogo(result)} alt="logo" crossOrigin="anonymous" />
-        ) : (
-          connectorId
-        )}
+        {result ? <img src={getConnectorLogo(result)} alt="logo" /> : connectorId}
       </div>
       {isLoading && <LoadingIcon />}
     </div>

packages/experience/src/components/BrandingHeader/index.tsx

@@ -31,17 +31,10 @@ const BrandingHeader = ({
       {shouldShowLogo && (
         <div className={styles.logoWrapper}>
           {thirdPartyLogo && (
-            <img
-              className={styles.logo}
-              alt="third party logo"
-              src={thirdPartyLogo}
-              crossOrigin="anonymous"
-            />
+            <img className={styles.logo} alt="third party logo" src={thirdPartyLogo} />
           )}
           {shouldConnectSvg && <ConnectIcon className={styles.connectIcon} />}
-          {logo && (
-            <img className={styles.logo} alt="app logo" src={logo} crossOrigin="anonymous" />
-          )}
+          {logo && <img className={styles.logo} alt="app logo" src={logo} />}
         </div>
       )}
 

packages/experience/src/components/Button/SocialLinkButton.tsx

@@ -49,12 +49,7 @@ const SocialLinkButton = ({
       onClick={onClick}
     >
       {logo && !isLoadingActive && (
-        <img
-          src={logo}
-          alt={target}
-          className={socialLinkButtonStyles.icon}
-          crossOrigin="anonymous"
-        />
+        <img src={logo} alt={target} className={socialLinkButtonStyles.icon} />
       )}
       {isLoadingActive && (
         <span className={socialLinkButtonStyles.loadingIcon}>

packages/experience/src/containers/SocialLanding/index.tsx

@@ -18,11 +18,7 @@ const SocialLanding = ({ className, connectorId, isLoading = false }: Props) =>
   return (
     <div className={classNames(styles.container, className)}>
       <div className={styles.connector}>
-        {result ? (
-          <img src={getConnectorLogo(result)} alt="logo" crossOrigin="anonymous" />
-        ) : (
-          connectorId
-        )}
+        {result ? <img src={getConnectorLogo(result)} alt="logo" /> : connectorId}
       </div>
       {isLoading && <LoadingIcon />}
     </div>