Handle all permitted url schemes in linkify (#11215)

* Handle all permitted url schemes in linkify

* Correctly handle optional slash protocols

* Iterate

Author: t3chguy

src/HtmlUtils.tsx

@@ -42,6 +42,7 @@ import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks"
 import { getEmojiFromUnicode } from "./emoji";
 import { mediaFromMxc } from "./customisations/Media";
 import { stripHTMLReply, stripPlainReply } from "./utils/Reply";
+import { PERMITTED_URL_SCHEMES } from "./utils/UrlUtils";
 
 // Anything outside the basic multilingual plane will be a surrogate pair
 const SURROGATE_PAIR_PATTERN = /([\ud800-\udbff])([\udc00-\udfff])/;
@@ -58,34 +59,6 @@ const BIGEMOJI_REGEX = new RegExp(`^(${EMOJIBASE_REGEX.source})+$`, "i");
 
 const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
 
-export const PERMITTED_URL_SCHEMES = [
-    "bitcoin",
-    "ftp",
-    "geo",
-    "http",
-    "https",
-    "im",
-    "irc",
-    "ircs",
-    "magnet",
-    "mailto",
-    "matrix",
-    "mms",
-    "news",
-    "nntp",
-    "openpgp4fpr",
-    "sip",
-    "sftp",
-    "sms",
-    "smsto",
-    "ssh",
-    "tel",
-    "urn",
-    "webcal",
-    "wtai",
-    "xmpp",
-];
-
 const MEDIA_API_MXC_REGEX = /\/_matrix\/media\/r0\/(?:download|thumbnail)\/(.+?)\/(.+?)(?:[?/]|$)/;
 
 /*

src/linkify-matrix.ts

@@ -31,6 +31,7 @@ import { Action } from "./dispatcher/actions";
 import { ViewUserPayload } from "./dispatcher/payloads/ViewUserPayload";
 import { ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
 import { MatrixClientPeg } from "./MatrixClientPeg";
+import { PERMITTED_URL_SCHEMES } from "./utils/UrlUtils";
 
 export enum Type {
     URL = "url",
@@ -242,7 +243,32 @@ registerPlugin(Type.UserId, ({ scanner, parser }) => {
     });
 });
 
-registerCustomProtocol("matrix", true);
+// Linkify supports some common protocols but not others, register all permitted url schemes if unsupported
+// https://github.com/Hypercontext/linkifyjs/blob/f4fad9df1870259622992bbfba38bfe3d0515609/packages/linkifyjs/src/scanner.js#L133-L141
+// This also handles registering the `matrix:` protocol scheme
+const linkifySupportedProtocols = ["file", "mailto", "http", "https", "ftp", "ftps"];
+const optionalSlashProtocols = [
+    "bitcoin",
+    "geo",
+    "im",
+    "magnet",
+    "mailto",
+    "matrix",
+    "news",
+    "openpgp4fpr",
+    "sip",
+    "sms",
+    "smsto",
+    "tel",
+    "urn",
+    "xmpp",
+];
+
+PERMITTED_URL_SCHEMES.forEach((scheme) => {
+    if (!linkifySupportedProtocols.includes(scheme)) {
+        registerCustomProtocol(scheme, optionalSlashProtocols.includes(scheme));
+    }
+});
 
 export const linkify = linkifyjs;
 export const _linkifyElement = linkifyElement;

src/utils/Reply.ts

@@ -24,7 +24,7 @@ import { M_BEACON_INFO } from "matrix-js-sdk/src/@types/beacon";
 import { M_POLL_END, M_POLL_START } from "matrix-js-sdk/src/@types/polls";
 import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 
-import { PERMITTED_URL_SCHEMES } from "../HtmlUtils";
+import { PERMITTED_URL_SCHEMES } from "./UrlUtils";
 import { makeUserPermalink, RoomPermalinkCreator } from "./permalinks/Permalinks";
 import { isSelfLocation } from "./location";
 

src/utils/UrlUtils.ts

@@ -57,3 +57,31 @@ export function parseUrl(u: string): URL {
     }
     return new URL(u);
 }
+
+export const PERMITTED_URL_SCHEMES = [
+    "bitcoin",
+    "ftp",
+    "geo",
+    "http",
+    "https",
+    "im",
+    "irc",
+    "ircs",
+    "magnet",
+    "mailto",
+    "matrix",
+    "mms",
+    "news",
+    "nntp",
+    "openpgp4fpr",
+    "sip",
+    "sftp",
+    "sms",
+    "smsto",
+    "ssh",
+    "tel",
+    "urn",
+    "webcal",
+    "wtai",
+    "xmpp",
+];