LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pranav Raj S
2021-07-15 12:54:31 +05:30
committed by GitHub
parent d7982a6ffd
commit aa7db90cd2
5 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/dashboard/components/widgets/conversation/Message.vue
View File

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

12
app/javascript/dashboard/components/widgets/conversation/helpers/EmailContentParser.js
View File

@@ -1,12 +0,0 @@
export const stripStyleCharacters = emailContent => {
let contentToBeParsed = emailContent.replace(/<style(.|\s)*?<\/style>/g, '');
contentToBeParsed = contentToBeParsed.replace(/style="(.*?)"/g, '');
let parsedContent = new DOMParser().parseFromString(
contentToBeParsed,
'text/html'
);
if (!parsedContent.getElementsByTagName('parsererror').length) {
return parsedContent.body.innerHTML;
}
return '';
};

13
app/javascript/dashboard/components/widgets/conversation/helpers/specs/EmailContentParser.spec.js
View File

@@ -1,13 +0,0 @@
import { stripStyleCharacters } from '../EmailContentParser';
describe('#stripStyleCharacters', () => {
it('remove style characters', () => {
expect(
stripStyleCharacters(
`<html><body><style type="text/css"> \n<!-- \nimg \n {max-width:100%} \ndiv \n {width:100%!important; \n height:100%; \n line-height:1.6em} \ndiv \n {background-color:#f6f6f6} \n--> \n</style>\n<div itemscope="" itemtype="http://schema.org/EmailMessage" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing:border-box; font-size:14px; width:100%!important; height:100%; line-height:1.6em; background-color:#f6f6f6; margin:0; background-color:#f6f6f6">Test Content</div>\n</body></html>`
)
).toEqual(
'\n<div itemscope="" itemtype="http://schema.org/EmailMessage">Test Content</div>\n'
);
});
});

20
app/javascript/shared/mixins/messageFormatterMixin.js
View File

@@ -1,4 +1,5 @@
import MessageFormatter from '../helpers/MessageFormatter'; import MessageFormatter from '../helpers/MessageFormatter';
import DOMPurify from 'dompurify';
export default { export default {
methods: { methods: {
@@ -17,5 +18,24 @@ export default {
return `${description.slice(0, 97)}...`; 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',
],
});
},
}, },
}; };

13
app/javascript/shared/mixins/specs/messageFormatterMixin.spec.js
View File

@@ -14,4 +14,17 @@ describe('messageFormatterMixin', () => {
'Chatwoot is an opensource tool. https://www.chatwoot.com' '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>'
);
});
}); });