From aa7db90cd2d23dbcf22a94f1e4c100dd909e2172 Mon Sep 17 00:00:00 2001 From: Pranav Raj S Date: Thu, 15 Jul 2021 12:54:31 +0530 Subject: [PATCH] fix: Use Dompurify to strip style characters (#2632) --- .../widgets/conversation/Message.vue | 3 +-- .../helpers/EmailContentParser.js | 12 ----------- .../helpers/specs/EmailContentParser.spec.js | 13 ------------ .../shared/mixins/messageFormatterMixin.js | 20 +++++++++++++++++++ .../specs/messageFormatterMixin.spec.js | 13 ++++++++++++ 5 files changed, 34 insertions(+), 27 deletions(-) delete mode 100644 app/javascript/dashboard/components/widgets/conversation/helpers/EmailContentParser.js delete mode 100644 app/javascript/dashboard/components/widgets/conversation/helpers/specs/EmailContentParser.spec.js diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue index 1fce9bccfdb2..ae58222fb2af 100644 --- a/app/javascript/dashboard/components/widgets/conversation/Message.vue +++ b/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; } diff --git a/app/javascript/dashboard/components/widgets/conversation/helpers/EmailContentParser.js b/app/javascript/dashboard/components/widgets/conversation/helpers/EmailContentParser.js deleted file mode 100644 index 1f716fad115d..000000000000 --- a/app/javascript/dashboard/components/widgets/conversation/helpers/EmailContentParser.js +++ /dev/null @@ -1,12 +0,0 @@ -export const stripStyleCharacters = emailContent => { - let contentToBeParsed = emailContent.replace(//g, ''); - contentToBeParsed = contentToBeParsed.replace(/style="(.*?)"/g, ''); - let parsedContent = new DOMParser().parseFromString( - contentToBeParsed, - 'text/html' - ); - if (!parsedContent.getElementsByTagName('parsererror').length) { - return parsedContent.body.innerHTML; - } - return ''; -}; diff --git a/app/javascript/dashboard/components/widgets/conversation/helpers/specs/EmailContentParser.spec.js b/app/javascript/dashboard/components/widgets/conversation/helpers/specs/EmailContentParser.spec.js deleted file mode 100644 index 663d31735219..000000000000 --- a/app/javascript/dashboard/components/widgets/conversation/helpers/specs/EmailContentParser.spec.js +++ /dev/null @@ -1,13 +0,0 @@ -import { stripStyleCharacters } from '../EmailContentParser'; - -describe('#stripStyleCharacters', () => { - it('remove style characters', () => { - expect( - stripStyleCharacters( - `\n
Test Content
\n` - ) - ).toEqual( - '\n
Test Content
\n' - ); - }); -}); diff --git a/app/javascript/shared/mixins/messageFormatterMixin.js b/app/javascript/shared/mixins/messageFormatterMixin.js index 5dacc43f4b26..3d6902bfeef7 100644 --- a/app/javascript/shared/mixins/messageFormatterMixin.js +++ b/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', + ], + }); + }, }, }; diff --git a/app/javascript/shared/mixins/specs/messageFormatterMixin.spec.js b/app/javascript/shared/mixins/specs/messageFormatterMixin.spec.js index 81f653d7fed7..b43129aec5fb 100644 --- a/app/javascript/shared/mixins/specs/messageFormatterMixin.spec.js +++ b/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 = + 'Chatwoot is an opensource tool. https://www.chatwoot.com'; + expect(wrapper.vm.stripStyleCharacters(message)).toMatch( + 'Chatwoot is an opensource tool. https://www.chatwoot.com' + ); + }); });