2595054428

Committed 01 Jul 2022 07:31AM UTC coverage: 38.872% (+1.2%) from 37.631%

Build Type

github

Committed by GitHub

Commit Message

Merge 389ae6854 into 9ffa01f1a

Pull Request Pull Request #3978: feat: add security feedback when accessing safe apps

Run Details

1601 of 5086 branches covered (31.48%)

Branch coverage included in aggregate %.

166 of 200 new or added lines in 15 files covered. (83.0%)

32 existing lines in 2 files now uncovered.

4299 of 10092 relevant lines covered (42.6%)

38.22 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

30.51

/src/routes/safe/components/Apps/utils.ts

import axios from 'axios'
import memoize from 'lodash/memoize'

import { getContentFromENS } from 'src/logic/wallets/getWeb3'
import appsIconSvg from 'src/assets/icons/apps.svg'
import { FETCH_STATUS } from 'src/utils/requests'
import { SafeAppAccessPolicyTypes } from '@gnosis.pm/safe-react-gateway-sdk'

import { SafeApp } from './types'

type AppManifestIcon = {
  src: string
  sizes: string
  type?: string
  purpose?: string
}

export interface AppManifest {
  name: string
  iconPath?: string
  description: string
  icons?: AppManifestIcon[]
  providedBy: string
}

export const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY'
export const PINNED_SAFE_APP_IDS = 'PINNED_SAFE_APP_IDS'
export const EMPTY_SAFE_APP = 'unknown'
const MIN_ICON_WIDTH = 128
const MANIFEST_ERROR_MESSAGE = 'Manifest does not fulfil the required structure.'

const removeLastTrailingSlash = (url: string): string => {
  return url.replace(/\/+$/, '')
}

export const getAppInfoFromOrigin = (origin: string): { url: string; name: string } | null => {
  try {
    return JSON.parse(origin)
  } catch (error) {
    console.error(`Impossible to parse TX from origin: ${origin}`)
    return null
  }
}

export const isAppManifestValid = (appInfo: AppManifest): boolean =>
  // `appInfo` exists and `name` exists
  !!appInfo?.name &&
  // if `name` exists is not 'unknown'
  appInfo.name !== EMPTY_SAFE_APP &&
  // `description` exists
  !!appInfo.description

export const getEmptySafeApp = (url = ''): SafeApp => {
  return {
    id: Math.random().toString(),
    url,
    name: EMPTY_SAFE_APP,
    iconUrl: appsIconSvg,
    description: '',
    fetchStatus: FETCH_STATUS.LOADING,
    chainIds: [],
    accessControl: {
      type: SafeAppAccessPolicyTypes.NoRestrictions,
    },
    tags: [],
  }
}

export const getAppInfoFromUrl = memoize(async (appUrl: string, validateManifest = true): Promise<SafeApp> => {
  let res = {
    ...getEmptySafeApp(),
    error: true,
    loadingStatus: FETCH_STATUS.ERROR,
  }

  if (!appUrl?.length) {
    return res
  }

  res.url = appUrl.trim()
  const noTrailingSlashUrl = removeLastTrailingSlash(res.url)

  let appInfo: AppManifest | undefined
  try {
    const response = await axios.get<AppManifest>(`${noTrailingSlashUrl}/manifest.json`, { timeout: 5_000 })
    appInfo = response.data
  } catch (error) {
    throw Error('Failed to fetch app manifest')
  }

  // verify imported app fulfil safe requirements
  if (!appInfo || !isAppManifestValid(appInfo)) {
    if (validateManifest) {
      throw Error(`App ${MANIFEST_ERROR_MESSAGE.toLocaleLowerCase()}`)
    } else {
      console.error(`${appInfo.name || 'Safe App'}: ${MANIFEST_ERROR_MESSAGE}`)
    }
  }

  // the DB origin field has a limit of 100 characters
  const originFieldSize = 200
  const jsonDataLength = 20
  const remainingSpace = originFieldSize - res.url.length - jsonDataLength

  const appInfoData = {
    name: appInfo.name,
    iconPath: appInfo.icons?.length ? getAppIcon(appInfo.icons) : appInfo.iconPath,
    description: appInfo.description,
    providedBy: appInfo.providedBy,
  }

  res = {
    ...res,
    ...appInfoData,
    id: JSON.stringify({ url: res.url, name: appInfo.name.substring(0, remainingSpace) }),
    error: false,
    loadingStatus: FETCH_STATUS.SUCCESS,
  }

  const concatenatedImgPath = `${noTrailingSlashUrl}/${appInfoData.iconPath}`
  if (await canLoadAppImage(concatenatedImgPath)) {
    res.iconUrl = concatenatedImgPath
  }

  return res
})

export const getAppIcon = (icons: AppManifestIcon[]): string => {
  const svgIcon = icons.find((icon) => icon?.sizes?.includes('any') || icon?.type === 'image/svg+xml')

  if (svgIcon) {
    return svgIcon.src
  }

  for (const icon of icons) {
    for (const size of icon.sizes.split(' ')) {
      if (Number(size?.split('x')[0]) >= MIN_ICON_WIDTH) {
        return icon.src
      }
    }
  }

  return icons[0].src || ''
}

export const getIpfsLinkFromEns = memoize(async (name: string): Promise<string | undefined> => {
  try {
    const content = await getContentFromENS(name)
    if (content && content.protocolType === 'ipfs') {
      return `${process.env.REACT_APP_IPFS_GATEWAY}/${content.decoded}/`
    }
  } catch (error) {
    console.error(error)
    return
  }
})

export const uniqueApp =
  (appList: SafeApp[]) =>
  (url: string): string | undefined => {
    const newUrl = new URL(url)
    const exists = appList.some((a) => {
      try {
        const currentUrl = new URL(a.url)
        return currentUrl.href === newUrl.href
      } catch (error) {
        console.error('There was a problem trying to validate the URL existence.', error.message)
        return false
      }
    })
    return exists ? 'This app is already registered.' : undefined
  }

const canLoadAppImage = (path: string, timeout = 10000) =>
  new Promise(function (resolve) {
    try {
      const image = new Image()
      image.src = path
      image.addEventListener('load', () => resolve(true))
      image.addEventListener('error', () => resolve(false))

      setTimeout(() => resolve(false), timeout)
    } catch (err) {
      console.error(err)
      resolve(false)
    }
  })

// Some apps still need chain name, as they didn't update to chainId based SDK versions
// With naming changing in the config service some names aren't the expected ones
// Ex: Ethereum -> MAINNET, Gnosis Chain -> XDAI
export const getLegacyChainName = (chainName: string, chainId: string): string => {
  let network = chainName
  switch (chainId) {
    case '1':
      network = 'MAINNET'
      break
    case '100':
      network = 'XDAI'
  }

  return network
}

1	import axios from 'axios'
2	import memoize from 'lodash/memoize'
3
4	import { getContentFromENS } from 'src/logic/wallets/getWeb3'
5	import appsIconSvg from 'src/assets/icons/apps.svg'
6	import { FETCH_STATUS } from 'src/utils/requests'
7	import { SafeAppAccessPolicyTypes } from '@gnosis.pm/safe-react-gateway-sdk'
8
9	import { SafeApp } from './types'
10
11	type AppManifestIcon = {
12	src: string
13	sizes: string
14	type?: string
15	purpose?: string
16	}
17
18	export interface AppManifest {
19	name: string
20	iconPath?: string
21	description: string
22	icons?: AppManifestIcon[]
23	providedBy: string
24	}
25
26	export const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY'	54✔
27	export const PINNED_SAFE_APP_IDS = 'PINNED_SAFE_APP_IDS'	54✔
28	export const EMPTY_SAFE_APP = 'unknown'	54✔
29	const MIN_ICON_WIDTH = 128	54✔
30	const MANIFEST_ERROR_MESSAGE = 'Manifest does not fulfil the required structure.'	54✔
31
32	const removeLastTrailingSlash = (url: string): string => {	54✔
33	return url.replace(/\/+$/, '')	×
34	}
35
36	export const getAppInfoFromOrigin = (origin: string): { url: string; name: string } \| null => {	54✔
NEW 37	try {	×
NEW 38	return JSON.parse(origin)	×
39	} catch (error) {
40	console.error(`Impossible to parse TX from origin: ${origin}`)	×
41	return null	×
42	}
43	}
44
45	export const isAppManifestValid = (appInfo: AppManifest): boolean =>	54✔
46	// `appInfo` exists and `name` exists
47	!!appInfo?.name &&	3✔
48	// if `name` exists is not 'unknown'
49	appInfo.name !== EMPTY_SAFE_APP &&
50	// `description` exists
51	!!appInfo.description
52
53	export const getEmptySafeApp = (url = ''): SafeApp => {	54✔
54	return {	29✔
55	id: Math.random().toString(),
56	url,
57	name: EMPTY_SAFE_APP,
58	iconUrl: appsIconSvg,
59	description: '',
60	fetchStatus: FETCH_STATUS.LOADING,
61	chainIds: [],
62	accessControl: {
63	type: SafeAppAccessPolicyTypes.NoRestrictions,
64	},
65	tags: [],
66	}
67	}
68
69	export const getAppInfoFromUrl = memoize(async (appUrl: string, validateManifest = true): Promise<SafeApp> => {	54!
UNCOV 70	let res = {	×
71	...getEmptySafeApp(),
72	error: true,
73	loadingStatus: FETCH_STATUS.ERROR,
74	}
75
UNCOV 76	if (!appUrl?.length) {	×
UNCOV 77	return res	×
78	}
79
80	res.url = appUrl.trim()	×
81	const noTrailingSlashUrl = removeLastTrailingSlash(res.url)	×
82
83	let appInfo: AppManifest \| undefined
84	try {	×
85	const response = await axios.get<AppManifest>(`${noTrailingSlashUrl}/manifest.json`, { timeout: 5_000 })	×
UNCOV 86	appInfo = response.data	×
87	} catch (error) {
88	throw Error('Failed to fetch app manifest')	×
89	}
90
91	// verify imported app fulfil safe requirements
92	if (!appInfo \|\| !isAppManifestValid(appInfo)) {	×
UNCOV 93	if (validateManifest) {	×
UNCOV 94	throw Error(`App ${MANIFEST_ERROR_MESSAGE.toLocaleLowerCase()}`)	×
95	} else {
96	console.error(`${appInfo.name \|\| 'Safe App'}: ${MANIFEST_ERROR_MESSAGE}`)	×
97	}
98	}
99
100	// the DB origin field has a limit of 100 characters
UNCOV 101	const originFieldSize = 200	×
UNCOV 102	const jsonDataLength = 20	×
UNCOV 103	const remainingSpace = originFieldSize - res.url.length - jsonDataLength	×
104
105	const appInfoData = {	×
106	name: appInfo.name,
107	iconPath: appInfo.icons?.length ? getAppIcon(appInfo.icons) : appInfo.iconPath,	×
108	description: appInfo.description,
109	providedBy: appInfo.providedBy,
110	}
111
UNCOV 112	res = {	×
113	...res,
114	...appInfoData,
115	id: JSON.stringify({ url: res.url, name: appInfo.name.substring(0, remainingSpace) }),
116	error: false,
117	loadingStatus: FETCH_STATUS.SUCCESS,
118	}
119
UNCOV 120	const concatenatedImgPath = `${noTrailingSlashUrl}/${appInfoData.iconPath}`	×
UNCOV 121	if (await canLoadAppImage(concatenatedImgPath)) {	×
UNCOV 122	res.iconUrl = concatenatedImgPath	×
123	}
124
125	return res	×
126	})
127
128	export const getAppIcon = (icons: AppManifestIcon[]): string => {	54✔
129	const svgIcon = icons.find((icon) => icon?.sizes?.includes('any') \|\| icon?.type === 'image/svg+xml')	14✔
130
131	if (svgIcon) {	4✔
132	return svgIcon.src	1✔
133	}
134
135	for (const icon of icons) {	3✔
136	for (const size of icon.sizes.split(' ')) {	8✔
137	if (Number(size?.split('x')[0]) >= MIN_ICON_WIDTH) {	12✔
138	return icon.src	2✔
139	}
140	}
141	}
142
143	return icons[0].src \|\| ''	1!
144	}
145
146	export const getIpfsLinkFromEns = memoize(async (name: string): Promise<string \| undefined> => {	54✔
UNCOV 147	try {	×
UNCOV 148	const content = await getContentFromENS(name)	×
UNCOV 149	if (content && content.protocolType === 'ipfs') {	×
UNCOV 150	return `${process.env.REACT_APP_IPFS_GATEWAY}/${content.decoded}/`	×
151	}
152	} catch (error) {
153	console.error(error)	×
154	return	×
155	}
156	})
157
158	export const uniqueApp =
159	(appList: SafeApp[]) =>	54✔
UNCOV 160	(url: string): string \| undefined => {	×
UNCOV 161	const newUrl = new URL(url)	×
UNCOV 162	const exists = appList.some((a) => {	×
UNCOV 163	try {	×
164	const currentUrl = new URL(a.url)	×
165	return currentUrl.href === newUrl.href	×
166	} catch (error) {
167	console.error('There was a problem trying to validate the URL existence.', error.message)	×
168	return false	×
169	}
170	})
171	return exists ? 'This app is already registered.' : undefined	×
172	}
173
174	const canLoadAppImage = (path: string, timeout = 10000) =>	54!
175	new Promise(function (resolve) {	×
UNCOV 176	try {	×
UNCOV 177	const image = new Image()	×
UNCOV 178	image.src = path	×
179	image.addEventListener('load', () => resolve(true))	×
180	image.addEventListener('error', () => resolve(false))	×
181
182	setTimeout(() => resolve(false), timeout)	×
183	} catch (err) {
184	console.error(err)	×
UNCOV 185	resolve(false)	×
186	}
187	})
188
189	// Some apps still need chain name, as they didn't update to chainId based SDK versions
190	// With naming changing in the config service some names aren't the expected ones
191	// Ex: Ethereum -> MAINNET, Gnosis Chain -> XDAI
192	export const getLegacyChainName = (chainName: string, chainId: string): string => {	54✔
UNCOV 193	let network = chainName	×
UNCOV 194	switch (chainId) {	×
195	case '1':
UNCOV 196	network = 'MAINNET'	×
197	break	×
198	case '100':
UNCOV 199	network = 'XDAI'	×
200	}
201
UNCOV 202	return network	×
203	}

safe-global / safe-react / 2595054428

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous