fix(chat-URLs): Use punycode only on host name.

This is workaround for PunycodeJS which truncates parts of the URL when
it contains '@'.

package.json

@@ -72,7 +72,7 @@
     "null-loader": "4.0.1",
     "optional-require": "1.0.3",
     "promise.allsettled": "1.0.4",
-    "punycode": "2.1.1",
+    "punycode": "2.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-emoji-render": "1.2.4",

react/features/base/react/components/native/Linkify.tsx

@@ -1,9 +1,9 @@
-import punycode from 'punycode';
 import React, { Component } from 'react';
 import ReactLinkify from 'react-linkify';
 import { Text } from 'react-native';
 
 import { StyleType } from '../../../styles/functions.any';
+import { formatURLText } from '../../functions';
 
 import Link from './Link';
 
@@ -72,7 +72,7 @@ export default class Linkify extends Component<IProps> {
                 key = { key }
                 style = { this.props.linkStyle }
                 url = { decoratedHref }>
-                { punycode.toASCII(decoratedText) }
+                { formatURLText(decoratedText) }
             </Link>
         );
     }

react/features/base/react/components/web/Linkify.tsx

@@ -1,7 +1,8 @@
-import punycode from 'punycode';
 import React, { Component, ReactNode } from 'react';
 import ReactLinkify from 'react-linkify';
 
+import { formatURLText } from '../../functions';
+
 interface IProps {
 
     /**
@@ -43,7 +44,7 @@ export default class Linkify extends Component<IProps> {
                 key = { key }
                 rel = 'noopener noreferrer'
                 target = '_blank'>
-                { punycode.toASCII(decoratedText) }
+                { formatURLText(decoratedText) }
             </a>
         );
     }

react/features/base/react/functions.ts

@@ -1,3 +1,5 @@
+import punycode from 'punycode';
+
 /**
  * Returns the field value in a platform generic way.
  *
@@ -7,3 +9,41 @@
 export function getFieldValue(fieldParameter: { target: { value: string; }; } | string) {
     return typeof fieldParameter === 'string' ? fieldParameter : fieldParameter?.target?.value;
 }
+
+/**
+ * Formats the URL text for react-linkify.
+ *
+ * @param {string} text - The URL text.
+ * @returns {string} - The formatted text.
+ */
+export function formatURLText(text = '') {
+    let result;
+
+    // In order to prevent homograph attacks we need to use punycode. Reference
+    // https://github.com/tasti/react-linkify/issues/84. In the same time it seems PunycodeJS will treat the URL
+    // as an email when there is '@' and will erase parts of it. This is problematic if there is a URL like
+    // https://example.com/@test@@@123/test@test, punycode will truncate this to https://example.com/@test which
+    // is security issue because parts of the URL are actually missing from the text that we display. That's why
+    // we use punycode on valid URLs(that don't have '@' as part of the host) only for the host part of the URL.
+    try {
+        const url = new URL(text);
+        const { host } = url;
+
+        if (host) {
+            url.host = punycode.toASCII(host);
+            result = url.toString();
+        }
+    } catch (e) {
+        // Not a valid URL
+    }
+
+    if (!result) {
+        // This will be the case for invalid URLs or URLs without a host (emails for example). In this case beacuse
+        // of the issue with PunycodeJS that truncates parts of the text when there is '@' we split the text by '@'
+        // and use punycode for every separate part to prevent homograph attacks.
+        result = text.split('@').map(punycode.toASCII)
+            .join('@');
+    }
+
+    return result;
+}