fix(sanitiseUrl): fix limitations with library

src/templates/contact-us/ContactsSection.jsx

@@ -1,10 +1,10 @@
-import { sanitizeUrl } from "@braintree/sanitize-url"
 import DOMPurify from "dompurify"
 import PropTypes from "prop-types"
 import { forwardRef } from "react"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
+import { sanitiseTemplateUrl } from "templates/utils/sanitiseTemplateUrl"
 import { getClassNames } from "templates/utils/stylingUtils"
 
 const Contact = forwardRef(({ contact }, ref) => (
@@ -30,7 +30,7 @@ const Contact = forwardRef(({ contact }, ref) => (
               ])}
             >
               <a
-                href={sanitizeUrl(`tel:${d[key].replace(/\s/g, "")}`)}
+                href={sanitiseTemplateUrl(`tel:${d[key].replace(/\s/g, "")}`)}
                 onClick={(event) => event.preventDefault()}
               >
                 <u>{d[key]}</u>
@@ -47,7 +47,7 @@ const Contact = forwardRef(({ contact }, ref) => (
               ])}
             >
               <a
-                href={sanitizeUrl(`mailto:${d[key]}`)}
+                href={sanitiseTemplateUrl(`mailto:${d[key]}`)}
                 onClick={(event) => event.preventDefault()}
               >
                 <u>{d[key]}</u>

src/templates/contact-us/FeedbackSection.jsx

@@ -1,9 +1,9 @@
-import { sanitizeUrl } from "@braintree/sanitize-url"
 import PropTypes from "prop-types"
 import { forwardRef } from "react"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
+import { sanitiseTemplateUrl } from "templates/utils/sanitiseTemplateUrl"
 import { getClassNames } from "templates/utils/stylingUtils"
 
 const TemplateFeedbackSection = forwardRef(({ feedback }, ref) => (
@@ -38,7 +38,7 @@ const TemplateFeedbackSection = forwardRef(({ feedback }, ref) => (
             If you have a query, feedback or wish to report a problem related to
             this website, please fill in the{" "}
             <a
-              href={sanitizeUrl(feedback)}
+              href={sanitiseTemplateUrl(feedback)}
               rel="noopener noreferrer"
               target="_blank"
               onClick={(event) => event.preventDefault()}

src/templates/contact-us/LocationsSection.jsx

@@ -1,9 +1,9 @@
-import { sanitizeUrl } from "@braintree/sanitize-url"
 import PropTypes from "prop-types"
 import { forwardRef } from "react"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
+import { sanitiseTemplateUrl } from "templates/utils/sanitiseTemplateUrl"
 import { getClassNames } from "templates/utils/stylingUtils"
 
 const LocationHours = ({ operatingHours }) => (
@@ -38,8 +38,8 @@ const LocationAddress = ({ location }) => (
       <a
         href={
           location.maps_link
-            ? sanitizeUrl(location.maps_link)
-            : sanitizeUrl(
+            ? sanitiseTemplateUrl(location.maps_link)
+            : sanitiseTemplateUrl(
                 `https://maps.google.com/?q=${location.address
                   .join("+")
                   .replace(/\s/g, "+")}`

src/templates/utils/sanitiseTemplateUrl.ts

@@ -0,0 +1,14 @@
+import { sanitizeUrl } from "@braintree/sanitize-url"
+
+export function sanitiseTemplateUrl(userUrl: string): string {
+  const allowedProtocols = ["mailto:", "https:", "tel:"]
+  try {
+    const url = new URL(userUrl)
+    if (allowedProtocols.includes(url.protocol)) {
+      return sanitizeUrl(url.href)
+    }
+  } catch (e) {
+    return "about:blank"
+  }
+  return "about:blank"
+}