chore: Sanitize html content (#4498)

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"

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

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>

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>

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>