Treat mailto: protocol as special

Remove "mailto:" from the list of valid protocols, because it can be unsafe to click on mailto links. Instead, provide a special "emailAccepted" when we know that the link is coming from a safe source, like our code.
oasisprotocol · Feb 21, 2024 · 2a22b11 · 2a22b11
1 parent 7034e31
commit 2a22b11
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 3 deletions.
diff --git a/.changelog/1285.trivial.md b/.changelog/1285.trivial.md
@@ -0,0 +1 @@
+Various small cleanups
diff --git a/src/app/components/Snapshots/SnapshotCardExternalLink.tsx b/src/app/components/Snapshots/SnapshotCardExternalLink.tsx
@@ -21,6 +21,7 @@ type SnapshotCardExternalLinkProps = {
   label?: string
   title: string
   url?: string
+  emailAccepted?: boolean
 }
 
 export const SnapshotCardExternalLink: FC<SnapshotCardExternalLinkProps> = ({
@@ -40,7 +41,7 @@ export const SnapshotCardExternalLink: FC<SnapshotCardExternalLinkProps> = ({
         >
           {description}
         </Typography>
-        {url && hasValidProtocol(url) && (
+        {url && (hasValidProtocol(url) || url.startsWith('mailto:')) && (
           <Button href={url} target="_blank" rel="noopener noreferrer" color="secondary" variant="outlined">
             {label}
           </Button>

diff --git a/src/app/pages/ParatimeDashboardPage/TestnetFaucet.tsx b/src/app/pages/ParatimeDashboardPage/TestnetFaucet.tsx
@@ -22,6 +22,7 @@ export const TestnetFaucet: FC<TestnetFaucetProps> = ({ network, layer, ticker }
       label={t('testnetFaucet.request')}
       title={t('testnetFaucet.header')}
       url={link}
+      emailAccepted={true}
     />
   ) : null
 }
diff --git a/src/app/pages/ValidatorDetailsPage/ExternalLinkCard.tsx b/src/app/pages/ValidatorDetailsPage/ExternalLinkCard.tsx
@@ -4,9 +4,10 @@ import { SnapshotCardExternalLink } from 'app/components/Snapshots/SnapshotCardE
 
 type ExternalLinkCardProps = {
   link?: string
+  emailAccepted?: boolean
 }
 
-export const ExternalLinkCard: FC<ExternalLinkCardProps> = ({ link }) => {
+export const ExternalLinkCard: FC<ExternalLinkCardProps> = ({ link, emailAccepted }) => {
   const { t } = useTranslation()
 
   return (
@@ -15,6 +16,7 @@ export const ExternalLinkCard: FC<ExternalLinkCardProps> = ({ link }) => {
       label={link}
       title={t('validator.externalLink')}
       url={link}
+      emailAccepted={emailAccepted}
     />
   )
 }
diff --git a/src/app/utils/url.ts b/src/app/utils/url.ts
@@ -1,4 +1,4 @@
-const validProtocols = ['http:', 'https:', 'ftp:', 'ipfs:', 'data:', 'mailto:']
+const validProtocols = ['http:', 'https:', 'ftp:', 'ipfs:', 'data:']
 
 export const hasValidProtocol = (url: string | undefined): boolean => {
   if (!url) {