fix: Use Dompurify to strip style characters (#2632)

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -91,7 +91,6 @@ import contentTypeMixin from 'shared/mixins/contentTypeMixin';
 import BubbleActions from './bubble/Actions';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { generateBotMessageContent } from './helpers/botMessageContentHelper';
-import { stripStyleCharacters } from './helpers/EmailContentParser';
 
 export default {
   components: {
@@ -140,7 +139,7 @@ export default {
 
       if ((replyHTMLContent || fullHTMLContent) && this.isIncoming) {
         let contentToBeParsed = replyHTMLContent || fullHTMLContent || '';
-        const parsedContent = stripStyleCharacters(contentToBeParsed);
+        const parsedContent = this.stripStyleCharacters(contentToBeParsed);
         if (parsedContent) {
           return parsedContent;
         }

app/javascript/shared/mixins/messageFormatterMixin.js

@@ -1,4 +1,5 @@
 import MessageFormatter from '../helpers/MessageFormatter';
+import DOMPurify from 'dompurify';
 
 export default {
   methods: {
@@ -17,5 +18,24 @@ export default {
 
       return `${description.slice(0, 97)}...`;
     },
+    stripStyleCharacters(message) {
+      return DOMPurify.sanitize(message, {
+        FORBID_TAGS: ['style'],
+        FORBID_ATTR: [
+          'id',
+          'class',
+          'style',
+          'bgcolor',
+          'valign',
+          'width',
+          'face',
+          'color',
+          'height',
+          'lang',
+          'align',
+          'size',
+        ],
+      });
+    },
   },
 };

app/javascript/shared/mixins/specs/messageFormatterMixin.spec.js

@@ -14,4 +14,17 @@ describe('messageFormatterMixin', () => {
       'Chatwoot is an opensource tool. https://www.chatwoot.com'
     );
   });
+
+  it('stripStyleCharacters returns message without style tags', () => {
+    const Component = {
+      render() {},
+      mixins: [messageFormatterMixin],
+    };
+    const wrapper = shallowMount(Component);
+    const message =
+      '<b style="max-width:100%">Chatwoot is an opensource tool. https://www.chatwoot.com</b><style type="css">.message{}</style>';
+    expect(wrapper.vm.stripStyleCharacters(message)).toMatch(
+      '<b>Chatwoot is an opensource tool. https://www.chatwoot.com</b>'
+    );
+  });
 });