chore: Sanitize html content (#4498)

chatwoot · Apr 21, 2022 · 27ddd77 · 27ddd77
1 parent 2c73df4
commit 27ddd77
Show file tree

Hide file tree

Showing 28 changed files with 52 additions and 29 deletions.
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -80,8 +80,8 @@
     >
       <p
         v-if="isSignatureAvailable"
+        v-dompurify-html="formatMessage(messageSignature)"
         class="message-signature"
-        v-html="formatMessage(messageSignature)"
       />
       <p v-else class="message-signature">
         {{ $t('CONVERSATION.FOOTER.MESSAGE_SIGNATURE_NOT_CONFIGURED') }}

diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -6,7 +6,7 @@
       'hide--quoted': !showQuotedContent,
     }"
   >
-    <div class="text-content" v-html="message"></div>
+    <div v-dompurify-html="message" class="text-content"></div>
     <button
       v-if="displayQuotedButton"
       class="quoted-text--button"

diff --git a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
@@ -7,7 +7,7 @@
       <li>
         <span class="bullet">❌</span>
         <span
-          v-html="
+          v-dompurify-html="
             $t('MERGE_CONTACTS.SUMMARY.DELETE_WARNING', {
               childContactName,
             })
@@ -17,7 +17,7 @@
       <li>
         <span class="bullet">✅</span>
         <span
-          v-html="
+          v-dompurify-html="
             $t('MERGE_CONTACTS.SUMMARY.ATTRIBUTE_WARNING', {
               childContactName,
               primaryContactName,

diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -35,7 +35,7 @@
         :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
       />
     </div>
-    <p class="note__content" v-html="formatMessage(note || '')" />
+    <p v-dompurify-html="formatMessage(note || '')" class="note__content" />
   </div>
 </template>
 

diff --git a/app/javascript/dashboard/routes/auth/Signup.vue b/app/javascript/dashboard/routes/auth/Signup.vue
@@ -91,7 +91,7 @@
             button-class="large expanded"
           >
           </woot-submit-button>
-          <p class="accept--terms" v-html="termsLink"></p>
+          <p v-dompurify-html="termsLink" class="accept--terms"></p>
         </form>
         <div class="column text-center sigin--footer">
           <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>

diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
@@ -9,7 +9,9 @@
         {{ attribute }}
       </div>
       <div>
-        <span v-html="valueWithLink(customAttributes[attribute])"></span>
+        <span
+          v-dompurify-html="valueWithLink(customAttributes[attribute])"
+        ></span>
       </div>
     </div>
     <p v-if="!listOfAttributes.length">

diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue
@@ -14,7 +14,7 @@
         </div>
         <span class="timestamp">{{ readableTime }} </span>
       </div>
-      <p class="message-content" v-html="prepareContent(content)"></p>
+      <p v-dompurify-html="prepareContent(content)" class="message-content"></p>
     </div>
   </div>
 </template>

diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
@@ -3,7 +3,7 @@
     <h2 class="page-sub-title">
       {{ headerTitle }}
     </h2>
-    <p class="small-12 column" v-html="headerContent"></p>
+    <p v-dompurify-html="headerContent" class="small-12 column"></p>
   </div>
 </template>
 

diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -89,7 +89,7 @@
       </div>
       <div class="small-4 columns">
         <span
-          v-html="
+          v-dompurify-html="
             useInstallationName(
               $t('AGENT_MGMT.SIDEBAR_TXT'),
               globalConfig.installationName

diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -76,7 +76,7 @@
       </div>
     </div>
     <div class="small-4 columns">
-      <span v-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')"></span>
+      <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')"></span>
     </div>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <edit-attribute

diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -81,7 +81,7 @@
       </div>
 
       <div class="small-4 columns">
-        <span v-html="$t('AUTOMATION.SIDEBAR_TXT')"></span>
+        <span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')"></span>
       </div>
     </div>
     <woot-modal

diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -76,7 +76,7 @@
       </div>
 
       <div class="small-4 columns">
-        <span v-html="$t('CANNED_MGMT.SIDEBAR_TXT')"></span>
+        <span v-dompurify-html="$t('CANNED_MGMT.SIDEBAR_TXT')"></span>
       </div>
     </div>
     <!-- Add Agent -->

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -102,7 +102,7 @@
 
       <div class="small-4 columns">
         <span
-          v-html="
+          v-dompurify-html="
             useInstallationName(
               $t('INBOX_MGMT.SIDEBAR_TXT'),
               globalConfig.installationName

diff --git a/...vascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue b/...vascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
@@ -50,7 +50,7 @@
         <b>{{ integration.name }}</b>
       </p>
       <p
-        v-html="
+        v-dompurify-html="
           $t(
             `INTEGRATION_APPS.SIDEBAR_DESCRIPTION.${integration.name.toUpperCase()}`,
             { installationName: globalConfig.installationName }

diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
@@ -4,7 +4,9 @@
       <div class="integration--description">
         <h5>{{ $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}</h5>
         <p>
-          <span v-html="$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY')"></span>
+          <span
+            v-dompurify-html="$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY')"
+          ></span>
         </p>
       </div>
     </div>

diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
@@ -72,7 +72,7 @@
 
       <div class="small-4 columns">
         <span
-          v-html="
+          v-dompurify-html="
             useInstallationName(
               $t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT'),
               globalConfig.installationName

diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -72,7 +72,7 @@
       </div>
 
       <div class="small-4 columns">
-        <span v-html="$t('LABEL_MGMT.SIDEBAR_TXT')"></span>
+        <span v-dompurify-html="$t('LABEL_MGMT.SIDEBAR_TXT')"></span>
       </div>
     </div>
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">

diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -57,7 +57,7 @@
 
       <div class="small-4 columns">
         <span
-          v-html="
+          v-dompurify-html="
             $t('TEAMS_SETTINGS.SIDEBAR_TXT', {
               installationName: globalConfig.installationName,
             })

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -38,6 +38,7 @@ import {
   initializeChatwootEvents,
 } from '../dashboard/helper/scriptHelpers';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
 
 Vue.config.env = process.env;
 
@@ -54,7 +55,7 @@ if (window.analyticsConfig) {
     api_host: window.analyticsConfig.host,
   });
 }
-
+Vue.use(VueDOMPurifyHTML);
 Vue.use(VueRouter);
 Vue.use(VueI18n);
 Vue.use(WootUiKit);

diff --git a/app/javascript/packs/widget.js b/app/javascript/packs/widget.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuelidate from 'vuelidate';
 import VueI18n from 'vue-i18n';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
 import VueFormulate from '@braid/vue-formulate';
 import store from '../widget/store';
 import App from '../widget/App.vue';
@@ -10,6 +11,7 @@ import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 import router from '../widget/router';
 Vue.use(VueI18n);
 Vue.use(Vuelidate);
+Vue.use(VueDOMPurifyHTML);
 
 const i18nConfig = new VueI18n({
   locale: 'en',

diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -9,9 +9,9 @@
           @click="changeCategory(category)"
         >
           <button
+            v-dompurify-html="emojis[category][0]"
             class="emoji--item"
             @click="changeCategory(category)"
-            v-html="emojis[category][0]"
           />
         </li>
       </ul>
@@ -23,10 +23,10 @@
       <button
         v-for="emoji in emojis[selectedKey]"
         :key="emoji"
+        v-dompurify-html="emoji"
         class="emoji--item"
         track-by="$index"
         @click="onClick(emoji)"
-        v-html="emoji"
       />
     </div>
   </div>

diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -8,9 +8,9 @@
       :class="$dm('bg-white', 'dark:bg-slate-700')"
     >
       <div
+        v-dompurify-html="formatMessage(message, false)"
         class="message-content"
         :class="$dm('text-black-900', 'dark:text-slate-50')"
-        v-html="formatMessage(message, false)"
       ></div>
       <email-input
         v-if="isTemplateEmail"

diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
@@ -22,7 +22,7 @@
           class="font-medium text-base flex items-center"
           :class="$dm('text-black-900', 'dark:text-slate-50')"
         >
-          <span class="mr-1" v-html="title" />
+          <span v-dompurify-html="title" class="mr-1" />
           <div
             :class="
               `h-2 w-2 rounded-full leading-4

diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -11,14 +11,14 @@
       <header-actions :show-popout-button="showPopoutButton" />
     </div>
     <h2
-      class=" mt-5 text-3xl mb-3 font-normal"
+      v-dompurify-html="introHeading"
+      class="mt-5 text-3xl mb-3 font-normal"
       :class="$dm('text-slate-900', 'dark:text-slate-50')"
-      v-html="introHeading"
     />
     <p
+      v-dompurify-html="introBody"
       class="text-lg leading-normal"
       :class="$dm('text-slate-700', 'dark:text-slate-200')"
-      v-html="introBody"
     />
   </header>
 </template>

diff --git a/app/javascript/widget/components/UnreadMessage.vue b/app/javascript/widget/components/UnreadMessage.vue
@@ -15,7 +15,10 @@
         <span class="agent--name">{{ agentName }}</span>
         <span class="company--name"> {{ companyName }}</span>
       </div>
-      <div class="message-content" v-html="formatMessage(message, false)"></div>
+      <div
+        v-dompurify-html="formatMessage(message, false)"
+        class="message-content"
+      ></div>
     </button>
   </div>
 </template>

diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
@@ -1,8 +1,8 @@
 <template>
   <div
+    v-dompurify-html="formatMessage(message, false)"
     class="chat-bubble user"
     :style="{ background: widgetColor }"
-    v-html="formatMessage(message, false)"
   />
 </template>
 

diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "vue-chartjs": "3.5.1",
     "vue-clickaway": "~2.1.0",
     "vue-color": "2.8.1",
+    "vue-dompurify-html": "^2.5.1",
     "vue-easytable": "2.5.5",
     "vue-i18n": "8.24.3",
     "vue-loader": "15.9.6",

diff --git a/yarn.lock b/yarn.lock
@@ -5843,6 +5843,11 @@ dompurify@2.2.7:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.2.7.tgz#a5f055a2a471638680e779bd08fc334962d11fd8"
   integrity sha512-jdtDffdGNY+C76jvodNTu9jt5yYj59vuTUyx+wXdzcSwAGTYZDAQkQ7Iwx9zcGrA4ixC1syU4H3RZROqRxokxg==
 
+dompurify@^2.3.4:
+  version "2.3.6"
+  resolved "https://registry.npmjs.org/dompurify/-/dompurify-2.3.6.tgz#2e019d7d7617aacac07cbbe3d88ae3ad354cf875"
+  integrity sha512-OFP2u/3T1R5CEgWCEONuJ1a5+MFKnOYpkywpUSxv/dj1LeBT1erK+JwM7zK0ROy2BRhqVCf0LRw/kHqKuMkVGg==
+
 domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
@@ -15101,6 +15106,13 @@ vue-docgen-loader@^1.5.0:
     loader-utils "^1.2.3"
     querystring "^0.2.0"
 
+vue-dompurify-html@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-2.5.1.tgz#a754f4ac7b18eb8fe41f461cb2bb1c4956a9bd2d"
+  integrity sha512-B8rQj2jAPJJhtKHHa6jg5B3/RoKBmmUl/awP/GxWXGu75j4Y7+MHqv0DG52v0Uz0taEpHyZun34KEYMAfrPWnA==
+  dependencies:
+    dompurify "^2.3.4"
+
 vue-easytable@2.5.5:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/vue-easytable/-/vue-easytable-2.5.5.tgz#0d0ac244beb853859c76191c117311b5cf9654b5"