Merge pull request #1965 from oasisprotocol/lw/sanitize-rofl-link

Sanitize URL in metadata['net.oasis.rofl.repository']

Author: lukaw3d

.changelog/1965.bugfix.md

@@ -0,0 +1 @@
+Sanitize URL in metadata['net.oasis.rofl.repository']

src/app/components/Snapshots/SnapshotCardExternalLink.tsx

@@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
 import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
 import { COLORS } from '../../../styles/theme/colors'
-import { hasValidProtocol } from 'app/utils/url'
+import { isUrlSafe } from 'app/utils/url'
 
 const StyledBox = styled(Box)(({ theme }) => ({
   gap: theme.spacing(5),
@@ -40,7 +40,7 @@ export const SnapshotCardExternalLink: FC<SnapshotCardExternalLinkProps> = ({
         >
           {description}
         </Typography>
-        {url && hasValidProtocol(url) && (
+        {url && isUrlSafe(url) && (
           <Button href={url} target="_blank" rel="noopener noreferrer" color="secondary" variant="outlined">
             {label}
           </Button>

src/app/components/Validators/ValidatorImage.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { styled } from '@mui/material/styles'
 import ImageNotSupportedIcon from '@mui/icons-material/ImageNotSupported'
-import { hasValidProtocol } from '../../utils/url'
+import { isUrlSafe } from '../../utils/url'
 import { COLORS } from 'styles/theme/colors'
 import { Circle } from '../Circle'
 
@@ -20,7 +20,7 @@ type ValidatorImageProps = {
 export const ValidatorImage: FC<ValidatorImageProps> = ({ address, name, logotype }) => {
   return (
     <>
-      {logotype && hasValidProtocol(logotype) ? (
+      {logotype && isUrlSafe(logotype) ? (
         <StyledImage alt={name || address} src={logotype} />
       ) : (
         <Circle color={COLORS.grayMedium2} size={5}>

src/app/data/oasis-account-names.ts

@@ -19,7 +19,7 @@ import {
 import { hasTextMatch } from '../components/HighlightedText/text-matching'
 import * as externalLinks from '../utils/externalLinks'
 import { getOasisAddress } from '../utils/helpers'
-import { hasValidProtocol } from '../utils/url'
+import { isUrlSafe } from '../utils/url'
 
 const dataSources: Record<Network, Partial<Record<Layer, string>>> = {
   [Network.mainnet]: {
@@ -57,9 +57,9 @@ const getOasisAccountsMetadata = async (network: Network, layer: Layer): Promise
       name: entry.Name,
       description: entry.Description,
       origin: entry.Origin,
-      icon: entry.Icon && hasValidProtocol(entry.Icon) ? entry.Icon : undefined,
+      icon: entry.Icon && isUrlSafe(entry.Icon) ? entry.Icon : undefined,
       dapp:
-        entry.Dapp && hasValidProtocol(entry.Dapp.Url)
+        entry.Dapp && isUrlSafe(entry.Dapp.Url)
           ? {
               button: entry.Dapp.Button,
               description: entry.Dapp.Description,

src/app/pages/NFTInstanceDashboardPage/InstanceImageCard.tsx

@@ -12,7 +12,7 @@ import OpenInFullIcon from '@mui/icons-material/OpenInFull'
 import { styled } from '@mui/material/styles'
 import { EvmNft } from 'oasis-nexus/api'
 import { processNftImageUrl } from '../../utils/nft-images'
-import { hasValidProtocol } from '../../utils/url'
+import { isUrlSafe } from '../../utils/url'
 import { COLORS } from '../../../styles/theme/colors'
 import { ImagePreview } from '../../components/ImagePreview'
 import { NoPreview } from '../../components/NoPreview'
@@ -113,15 +113,15 @@ export const InstanceImageCard: FC<InstanceImageCardProps> = ({ isFetched, isLoa
                 }}
               >
                 <NoPreview placeholderSize={imageSize} />
-                {hasValidProtocol(nft.image) && (
+                {isUrlSafe(nft.image) && (
                   <Link href={nft.image} rel="noopener noreferrer" target="_blank">
                     {t('nft.openInNewTab')}
                   </Link>
                 )}
               </Box>
             </Box>
           )}
-          {isFetched && nft && hasValidProtocol(nft.image) && !imageLoadError && (
+          {isFetched && nft && isUrlSafe(nft.image) && !imageLoadError && (
             <>
               <Box
                 sx={{

src/app/pages/RoflAppDetailsPage/MetaDataCard.tsx

@@ -13,6 +13,7 @@ import { RoflAppMetadata } from '../../../oasis-nexus/api'
 import { COLORS } from '../../../styles/theme/colors'
 import { EmptyStateCard } from './EmptyStateCard'
 import { GridRow } from './GridRow'
+import { isUrlSafe } from '../../utils/url'
 
 export const StyledLink = styled(Link)(() => ({
   display: 'inline-flex',
@@ -73,7 +74,7 @@ export const MetaDataCard: FC<MetaDataCardProps> = ({ isFetched, metadata }) =>
                   />
                 }
               >
-                {metadata['net.oasis.rofl.repository'] ? (
+                {isUrlSafe(metadata['net.oasis.rofl.repository']) ? (
                   <StyledLink
                     href={metadata['net.oasis.rofl.repository']}
                     rel="noopener noreferrer"

src/app/pages/TokenDashboardPage/ImageListItemImage.tsx

@@ -6,7 +6,7 @@ import Link from '@mui/material/Link'
 import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'
 import { styled } from '@mui/material/styles'
 import { processNftImageUrl } from 'app/utils/nft-images'
-import { hasValidProtocol } from 'app/utils/url'
+import { isUrlSafe } from 'app/utils/url'
 import { NoPreview } from '../../components/NoPreview'
 import { getNftInstanceLabel } from '../../utils/nft'
 import { EvmNft } from '../../../oasis-nexus/api'
@@ -62,7 +62,7 @@ export const ImageListItemImage: FC<ImageListItemImageProps> = ({ instance, to }
 
   return (
     <Link component={RouterLink} to={to} sx={{ display: 'flex', position: 'relative' }}>
-      {hasValidProtocol(instance.image) && !imageLoadError ? (
+      {isUrlSafe(instance.image) && !imageLoadError ? (
         <StyledImage
           onError={() => setImageLoadError(true)}
           src={processNftImageUrl(instance.image)}

src/app/utils/nft-images.ts

@@ -1,9 +1,9 @@
 import { AppError, AppErrors } from 'types/errors'
 import { accessIpfsUrl } from './ipfs'
-import { hasValidProtocol } from './url'
+import { isUrlSafe } from './url'
 
 export const processNftImageUrl = (url: string | undefined): string => {
-  if (!url || !hasValidProtocol(url)) {
+  if (!url || !isUrlSafe(url)) {
     throw new AppError(AppErrors.InvalidUrl)
   }
 

src/app/utils/url.ts

@@ -2,7 +2,8 @@
 // `ftp://` is obsolete https://chromestatus.com/feature/6199005675520000
 const validProtocols = ['http:', 'https:', 'ftp:', 'ipfs:', 'data:', 'mailto:']
 
-export const hasValidProtocol = (url: string | undefined): boolean => {
+/** Blocks dangerous URLs that start with "javascript:". When we upgrade to React@19 that should block them too. */
+export const isUrlSafe = (url: string | undefined): boolean => {
   if (!url) {
     return false
   }