AB Fix Link elements using Custom URL with protocols like mailto

changelog/entries/unreleased/breaking_change/2642_only_the_following_custom_url_protocols_are_allowed_ftp_http.json

@@ -0,0 +1,7 @@
+{
+    "type": "breaking_change",
+    "message": "In the Application Builder, when using a Custom URL in a Link element the Destination URL is no longer automatically prefixed with https://. Additionally, only these protocols are allowed in the Destination URL: ftp, ftps, ftpes, http, https, mailto, sftp, sms, and tel.",
+    "issue_number": 2642,
+    "bullet_points": [],
+    "created_at": "2024-05-30"
+}

changelog/entries/unreleased/bug/2642_custom_url_with_mailto_sms_and_tel_protocols.json

@@ -0,0 +1,7 @@
+{
+    "type": "bug",
+    "message": "Ensure Link elements work with Custom URL protocols like mailto, sms, or tel.",
+    "issue_number": 2642,
+    "bullet_points": [],
+    "created_at": "2024-05-28"
+}

web-frontend/modules/builder/enums.js

@@ -22,6 +22,18 @@ export const PAGE_PARAM_TYPE_VALIDATION_FUNCTIONS = {
   text: ensureNonEmptyString,
 }
 
+export const ALLOWED_LINK_PROTOCOLS = [
+  'ftp:',
+  'ftps:',
+  'ftpes:',
+  'http:',
+  'https:',
+  'mailto:',
+  'sftp:',
+  'sms:',
+  'tel:',
+]
+
 export const TEXT_FORMAT_TYPES = {
   PLAIN: 'plain',
   MARKDOWN: 'markdown',

web-frontend/modules/builder/utils/urlResolution.js

@@ -1,5 +1,8 @@
 import { compile } from 'path-to-regexp'
-import { PAGE_PARAM_TYPE_VALIDATION_FUNCTIONS } from '@baserow/modules/builder/enums'
+import {
+  ALLOWED_LINK_PROTOCOLS,
+  PAGE_PARAM_TYPE_VALIDATION_FUNCTIONS,
+} from '@baserow/modules/builder/enums'
 import { ensureString } from '@baserow/modules/core/utils/validator'
 
 /**
@@ -56,10 +59,20 @@ export default function resolveElementUrl(
     element.navigation_type,
     editorMode
   )
-  const protocolRegex = /^[a-zA-Z]+:\/\//
-  if (!resolvedUrl.startsWith('/') && !protocolRegex.test(resolvedUrl)) {
-    resolvedUrl = `https://${resolvedUrl}`
+
+  // If the protocol is a supported one, return early.
+  const protocolRegex = /^[A-Za-z]+:/
+  if (protocolRegex.test(resolvedUrl)) {
+    for (const protocol of ALLOWED_LINK_PROTOCOLS) {
+      if (resolvedUrl.toLowerCase().startsWith(protocol)) {
+        return resolvedUrl
+      }
+    }
+
+    // Disallow unsupported protocols, e.g. `javascript:`
+    return ''
   }
+
   return resolvedUrl
 }