add encodeURIComponent for WebUI data URLs in brave_wallet_ui components

It seems we shouldn't be updating chrome://favicon or brave://wallet URIs, so this is an updated commit that addresses just the limited set of URIs that require encodedURIComponents usage.
brave · Feb 19, 2025 · f4eb43e · f4eb43e
1 parent 0f4c61d
commit f4eb43e
Show file tree

Hide file tree

Showing 14 changed files with 25 additions and 19 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/${token.logo}`
+      : `chrome://erc-token-images/${encodeURIComponent(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/${logo}`
+                request.token.logo = `chrome://erc-token-images/${encodeURIComponent(logo)}`
               } catch {
                 request.token = {
                   ...request.token,
-                  logo: `chrome://erc-token-images/${logo}`
+                  logo: `chrome://erc-token-images/${encodeURIComponent(logo)}`
                 }
               }
             }

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?${dapp.logo}`}
+            src={`chrome://image?${encodeURIComponent(dapp.logo)}`}
             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?${dapp.logo}`}
+              src={`chrome://image?${encodeURIComponent(dapp.logo)}`}
               width={72}
               height={72}
             />

diff --git a/...brave_wallet_ui/components/shared/authorize-hardware-device/authorize-hardware-device.tsx b/...brave_wallet_ui/components/shared/authorize-hardware-device/authorize-hardware-device.tsx
@@ -32,7 +32,7 @@ export const AuthorizeHardwareDeviceIFrame = (props: Props) => {
   const src =
     LEDGER_BRIDGE_URL +
     `?targetUrl=${encodeURIComponent(window.origin)}` +
-    `&bridgeType=${bridgeTypeFromCoin(props.coinType)}`
+    `&bridgeType=${encodeURIComponent(bridgeTypeFromCoin(props.coinType))}`
   return (
     <StyledIFrame
       src={src}

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
@@ -124,7 +124,7 @@ export const CreateNetworkIcon = ({ network, marginRight, size }: Props) => {
     >
       <NetworkIcon
         size={size}
-        icon={isRemoteURL ? `chrome://image?${networkImageURL}` : networkIcon}
+        icon={isRemoteURL ? `chrome://image?${encodeURIComponent(networkImageURL)}` : 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
@@ -118,7 +118,7 @@ export function withPlaceholderIcon<
 
     const remoteImage = React.useMemo(() => {
       if (isRemoteURL) {
-        return isStorybook ? tokenImageURL || '' : `chrome://image?${tokenImageURL}`
+        return isStorybook ? tokenImageURL || '' : `chrome://image?${encodeURIComponent(tokenImageURL)}`
       }
       return ''
     }, [isRemoteURL, tokenImageURL])

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
@@ -54,7 +54,7 @@ export const NftIcon = (props: NftIconProps) => {
   const nftIframeUrl = React.useMemo(() => {
     const urlParams = new URLSearchParams({
       displayMode: 'icon',
-      icon: encodeURI(remoteImage || '')
+      icon: encodeURIComponent(remoteImage || '')
     })
     return `chrome-untrusted://nft-display?${urlParams.toString()}`
   }, [remoteImage])

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?${providerImageUrl}`} />
+            <ProviderImage src={`chrome://image?${encodeURIComponent(providerImageUrl)}`} />
           ) : 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?${symbolImageUrl}`} />
+            <AssetImage src={`chrome://image?${encodeURIComponent(symbolImageUrl ?? '')}`} />
             <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,7 +75,9 @@ export const SelectAssetButton = (props: SelectAssetButtonProps) => {
                 <IconsWrapper>
                   <AssetIcon
                     size='40px'
-                    src={`chrome://image?${selectedAsset?.symbolImageUrl}`}
+                    src={`chrome://image?${encodeURIComponent(
+                      selectedAsset?.symbolImageUrl ?? ''
+                    )}`}
                   />
                   {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
@@ -62,7 +62,11 @@ export const CurrencyListItem = ({
         justifyContent='flex-start'
         gap='16px'
       >
-        <CurrencyImage src={`chrome://image?${currency.symbolImageUrl}`} />
+        <CurrencyImage
+          src={`chrome://image?${encodeURIComponent(
+            currency.symbolImageUrl ?? ''
+          )}`}
+        />
         <CurrencyName>{currency.name}</CurrencyName>
       </Row>
       <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
@@ -222,9 +222,7 @@ export const FundWalletScreen = ({ isAndroid }: Props) => {
                 </Dropdown>
                 <Dropdown
                   value={selectedPaymentMethod.paymentMethod}
-                  onChange={(detail) =>
-                    onSelectPaymentMethod(detail.value!)
-                  }
+                  onChange={(detail) => onSelectPaymentMethod(detail.value!)}
                   disabled={
                     isFetchingFirstTimeQuotes || isLoadingPaymentMethods
                   }
@@ -246,8 +244,10 @@ export const FundWalletScreen = ({ isAndroid }: Props) => {
                           <PaymentMethodIcon
                             src={
                               isStorybook
-                                ? logoUrl
-                                : `chrome://image?${logoUrl}`
+                                ? logoUrl ?? ''
+                                : `chrome://image?${encodeURIComponent(
+                                    logoUrl ?? ''
+                                  )}`
                             }
                           />
                           {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?${source.logo}`
+    return `chrome://image?${encodeURIComponent(source.logo)}`
   }
   return ''
 }