From fd3e2f9c1a81eb05e546ed64949b2a45638c50ed Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Tue, 1 Oct 2024 15:51:20 +0300
Subject: [PATCH] 24.08.1 hotfix: sanitize chat input [WTEL-5195]

---
 package-lock.json                             | 45 ++++++++++++++++---
 package.json                                  |  4 +-
 .../message/message-text/message-text.vue     |  4 +-
 .../wt-omni-widget-chat-footer/chat-input.vue | 14 +++---
 4 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1569e32..3d35780 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "omnichannel-widget",
-      "version": "23.09.0",
+      "version": "24.08.0",
       "dependencies": {
         "@egjs/flicking-plugins": "^4.5.0",
         "@egjs/vue-flicking": "^4.10.4",
@@ -15,8 +15,11 @@
         "axios": "^0.27.2",
         "core-js": "^3.6.5",
         "deepmerge": "^4.2.2",
+        "dompurify": "^3.1.7",
         "emoji-picker-element": "^1.11.3",
+        "he": "^1.2.0",
         "insert-text-at-cursor": "^0.3.0",
+        "is-html": "^3.1.0",
         "jssip": "^3.10.0",
         "linkifyjs": "^3.0.0-beta.3",
         "portal-vue": "^1.5.1",
@@ -7140,6 +7143,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz",
+      "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ=="
+    },
     "node_modules/domready": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/domready/-/domready-1.0.8.tgz",
@@ -9496,7 +9504,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true,
       "bin": {
         "he": "bin/he"
       }
@@ -9595,7 +9602,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
       "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -10253,6 +10259,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-html": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-html/-/is-html-3.1.0.tgz",
+      "integrity": "sha512-eHrJ9L14RlcKIFXh+RlqVYiRPGp8YhSn5pSNibDLtouaJdDcn3R0Fyu3mWTXQeKCQiLoiR2V8sPPzoQSomukSg==",
+      "dependencies": {
+        "html-tags": "^3.1.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-interactive": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
@@ -25555,6 +25575,11 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dompurify": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz",
+      "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ=="
+    },
     "domready": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/domready/-/domready-1.0.8.tgz",
@@ -27367,8 +27392,7 @@
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
     "hexoid": {
       "version": "1.0.0",
@@ -27448,8 +27472,7 @@
     "html-tags": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
-      "dev": true
+      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg=="
     },
     "html-webpack-plugin": {
       "version": "5.5.0",
@@ -27906,6 +27929,14 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-html": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-html/-/is-html-3.1.0.tgz",
+      "integrity": "sha512-eHrJ9L14RlcKIFXh+RlqVYiRPGp8YhSn5pSNibDLtouaJdDcn3R0Fyu3mWTXQeKCQiLoiR2V8sPPzoQSomukSg==",
+      "requires": {
+        "html-tags": "^3.1.0"
+      }
+    },
     "is-interactive": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
diff --git a/package.json b/package.json
index c6ed807..501394f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "omnichannel-widget",
-  "version": "24.08.0",
+  "version": "24.08.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,9 @@
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "deepmerge": "^4.2.2",
+    "dompurify": "^3.1.7",
     "emoji-picker-element": "^1.11.3",
+    "he": "^1.2.0",
     "insert-text-at-cursor": "^0.3.0",
     "jssip": "^3.10.0",
     "linkifyjs": "^3.0.0-beta.3",
diff --git a/src/modules/chat/components/wt-omni-widget-chat-content/messages/message/message-text/message-text.vue b/src/modules/chat/components/wt-omni-widget-chat-content/messages/message/message-text/message-text.vue
index a5e85fe..8e168c5 100644
--- a/src/modules/chat/components/wt-omni-widget-chat-content/messages/message/message-text/message-text.vue
+++ b/src/modules/chat/components/wt-omni-widget-chat-content/messages/message/message-text/message-text.vue
@@ -7,6 +7,8 @@
 
 <script>
 import linkifyHtml from 'linkifyjs/html';
+import dompurify from 'dompurify';
+import he from 'he';
 
 export default {
   name: 'message-text',
@@ -18,7 +20,7 @@ export default {
   },
   computed: {
     parsedText() {
-      return linkifyHtml(this.text, {
+      return linkifyHtml(he.encode(dompurify.sanitize(this.text)), {
         target: '_blank',
       });
     },
diff --git a/src/modules/chat/components/wt-omni-widget-chat-footer/chat-input.vue b/src/modules/chat/components/wt-omni-widget-chat-footer/chat-input.vue
index f3a45a9..4c09946 100644
--- a/src/modules/chat/components/wt-omni-widget-chat-footer/chat-input.vue
+++ b/src/modules/chat/components/wt-omni-widget-chat-footer/chat-input.vue
@@ -9,8 +9,8 @@
         :placeholder="$t('chat.inputPlaceholder')"
         :value="draft"
         class="wt-omni-widget-chat-input__textarea"
-        @input="setDraft($event.target.value)"
-        @keypress.enter.prevent="handleEnter"
+        @input="handleInput($event.target.value)"
+        @keypress.enter="handleEnter"
       ></textarea>
     </div>
     <chat-footer-actions
@@ -22,6 +22,7 @@
 
 <script>
 import autosize from 'autosize';
+import dompurify from 'dompurify';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { mapActions, mapState } from 'vuex';
 import ChatFooterActions from './chat-footer-actions.vue';
@@ -49,10 +50,13 @@ export default {
         return dispatch(`${this.namespace}/SET_DRAFT`, payload);
       },
     }),
+    handleInput(value) {
+      const purifiedValue = dompurify.sanitize(value);
+      this.setDraft(purifiedValue);
+    },
     handleEnter(event) {
-      if (event.shiftKey || event.ctrlKey) {
-        this.setDraft(this.draft.concat('\n'));
-      } else {
+      if (!event.shiftKey && !event.ctrlKey) {
+        event.preventDefault();
         this.sendDraft(event);
       }
     },