fix(ui): url sanitization link popover (#20)

* fix(ui): url sanitization link popover

* chore(deps): bump package version

Author: Aslam97

apps/web/src/components/tiptap-ui/link-popover/link-popover.tsx

@@ -11,7 +11,7 @@ import { LinkIcon } from "@/components/tiptap-icons/link-icon"
 import { TrashIcon } from "@/components/tiptap-icons/trash-icon"
 
 // --- Lib ---
-import { isMarkInSchema } from "@/lib/tiptap-utils"
+import { isMarkInSchema, sanitizeUrl } from "@/lib/tiptap-utils"
 
 // --- UI Primitives ---
 import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
@@ -151,6 +151,15 @@ const LinkMain: React.FC<LinkMainProps> = ({
     }
   }
 
+  const handleOpenLink = () => {
+    if (!url) return
+
+    const safeUrl = sanitizeUrl(url, window.location.href)
+    if (safeUrl !== "#") {
+      window.open(safeUrl, "_blank", "noopener,noreferrer")
+    }
+  }
+
   return (
     <>
       <input
@@ -182,7 +191,7 @@ const LinkMain: React.FC<LinkMainProps> = ({
       <div className="tiptap-button-group" data-orientation="horizontal">
         <Button
           type="button"
-          onClick={() => window.open(url, "_blank")}
+          onClick={handleOpenLink}
           title="Open in new window"
           disabled={!url && !isActive}
           data-style="ghost"

apps/web/src/lib/tiptap-utils.ts

@@ -208,3 +208,83 @@ export const convertFileToBase64 = (
     reader.readAsDataURL(file)
   })
 }
+
+type ProtocolOptions = {
+  /**
+   * The protocol scheme to be registered.
+   * @default '''
+   * @example 'ftp'
+   * @example 'git'
+   */
+  scheme: string
+
+  /**
+   * If enabled, it allows optional slashes after the protocol.
+   * @default false
+   * @example true
+   */
+  optionalSlashes?: boolean
+}
+
+type ProtocolConfig = Array<ProtocolOptions | string>
+
+const ATTR_WHITESPACE =
+  // eslint-disable-next-line no-control-regex
+  /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g
+
+export function isAllowedUri(
+  uri: string | undefined,
+  protocols?: ProtocolConfig
+) {
+  const allowedProtocols: string[] = [
+    "http",
+    "https",
+    "ftp",
+    "ftps",
+    "mailto",
+    "tel",
+    "callto",
+    "sms",
+    "cid",
+    "xmpp",
+  ]
+
+  if (protocols) {
+    protocols.forEach((protocol) => {
+      const nextProtocol =
+        typeof protocol === "string" ? protocol : protocol.scheme
+
+      if (nextProtocol) {
+        allowedProtocols.push(nextProtocol)
+      }
+    })
+  }
+
+  return (
+    !uri ||
+    uri.replace(ATTR_WHITESPACE, "").match(
+      new RegExp(
+        // eslint-disable-next-line no-useless-escape
+        `^(?:(?:${allowedProtocols.join("|")}):|[^a-z]|[a-z0-9+.\-]+(?:[^a-z+.\-:]|$))`,
+        "i"
+      )
+    )
+  )
+}
+
+export function sanitizeUrl(
+  inputUrl: string,
+  baseUrl: string,
+  protocols?: ProtocolConfig
+): string {
+  try {
+    const url = new URL(inputUrl, baseUrl)
+
+    if (isAllowedUri(url.href, protocols)) {
+      return url.href
+    }
+  } catch {
+    // If URL creation fails, it's considered invalid
+  }
+  return "#"
+}

package.json

@@ -13,8 +13,8 @@
   },
   "devDependencies": {
     "eslint": "^8.57.1",
-    "prettier": "^3.5.3",
-    "turbo": "^2.5.3"
+    "prettier": "^3.6.1",
+    "turbo": "^2.5.4"
   },
   "packageManager": "[email protected]"
 }