Fix: do not sandbox safe icon URLs

src/components/safe-apps/SafeAppIconCard/index.test.ts

@@ -0,0 +1,14 @@
+import { _isSafeSrc } from '.'
+
+describe('SafeAppIconCard', () => {
+  it('should detect unsafe src', () => {
+    expect(_isSafeSrc('https://google.com/test.jpg')).toBe(false)
+    expect(_isSafeSrc('data:image/png;base64,')).toBe(false)
+  })
+
+  it('should detect safe src', () => {
+    expect(_isSafeSrc('https://safe-transaction-assets.safe.global/contracts/logos/0x34CfAC646f3.png')).toBe(true)
+    expect(_isSafeSrc('https://safe-transaction-assets.staging.5afe.dev/contracts/logos/0x34CfAC.png')).toBe(true)
+    expect(_isSafeSrc('/images/transactions/incoming.svg')).toBe(true)
+  })
+})

src/components/safe-apps/SafeAppIconCard/index.tsx

@@ -1,3 +1,4 @@
+import ImageFallback from '@/components/common/ImageFallback'
 import { type ReactElement, memo } from 'react'
 
 const APP_LOGO_FALLBACK_IMAGE = `/images/apps/app-placeholder.svg`
@@ -16,6 +17,22 @@ const getIframeContent = (url: string, width: number, height: number, fallback:
   `
 }
 
+export const _isSafeSrc = (src: string) => {
+  const allowedHosts = ['.safe.global', '.5afe.dev']
+  const isRelative = src.startsWith('/')
+
+  let hostname = ''
+  if (!isRelative) {
+    try {
+      hostname = new URL(src).hostname
+    } catch (e) {
+      return false
+    }
+  }
+
+  return isRelative || allowedHosts.some((host) => hostname.endsWith(host))
+}
+
 const SafeAppIconCard = ({
   src,
   alt,
@@ -29,6 +46,10 @@ const SafeAppIconCard = ({
   height?: number
   fallback?: string
 }): ReactElement => {
+  if (_isSafeSrc(src)) {
+    return <ImageFallback src={src} alt={alt} width={width} height={height} fallbackSrc={fallback} />
+  }
+
   return (
     <iframe
       title={alt}