Skip to content

Commit

Permalink
fix: fix infura key displayed (#8744)
Browse files Browse the repository at this point in the history 
## **Description**

We are exposing our network API keys in the network verification
details. Exposing API keys should be avoided due to their significant
security risks.

To reproduce:
Go to networks view
Proceed to add any infura supported network from the popular network
list. Polygon is a good example.
Notice in the network approval modal the Infura API key is exposed in
the Network URL field.

## **Related issues**

Fixes: [#1574](MetaMask/mobile-planning#1574)

## **Manual testing steps**

1. Go to the add network page
2. Choose polygon and click on add
3. A modal will be displayed, scroll down to see the RPC Url
4. Infura url should not display the api key

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**


![before](https://github.com/MetaMask/metamask-mobile/assets/26223211/1faf9b53-9a2c-4a73-96c4-8273ac899b59)

### **After**
<img width="439" alt="Screenshot 2024-02-27 at 13 18 42"
src="https://github.com/MetaMask/metamask-mobile/assets/26223211/4987d957-161f-47f0-81e2-76b8b28e11f8">


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [x] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
  • Loading branch information
@salimtb
salimtb authored Feb 27, 2024
1 parent f11f359 commit 5fe71b8
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 38 deletions.
27 changes: 16 additions & 11 deletions app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,27 +234,32 @@ exports[`NetworkDetails renders correctly 1`] = `
<View
style={
Object {
"backgroundColor": "#FFFFFF",
"alignItems": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 8,
"borderWidth": 1,
"height": 16,
"justifyContent": "center",
"overflow": "hidden",
"width": 16,
}
}
>
<Image
onError={[Function]}
resizeMode="contain"
source="image"
<Text
accessibilityRole="text"
style={
Object {
"flex": 1,
"height": undefined,
"width": undefined,
"color": "#24272A",
"fontFamily": "Euclid Circular B",
"fontSize": 10,
"fontWeight": "400",
"letterSpacing": 0,
"lineHeight": undefined,
}
}
testID="network-avatar-image"
/>
>
T
</Text>
</View>
<Text
accessibilityRole="text"
Expand Down Expand Up @@ -420,7 +425,7 @@ exports[`NetworkDetails renders correctly 1`] = `
}
}
>
https://localhost:8545
https:/
</Text>
<TouchableOpacity
activeOpacity={0.5}
Expand Down
24 changes: 20 additions & 4 deletions app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable react/prop-types */
import React, { useCallback, useEffect, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { View, Linking } from 'react-native';
import { strings } from '../../../../locales/i18n';
import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors';
Expand Down Expand Up @@ -28,8 +28,12 @@ import BottomSheetFooter, {
ButtonsAlignment,
} from '../../../component-library/components/BottomSheets/BottomSheetFooter';
import BottomSheetHeader from '../../../component-library/components/BottomSheets/BottomSheetHeader';
import { toggleUseSafeChainsListValidation } from '../../../util/networks';
import {
getNetworkImageSource,
toggleUseSafeChainsListValidation,
} from '../../../util/networks';
import { NetworkApprovalModalSelectorsIDs } from '../../../../e2e/selectors/Modals/NetworkApprovalModal.selectors';
import hideKeyFromUrl from '../../../util/hideKeyFromUrl';

interface Alert {
alertError: string;
Expand Down Expand Up @@ -67,6 +71,15 @@ const NetworkVerificationInfo = ({

useEffect(() => setAlerts(alertsFromProps), [alertsFromProps]);

const networkImageSource = useMemo(
() =>
//@ts-expect-error - The utils/network file is still JS and this function expects a networkType, and should be optional
getNetworkImageSource({
chainId: customNetworkInformation.chainId,
}),
[customNetworkInformation],
);

const renderNetworkInfo = () => (
<ScrollView
nestedScrollEnabled
Expand Down Expand Up @@ -98,7 +111,9 @@ const NetworkVerificationInfo = ({
<Text variant={TextVariant.BodyMDBold}>
{strings('add_custom_network.network_url')}
</Text>
<Text style={styles.textSection}>{customNetworkInformation.rpcUrl}</Text>
<Text style={styles.textSection}>
{hideKeyFromUrl(customNetworkInformation.rpcUrl)}
</Text>

<Accordion
title={strings('spend_limit_edition.view_details')}
Expand Down Expand Up @@ -149,6 +164,7 @@ const NetworkVerificationInfo = ({
const renderAlerts = useCallback(() => {
if (!safeChainsListValidationEnabled) return null;
if (!alerts.length) return null;

return alerts.map(
(
networkAlert: {
Expand Down Expand Up @@ -229,7 +245,7 @@ const NetworkVerificationInfo = ({
</BottomSheetHeader>
<ScrollView style={styles.root}>
<PickerNetwork
imageSource={customNetworkInformation.icon}
imageSource={networkImageSource}
label={customNetworkInformation.chainName}
style={styles.networkSection}
disabled
Expand Down
27 changes: 16 additions & 11 deletions ...components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,27 +93,32 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
<View
style={
Object {
"backgroundColor": "#FFFFFF",
"alignItems": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 8,
"borderWidth": 1,
"height": 16,
"justifyContent": "center",
"overflow": "hidden",
"width": 16,
}
}
>
<Image
onError={[Function]}
resizeMode="contain"
source="test-icon"
<Text
accessibilityRole="text"
style={
Object {
"flex": 1,
"height": undefined,
"width": undefined,
"color": "#24272A",
"fontFamily": "Euclid Circular B",
"fontSize": 10,
"fontWeight": "400",
"letterSpacing": 0,
"lineHeight": undefined,
}
}
testID="network-avatar-image"
/>
>
T
</Text>
</View>
<Text
accessibilityRole="text"
Expand Down Expand Up @@ -379,7 +384,7 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
}
}
>
http://test.com
http:/
</Text>
<TouchableOpacity
activeOpacity={0.5}
Expand Down
27 changes: 16 additions & 11 deletions app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1062,27 +1062,32 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing
<View
style={
Object {
"backgroundColor": "#FFFFFF",
"alignItems": "center",
"backgroundColor": "#F2F4F6",
"borderRadius": 8,
"borderWidth": 1,
"height": 16,
"justifyContent": "center",
"overflow": "hidden",
"width": 16,
}
}
>
<Image
onError={[Function]}
resizeMode="contain"
source="https://static.metafi.codefi.network/api/v1/tokenIcons/42220/0x471ece3750da237f93b8e339c536989b8978a438.png"
<Text
accessibilityRole="text"
style={
Object {
"flex": 1,
"height": undefined,
"width": undefined,
"color": "#24272A",
"fontFamily": "Euclid Circular B",
"fontSize": 10,
"fontWeight": "400",
"letterSpacing": 0,
"lineHeight": undefined,
}
}
testID="network-avatar-image"
/>
>
C
</Text>
</View>
<Text
accessibilityRole="text"
Expand Down Expand Up @@ -1248,7 +1253,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing
}
}
>
https://evm.cronos.org
https:/
</Text>
<TouchableOpacity
activeOpacity={0.5}
Expand Down
26 changes: 26 additions & 0 deletions app/core/RPCMethods/networkChecker.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,32 @@ describe('checkSafeNetwork', () => {
]);
});

it('should not return an error if the rpcUrl is not matched but its infura', async () => {
mockedAxios.get.mockImplementation(() =>
Promise.resolve({
data: [
{
chainId: '137',
rpc: ['http://localhost:8545'],
name: 'Test',
nativeCurrency: {
symbol: 'MATIC',
decimals: 18,
},
},
],
}),
);

const alerts = await checkSafeNetwork(
'137',
'https://polygon-mainnet.infura.io/v3/test',
'Test',
'MATIC',
);
expect(alerts).toEqual([]);
});

it('should return a warning if the decimals is not matched', async () => {
mockedAxios.get.mockImplementation(() =>
Promise.resolve({
Expand Down
10 changes: 9 additions & 1 deletion app/core/RPCMethods/networkChecker.util.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import axios from 'axios';
import { BannerAlertSeverity } from '../../component-library/components/Banners/Banner';
import { strings } from '../../../locales/i18n';
import PopularList from '../../util/networks/customNetworks';

const findPopularNetwork = (rpcUrl: string) =>
PopularList.some((network) => {
const { origin } = new URL(network.rpcUrl);
return origin === rpcUrl;
});

const checkSafeNetwork = async (
chainIdDecimal: string,
Expand All @@ -23,7 +30,8 @@ const checkSafeNetwork = async (
if (
!matchedChain.rpc
?.map((rpc: string) => new URL(rpc).origin)
.includes(origin)
.includes(origin) &&
!findPopularNetwork(origin)
) {
alerts.push({
alertError: strings('add_custom_network.invalid_rpc_url'),
Expand Down

0 comments on commit 5fe71b8

Please sign in to comment.