diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx index 37189f3..e67da74 100644 --- a/src/app/molecules/message/Message.jsx +++ b/src/app/molecules/message/Message.jsx @@ -34,7 +34,7 @@ import PencilIC from '../../../../public/res/ic/outlined/pencil.svg'; import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg'; import BinIC from '../../../../public/res/ic/outlined/bin.svg'; -import sanitize from './sanitize'; +import { sanitizeCustomHtml, sanitizeText } from './sanitize'; function PlaceholderMessage() { return ( @@ -102,16 +102,20 @@ function MessageBody({ isEdited, msgType, }) { - // if body is not string it is a React( element. + // if body is not string it is a React element. if (typeof body !== 'string') return
{body}
; - const content = twemoji.parse(isCustomHTML ? sanitize(body) : body); - const linkified = linkifyHtml(content, { target: '_blank', rel: 'noreferrer noopener' }); + let content = isCustomHTML ? sanitizeCustomHtml(body) : body; + content = linkifyHtml(content, { target: '_blank', rel: 'noreferrer noopener' }); + if (!isCustomHTML) content = sanitizeText(body); + content = twemoji.parse(content); + + const parsed = parse(content); return (
{ msgType === 'm.emote' && `* ${senderName} ` } - { parse(linkified) } + { parsed }
{ isEdited && (edited)}
diff --git a/src/app/molecules/message/sanitize.js b/src/app/molecules/message/sanitize.js index 94d9ac6..38ee2ca 100644 --- a/src/app/molecules/message/sanitize.js +++ b/src/app/molecules/message/sanitize.js @@ -67,7 +67,7 @@ function sanitizeImgTag(tagName, attributes) { return { tagName, attribs }; } -export default function sanitize(body) { +export function sanitizeCustomHtml(body) { return sanitizeHtml(body, { allowedTags: [ 'font', @@ -142,3 +142,12 @@ export default function sanitize(body) { }, }); } + +export function sanitizeText(body) { + const tagsToReplace = { + '&': '&', + '<': '<', + '>': '>', + }; + return body.replace(/[&<>]/g, (tag) => tagsToReplace[tag] || tag); +}