Mostly working. Need to fix image rendering from untrusted frames

brave · Feb 21, 2025 · f92b945 · f92b945
1 parent f4eb43e
commit f92b945
Show file tree

Hide file tree

Showing 17 changed files with 35 additions and 27 deletions.
diff --git a/components/brave_wallet_ui/common/async/base-query-cache.ts b/components/brave_wallet_ui/common/async/base-query-cache.ts
@@ -333,7 +333,7 @@ export class BaseQueryCache {
     }
     return token.logo.startsWith('ipfs://')
       ? (await this.getIpfsGatewayTranslatedNftUrl(token.logo)) || ''
-      : `chrome://erc-token-images/${encodeURIComponent(token.logo)}`
+      : token.logo
   }
 
   getEnabledCoinTypes = async () => {

diff --git a/components/brave_wallet_ui/common/slices/endpoints/token_suggestions.endpoints.ts b/components/brave_wallet_ui/common/slices/endpoints/token_suggestions.endpoints.ts
@@ -33,11 +33,11 @@ export const tokenSuggestionsEndpoints = ({
             if (logo !== '' && !isRemoteImageURL(logo)) {
               try {
                 // attempt property reassignment
-                request.token.logo = `chrome://erc-token-images/${encodeURIComponent(logo)}`
+                request.token.logo = `chrome://image/?url=${encodeURIComponent(logo)}&staticEncode=true`
               } catch {
                 request.token = {
                   ...request.token,
-                  logo: `chrome://erc-token-images/${encodeURIComponent(logo)}`
+                  logo: `chrome://image/?url=${encodeURIComponent(logo)}&staticEncode=true`
                 }
               }
             }

diff --git a/components/brave_wallet_ui/components/asset-name-and-icon/index.tsx b/components/brave_wallet_ui/components/asset-name-and-icon/index.tsx
@@ -25,7 +25,9 @@ export const AssetNameAndIcon = (props: Props) => {
   return (
     <StyledWrapper>
       <AssetIcon
-        src={assetLogo}
+        // This usage is good, but it's breaking because it looks like it's being loaded from chrome-untrusted://market-display frame
+        // the image is coming from https://assets.cgproxy.brave.com
+        src={`chrome://image?url=${encodeURIComponent(assetLogo)}&staticEncode=true16`} 
         loading='lazy'
       />
       <NameAndSymbolWrapper>

diff --git a/...e_wallet_ui/components/desktop/popup-modals/add-account-modal/account-type-item/index.tsx b/...e_wallet_ui/components/desktop/popup-modals/add-account-modal/account-type-item/index.tsx
@@ -30,7 +30,7 @@ const AccountTypeItem = (props: Props) => {
   return (
     <StyledWrapper>
       <LeftSide>
-        <NetworkIcon src={icon} />
+        <NetworkIcon src={`chrome://image?url=${encodeURIComponent(icon)}&staticEncode=true`} />
         <InfoColumn>
           <Title>{title}</Title>
           <Description>{description}</Description>

diff --git a/components/brave_wallet_ui/components/desktop/views/explore_web3/dapp_list_item.tsx b/components/brave_wallet_ui/components/desktop/views/explore_web3/dapp_list_item.tsx
@@ -40,7 +40,7 @@ export const DappListItem = React.forwardRef<
       <Column>
         {isHttpsUrl(dapp.logo) ? (
           <img
-            src={`chrome://image?${encodeURIComponent(dapp.logo)}`}
+            src={`chrome://image?url=${encodeURIComponent(dapp.logo)}&staticEncode=true`}
             height={40}
             width={40}
             alt={dapp.name}

diff --git a/components/brave_wallet_ui/components/desktop/views/explore_web3/web3_dapp_details.tsx b/components/brave_wallet_ui/components/desktop/views/explore_web3/web3_dapp_details.tsx
@@ -58,7 +58,7 @@ export const DappDetails = ({ dapp, ...rest }: DappDetailsProps) => {
         >
           {isHttpsUrl(dapp.logo) ? (
             <img
-              src={`chrome://image?${encodeURIComponent(dapp.logo)}`}
+              src={`chrome://image?url=${encodeURIComponent(dapp.logo)}&staticEncode=true`}
               width={72}
               height={72}
             />

diff --git a/components/brave_wallet_ui/components/shared/buy-option/buy-option-item.tsx b/components/brave_wallet_ui/components/shared/buy-option/buy-option-item.tsx
@@ -37,7 +37,7 @@ export const BuyOptionItem = (props: Props) => {
   return (
     <StyledWrapper layoutType={layoutType}>
       <Row justifyContent='flex-start'>
-        <Logo src={icon} />
+        <Logo src={`chrome://image?url=${encodeURIComponent(icon)}&staticEncode=true`} />
         <Content>
           <Name>{name}</Name>
           <Description>{description}</Description>

diff --git a/components/brave_wallet_ui/components/shared/create-network-icon/index.tsx b/components/brave_wallet_ui/components/shared/create-network-icon/index.tsx
@@ -92,7 +92,7 @@ export const CreateNetworkIcon = ({ network, marginRight, size }: Props) => {
 
   // complex compute + render
   const networkIcon = network.iconUrls[0]
-  const isSandboxUrl = networkIcon?.startsWith('chrome://erc-token-images/')
+  const isSandboxUrl = networkIcon?.startsWith('chrome://image/')
   const networkImageURL = isSandboxUrl
     ? stripERC20TokenImageURL(networkIcon)
     : networkIcon
@@ -124,7 +124,11 @@ export const CreateNetworkIcon = ({ network, marginRight, size }: Props) => {
     >
       <NetworkIcon
         size={size}
-        icon={isRemoteURL ? `chrome://image?${encodeURIComponent(networkImageURL)}` : networkIcon}
+        icon={
+          isRemoteURL
+            ? `chrome://image?url=${encodeURIComponent(networkImageURL)}&staticEncode=true`
+            : networkIcon
+        }
       />
     </IconWrapper>
   )

diff --git a/components/brave_wallet_ui/components/shared/create-placeholder-icon/index.tsx b/components/brave_wallet_ui/components/shared/create-placeholder-icon/index.tsx
@@ -18,7 +18,6 @@ import {
   isValidIconExtension,
   isDataURL,
   isComponentInStorybook,
-  stripChromeImageURL
 } from '../../../utils/string-utils'
 import { isNativeAsset } from '../../../utils/asset-utils'
 
@@ -118,7 +117,7 @@ export function withPlaceholderIcon<
 
     const remoteImage = React.useMemo(() => {
       if (isRemoteURL) {
-        return isStorybook ? tokenImageURL || '' : `chrome://image?${encodeURIComponent(tokenImageURL)}`
+        return isStorybook ? tokenImageURL || '' : `chrome://image?url=${encodeURIComponent(tokenImageURL)}&staticEncode=true`
       }
       return ''
     }, [isRemoteURL, tokenImageURL])
@@ -157,7 +156,7 @@ export function withPlaceholderIcon<
           {...(wrappedComponentProps as PROPS_FOR_FUNCTION & {
             icon?: undefined
           })}
-          icon={isStorybook ? stripChromeImageURL(tokenImageURL) : icon}
+          icon={isStorybook ? tokenImageURL : icon}
         />
       </IconWrapper>
     )

diff --git a/components/brave_wallet_ui/components/shared/nft-icon/nft-icon.tsx b/components/brave_wallet_ui/components/shared/nft-icon/nft-icon.tsx
@@ -11,7 +11,8 @@ import { skipToken } from '@reduxjs/toolkit/query'
 import {
   isComponentInStorybook,
   isIpfs,
-  stripERC20TokenImageURL
+  stripERC20TokenImageURL,
+  stripChromeImageURL
 } from '../../../utils/string-utils'
 
 // hooks
@@ -54,7 +55,9 @@ export const NftIcon = (props: NftIconProps) => {
   const nftIframeUrl = React.useMemo(() => {
     const urlParams = new URLSearchParams({
       displayMode: 'icon',
-      icon: encodeURIComponent(remoteImage || '')
+      // appears to still be broken. Seems this is being used in brave://wallet/crypto/accounts/<account-id>/nfts to display nft images
+      // seems to be not working because we're trying to load from chrome-untrusted://nft-display frame which might not be allowed even with the CSP set correctly
+      icon: `chrome://image?url=${encodeURIComponent(remoteImage)}&staticEncode=true&test=8`
     })
     return `chrome-untrusted://nft-display?${urlParams.toString()}`
   }, [remoteImage])
@@ -97,7 +100,7 @@ export const NftIcon = (props: NftIconProps) => {
 
 export const StorybookNftIcon = (props: NftIconProps) => {
   const { icon, responsive, iconStyles } = props
-  const tokenImageURL = icon ? stripERC20TokenImageURL(icon) : ''
+  const tokenImageURL = icon ? stripChromeImageURL(icon) : ''
 
   return responsive ? (
     <NftImageResponsiveIframe

diff --git a/components/brave_wallet_ui/nft/components/nft-details/nft-screen.tsx b/components/brave_wallet_ui/nft/components/nft-details/nft-screen.tsx
@@ -249,7 +249,7 @@ export const NftScreen = ({ selectedAsset, tokenNetwork }: Props) => {
             <NftMultimedia
               as='img'
               visible={!isFetchingNFTMetadata}
-              src={nftMetadata?.imageURL}
+              src={`chrome://image?url=${encodeURIComponent(nftMetadata?.imageURL || '')}&staticEncode=true9`}
             />
           ) : (
             <NftMultimedia

diff --git a/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.tsx b/components/brave_wallet_ui/page/screens/fund-wallet/components/buy_quote/buy_quote.tsx
@@ -120,7 +120,7 @@ export const BuyQuote = ({
           alignItems='center'
         >
           {providerImageUrl ? (
-            <ProviderImage src={`chrome://image?${encodeURIComponent(providerImageUrl)}`} />
+            <ProviderImage src={`chrome://image?url=${encodeURIComponent(providerImageUrl)}&staticEncode=true`} />
           ) : null}
 
           <Column alignItems='flex-start'>

diff --git a/components/brave_wallet_ui/page/screens/fund-wallet/components/select_asset/select_asset.tsx b/components/brave_wallet_ui/page/screens/fund-wallet/components/select_asset/select_asset.tsx
@@ -148,7 +148,7 @@ export const AssetListItem = ({
           gap='16px'
         >
           <IconsWrapper>
-            <AssetImage src={`chrome://image?${encodeURIComponent(symbolImageUrl ?? '')}`} />
+            <AssetImage src={`chrome://image?url=${encodeURIComponent(symbolImageUrl ?? '')}&staticEncode=true`} />
             <NetworkIconWrapper>
               <CreateNetworkIcon
                 network={network}

diff --git a/...wallet_ui/page/screens/fund-wallet/components/select_asset_button/select_asset_button.tsx b/...wallet_ui/page/screens/fund-wallet/components/select_asset_button/select_asset_button.tsx
@@ -75,9 +75,9 @@ export const SelectAssetButton = (props: SelectAssetButtonProps) => {
                 <IconsWrapper>
                   <AssetIcon
                     size='40px'
-                    src={`chrome://image?${encodeURIComponent(
-                      selectedAsset?.symbolImageUrl ?? ''
-                    )}`}
+                    src={`chrome://image?url=${
+                      selectedAsset?.symbolImageUrl
+                    }&staticEncode=true`}
                   />
                   {tokensNetwork && (
                     <NetworkIconWrapper>

diff --git a/...s/brave_wallet_ui/page/screens/fund-wallet/components/select_currency/select_currency.tsx b/...s/brave_wallet_ui/page/screens/fund-wallet/components/select_currency/select_currency.tsx
@@ -63,9 +63,9 @@ export const CurrencyListItem = ({
         gap='16px'
       >
         <CurrencyImage
-          src={`chrome://image?${encodeURIComponent(
+          src={`chrome://image?url=${encodeURIComponent(
             currency.symbolImageUrl ?? ''
-          )}`}
+          )}&staticEncode=true`}
         />
         <CurrencyName>{currency.name}</CurrencyName>
       </Row>

diff --git a/components/brave_wallet_ui/page/screens/fund-wallet/fund_wallet_v2.tsx b/components/brave_wallet_ui/page/screens/fund-wallet/fund_wallet_v2.tsx
@@ -245,9 +245,9 @@ export const FundWalletScreen = ({ isAndroid }: Props) => {
                             src={
                               isStorybook
                                 ? logoUrl ?? ''
-                                : `chrome://image?${encodeURIComponent(
+                                : `chrome://image?url=${encodeURIComponent(
                                     logoUrl ?? ''
-                                  )}`
+                                  )}&staticEncode=true`
                             }
                           />
                           {paymentMethod.name}

diff --git a/components/brave_wallet_ui/page/screens/swap/swap.utils.ts b/components/brave_wallet_ui/page/screens/swap/swap.utils.ts
@@ -410,7 +410,7 @@ export const getLPIcon = (source: Pick<LiquiditySource, 'name' | 'logo'>) => {
     return iconFromMetadata
   }
   if (source.logo) {
-    return `chrome://image?${encodeURIComponent(source.logo)}`
+    return `chrome://image?url=${encodeURIComponent(source.logo)}&staticEncode=true`
   }
   return ''
 }