chore: Sanitize html content (#4498)

2025-11-03 20:48:07 +00:00 · 2022-04-21 11:27:28 +05:30
parent 2c73df4292
commit 27ddd77a1b
28 changed files with 52 additions and 29 deletions
--- 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') }}
--- 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"
--- 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,
--- 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>

--- 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>
--- 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">
--- 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>
--- 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>

--- 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
--- 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
--- 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
--- 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 -->
--- 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
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
+++ b/app/javascript/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 }
--- 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>
--- 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
--- 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">
--- 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,
            })
--- 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);
--- 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',
--- 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>
--- 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"
--- 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
--- 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>
--- 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>
--- 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>

--- 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",
--- 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"