feat(Chat): display clickable links, sanitize them and XSS protect

Closes #458

.gitignore

@@ -21,3 +21,4 @@ npm-shrinkwrap.json
 yarn-debug.log*
 yarn-error.log*
 yarn.lock
+TODO

src/app/chat/views/message_format.nim

@@ -18,7 +18,7 @@ proc renderInline(self: ChatMessageList, elem: TextItem): string =
   of "code": result = fmt("<span style=\"background-color: #1a356b; color: #FFFFFF\">{elem.literal}</span> ")
   of "emph": result = fmt("<span style=\"font-style: italic;\">{elem.literal}</span> ")
   of "strong": result = fmt("<span style=\"font-weight: bold;\">{elem.literal}</span> ")
-  of "link": result = "TODO: write safe link here: " & elem.destination
+  of "link": result = elem.destination
   of "mention": result = fmt("<span style=\"color: #000000;\">{self.mention(elem.literal)}</span> ")
 
 # See render-block in status-react/src/status_im/ui/screens/chat/message/message.cljs

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -1,7 +1,10 @@
-import QtQuick 2.13
+import QtQuick 2.3
-import QtQuick.Controls 2.13
+import QtQuick.Controls 2.3
-import QtQuick.Layouts 1.13
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
 import "../../../../shared"
+import "../../../../shared/xss.js" as XSS
 import "../../../../imports"
 import "../components"
 
@@ -36,6 +39,23 @@ Item {
         }
     }
 
+    function linkify(inputText) {
+        //URLs starting with http://, https://, or ftp://
+        var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
+        replacedText = inputText.replace(replacePattern1, "<a href='$1'>$1</a>");
+
+        //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
+        var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+        replacedText = replacedText.replace(replacePattern2, "$1<a href='http://$2'>$2</a>");
+
+        replacedText = XSS.filterXSS(replacedText)
+        return replacedText;
+    }
+
+    ProfilePopup {
+      id: profilePopup
+    }
+
     Item {
         id: channelIdentifier
         visible: authorCurrentMsg == ""
@@ -236,7 +256,8 @@ Item {
 
         StyledTextEdit {
             id: chatText
-            text: message
+            text: linkify(message)
+            textFormat: TextEdit.RichText
             anchors.left: parent.left
             anchors.leftMargin: parent.chatHorizontalPadding
             anchors.right: message.length > 52 ? parent.right : undefined
@@ -250,7 +271,12 @@ Item {
             selectByMouse: true
             color: !isCurrentUser ? Theme.black : Theme.white
             visible: contentType == Constants.messageType
-            textFormat: TextEdit.RichText
+            onLinkActivated: Qt.openUrlExternally(link)
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.NoButton // we don't want to eat clicks on the Text
+                cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+            }
         }
 
         Image {

ui/app/AppLayouts/Profile/Sections/HelpContainer.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/xss.js" as XSS
 
 Item {
     id: helpContainer
@@ -11,6 +12,19 @@ Item {
     Layout.fillHeight: true
     Layout.fillWidth: true
 
+    function linkify(inputText) {
+        //URLs starting with http://, https://, or ftp://
+        var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
+        replacedText = inputText.replace(replacePattern1, "<a href='$1'>$1</a>");
+
+        //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
+        var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+        replacedText = replacedText.replace(replacePattern2, "$1<a href='http://$2'>$2</a>");
+
+        replacedText = XSS.filterXSS(replacedText)
+        return replacedText;
+    }
+
     StyledText {
         id: element8
         text: qsTr("Help menus: FAQ, Glossary, etc.")
@@ -24,7 +38,7 @@ Item {
 
     StyledText {
         anchors.centerIn: parent
-        text: "<a href='https://status.im/docs/FAQs.html'>Frequently asked questions</a>"
+        text: linkify(link)
         onLinkActivated: Qt.openUrlExternally(link)
 
         MouseArea {