diff --git a/src/ui/MessageInput/index.jsx b/src/ui/MessageInput/index.jsx index 4bf08b6a6..9a6341586 100644 --- a/src/ui/MessageInput/index.jsx +++ b/src/ui/MessageInput/index.jsx @@ -19,6 +19,7 @@ import MentionUserLabel from '../MentionUserLabel'; import Icon, { IconTypes, IconColors } from '../Icon'; import Label, { LabelTypography, LabelColors } from '../Label'; import { LocalizationContext } from '../../lib/LocalizationContext'; +import { sanitizeString } from './utils'; import { arrayEqual, getClassName, @@ -114,6 +115,7 @@ const MessageInput = React.forwardRef((props, ref) => { } ), []); + // #Edit mode // for easilly initialize input value from outside, but // useEffect(_, [channelUrl]) erase it const initialValue = props?.value; @@ -136,7 +138,7 @@ const MessageInput = React.forwardRef((props, ref) => { } }, [channelUrl]); - // #Mention | Fill message input values + // #Mention & #Edit | Fill message input values useEffect(() => { if (isEdit && message?.messageId) { // const textField = document.getElementById(textFieldId); @@ -150,9 +152,7 @@ const MessageInput = React.forwardRef((props, ref) => { textField.innerHTML = message?.mentionedMessageTemplate?.split(' ').map((word) => ( convertWordToStringObj(word, mentionedUsers).map((stringObj) => { const { type, value, userId } = stringObj; - if (type === StringObjType.mention - && mentionedUsers.some((user) => user?.userId === userId) - ) { + if (type === StringObjType.mention && mentionedUsers.some((user) => user?.userId === userId)) { return renderToString( { @@ -164,13 +164,13 @@ const MessageInput = React.forwardRef((props, ref) => { , ); } - return value; + return sanitizeString(value); }).join('') )).join(' '); } else { /* mention disabled */ try { - textField.innerHTML = message?.message; + textField.innerHTML = sanitizeString(message?.message); } catch { } setMentionedUserIds([]); } @@ -428,7 +428,7 @@ const MessageInput = React.forwardRef((props, ref) => { }} onPaste={(e) => { e.preventDefault(); - document.execCommand("insertHTML", false, e?.clipboardData.getData('text')); + document.execCommand("insertHTML", false, sanitizeString(e?.clipboardData.getData('text'))); }} /> {/* placeholder */} diff --git a/src/ui/MessageInput/utils.js b/src/ui/MessageInput/utils.js index 8554b5cc7..3e77e1dad 100644 --- a/src/ui/MessageInput/utils.js +++ b/src/ui/MessageInput/utils.js @@ -20,4 +20,9 @@ export function debounce(func, wait, immediate) { }; } +// Sanitize that special characters of HTML tags cause XSS issue +export const sanitizeString = (str) => ( + str?.replace(/[\u00A0-\u9999<>]/gim, (i) => ''.concat('&#', i.charCodeAt(0), ';')) +); + export default debounce;