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

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>'
+    );
+  });
 });