mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
simoleo89
301294ecf4
Several dangerouslySetInnerHTML sinks rendered user-controlled strings (chat messages, usernames, chat history) without sanitisation, relying implicitly on upstream formatting or server-side charset limits. Route them all through the existing SanitizeHtml (DOMPurify) helper so the security guarantee is local to each render site. Sinks fixed: ChatWidgetWindowView (name/message/original/translated), ChatHistoryView (name/message), AvatarInfoWidgetNameView + AvatarInfoWidgetAvatarView (username), SelectReportedUserView (username). Add regression suites: SanitizeHtml.test.ts (XSS neutralised, chat markup preserved) and RoomChatFormatter.test.ts (pins the existing encodeHTML defence). No behaviour change: SanitizeHtml's allow-list keeps the b/i/u/span/strong/em/br markup the chat/profile UI relies on.
199 lines
12 KiB
TypeScript
199 lines
12 KiB
TypeScript
import { GetSessionDataManager, RoomObjectType } from '@nitrots/nitro-renderer';
|
|
import { FC, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { ChatEntryType, LocalizeText, SanitizeHtml } from '../../../../api';
|
|
import { DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
|
import { useChatHistory, useChatWindow, useOnClickChat } from '../../../../hooks';
|
|
import { useRoom } from '../../../../hooks/rooms';
|
|
|
|
const BOTTOM_SCROLL_THRESHOLD = 20;
|
|
|
|
export const ChatWidgetWindowView: FC<{}> = () =>
|
|
{
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
const lastScrollTop = useRef(0);
|
|
const [ isAutoScrollEnabled, setIsAutoScrollEnabled ] = useState(true);
|
|
const [ hidePets, setHidePets ] = useState(false);
|
|
const [ hideAvatars, setHideAvatars ] = useState(false);
|
|
const [ hideBalloons, setHideBalloons ] = useState(false);
|
|
const [ search, setSearch ] = useState('');
|
|
const { chatHistory = [], clearChatHistory = null } = useChatHistory();
|
|
const [ , setChatWindowEnabled ] = useChatWindow();
|
|
const { roomSession = null } = useRoom();
|
|
const { onClickChat } = useOnClickChat();
|
|
const ownUserId = (GetSessionDataManager()?.userId || -1);
|
|
|
|
const roomChatHistory = useMemo(() =>
|
|
{
|
|
const normalizedSearch = search.trim().toLowerCase();
|
|
|
|
return chatHistory.filter(chat =>
|
|
{
|
|
if(chat.type !== ChatEntryType.TYPE_CHAT) return false;
|
|
if(chat.roomId !== roomSession?.roomId) return false;
|
|
if(hidePets && chat.entityType === RoomObjectType.PET) return false;
|
|
|
|
if(!normalizedSearch.length) return true;
|
|
|
|
return (`${ chat.name } ${ chat.message || '' } ${ chat.originalMessage || '' } ${ chat.translatedMessage || '' }`.toLowerCase().includes(normalizedSearch));
|
|
});
|
|
}, [ chatHistory, roomSession?.roomId, hidePets, search ]);
|
|
|
|
const isAtBottom = useCallback((element: HTMLDivElement) =>
|
|
{
|
|
const distanceToBottom = (element.scrollHeight - element.clientHeight - element.scrollTop);
|
|
|
|
return (distanceToBottom <= BOTTOM_SCROLL_THRESHOLD);
|
|
}, []);
|
|
|
|
const scrollToLatest = useCallback((smooth: boolean = true) =>
|
|
{
|
|
if(!contentRef.current) return;
|
|
|
|
const element = contentRef.current;
|
|
|
|
element.scrollTo({ top: element.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
|
|
}, []);
|
|
|
|
const onScroll = useCallback((event: UIEvent<HTMLDivElement>) =>
|
|
{
|
|
const element = event.currentTarget;
|
|
const atBottom = isAtBottom(element);
|
|
const isScrollingUp = (element.scrollTop < lastScrollTop.current);
|
|
|
|
lastScrollTop.current = element.scrollTop;
|
|
|
|
if(atBottom)
|
|
{
|
|
if(!isAutoScrollEnabled) setIsAutoScrollEnabled(true);
|
|
|
|
return;
|
|
}
|
|
|
|
if(isAutoScrollEnabled && isScrollingUp) setIsAutoScrollEnabled(false);
|
|
}, [ isAtBottom, isAutoScrollEnabled ]);
|
|
|
|
useEffect(() =>
|
|
{
|
|
if(!contentRef.current || !isAutoScrollEnabled) return;
|
|
|
|
scrollToLatest();
|
|
}, [ roomChatHistory.length, isAutoScrollEnabled, scrollToLatest ]);
|
|
|
|
return (
|
|
<NitroCardView
|
|
className="w-[460px] h-[240px]"
|
|
disableDrag={ false }
|
|
style={ { pointerEvents: 'auto' } }
|
|
theme="primary-slim"
|
|
uniqueKey="chat-widget-window"
|
|
windowPosition={ DraggableWindowPosition.TOP_LEFT }>
|
|
<NitroCardHeaderView headerText="Chat window" onCloseClick={ () =>
|
|
{
|
|
setChatWindowEnabled(false);
|
|
|
|
if(clearChatHistory) clearChatHistory();
|
|
} } />
|
|
<NitroCardContentView className="bg-[#f2f2f2] relative" overflow="hidden">
|
|
<div className="flex items-center gap-2 px-2 py-1 border-b border-black/20 bg-white/40 text-black text-[11px]">
|
|
<label className="flex items-center gap-1 cursor-pointer select-none">
|
|
<input checked={ hidePets } type="checkbox" onChange={ event => setHidePets(event.target.checked) } />
|
|
<span>{ LocalizeText('widget.room.chat.hide_pets') }</span>
|
|
</label>
|
|
<label className="flex items-center gap-1 cursor-pointer select-none">
|
|
<input checked={ hideAvatars } type="checkbox" onChange={ event => setHideAvatars(event.target.checked) } />
|
|
<span>{ LocalizeText('widget.room.chat.hide_avatars') }</span>
|
|
</label>
|
|
<button className="ml-auto px-1 py-0.5 rounded border border-black/30 bg-white/70 text-[11px] text-black hover:bg-white" onClick={ () => setHideBalloons(value => !value) } type="button">
|
|
{ hideBalloons ? LocalizeText('widget.room.chat.show_balloon') : LocalizeText('widget.room.chat.hide_balloon') }
|
|
</button>
|
|
<button className="px-1 py-0.5 rounded border border-black/30 bg-white/70 text-[11px] text-black hover:bg-white" onClick={ () =>
|
|
{
|
|
if(clearChatHistory) clearChatHistory();
|
|
} } type="button">
|
|
{ LocalizeText('widget.room.chat.clear_history') }
|
|
</button>
|
|
<div>
|
|
<input
|
|
className="h-[20px] px-1 rounded border border-black/30 bg-white/70 text-[11px] text-black"
|
|
placeholder="Search"
|
|
type="text"
|
|
value={ LocalizeText('navigator.frontpage.staticsearch.8') }
|
|
onChange={ event => setSearch(event.target.value) } />
|
|
</div>
|
|
</div>
|
|
<div ref={ contentRef } className="h-[calc(100%-31px)] overflow-y-auto px-2 py-1 text-black text-[13px] leading-4" onScroll={ onScroll }>
|
|
{ roomChatHistory.map(chat =>
|
|
{
|
|
const isOwnMessage = (chat.webId === ownUserId);
|
|
const rowClassName = `mb-1 flex items-start gap-1 break-words ${ isOwnMessage ? 'justify-end' : '' }`;
|
|
const messageClassName = `message${ chat.chatType === 1 ? ' italic text-[#595959]' : '' }${ chat.chatType === 2 ? ' font-bold' : '' }`;
|
|
|
|
return (
|
|
<div key={ `${ chat.timestamp }-${ chat.id }` } className={ rowClassName }>
|
|
{ hideBalloons && !hideAvatars && <div className={ `w-[65px] h-[55px] shrink-0 mt-[-18px] rounded-sm bg-no-repeat bg-center scale-70 ${ isOwnMessage ? 'order-2' : '' }` } style={ chat.imageUrl ? { backgroundImage: `url(${ chat.imageUrl })` } : undefined } /> }
|
|
{ hideBalloons && (
|
|
<div onClick={ onClickChat }>
|
|
<b dangerouslySetInnerHTML={ { __html: SanitizeHtml(`${ chat.name }: `) } } />
|
|
{ !chat.showTranslation &&
|
|
<span className={ messageClassName } dangerouslySetInnerHTML={ { __html: SanitizeHtml(chat.message) } } /> }
|
|
{ chat.showTranslation &&
|
|
<div className="mt-[2px] flex flex-col gap-[2px]">
|
|
<div className="flex items-start gap-1 leading-[1.15]">
|
|
<span className="inline-block min-w-[52px] font-bold opacity-75">original:</span>
|
|
<span className={ messageClassName } dangerouslySetInnerHTML={ { __html: SanitizeHtml(chat.originalMessage || chat.message || '') } } />
|
|
</div>
|
|
<div className="flex items-start gap-1 leading-[1.15]">
|
|
<span className="inline-block min-w-[52px] font-bold opacity-75">translate:</span>
|
|
<span className={ messageClassName } dangerouslySetInnerHTML={ { __html: SanitizeHtml(chat.translatedMessage || chat.message || '') } } />
|
|
</div>
|
|
</div> }
|
|
</div>
|
|
) }
|
|
{ !hideBalloons && (
|
|
<div className="bubble-container relative inline-flex items-start">
|
|
{ chat.style === 0 && (
|
|
<div className="absolute -top-px left-px w-[30px] h-[calc(100%-0.5px)] rounded-[7px] z-1" style={ { backgroundColor: chat.color } } />
|
|
) }
|
|
<div className={ `chat-bubble bubble-${ chat.style } type-${ chat.chatType } relative z-1 wrap-break-word text-[14px]` } style={ { maxWidth: '100%' } }>
|
|
<div className="user-container flex items-center justify-center h-full max-h-[24px] overflow-hidden">
|
|
{ !hideAvatars && chat.imageUrl && chat.imageUrl.length > 0 && (
|
|
<div className={ `user-image absolute top-[-15px] w-[45px] h-[65px] bg-no-repeat bg-center ${ isOwnMessage ? 'right-[-9.25px]' : 'left-[-9.25px]' }` } style={ { backgroundImage: `url(${ chat.imageUrl })` } } />
|
|
) }
|
|
</div>
|
|
<div className={ `chat-content py-[5px] px-[6px] leading-none min-h-[25px] ${ !hideAvatars ? (isOwnMessage ? 'mr-[27px]' : 'ml-[27px]') : '' }` }>
|
|
<b className="username" dangerouslySetInnerHTML={ { __html: SanitizeHtml(`${ chat.name }: `) } } />
|
|
{ !chat.showTranslation &&
|
|
<span className={ messageClassName } dangerouslySetInnerHTML={ { __html: SanitizeHtml(`${ chat.message }`) } } onClick={ onClickChat } /> }
|
|
{ chat.showTranslation &&
|
|
<div className="mt-[2px] flex flex-col gap-[2px]" onClick={ onClickChat }>
|
|
<div className="flex items-start gap-1 leading-[1.1]">
|
|
<span className="inline-block min-w-[52px] font-bold" style={ { opacity: 0.75 } }>original:</span>
|
|
<span className={ messageClassName } dangerouslySetInnerHTML={ { __html: SanitizeHtml(`${ chat.originalMessage || chat.message || '' }`) } } />
|
|
</div>
|
|
<div className="flex items-start gap-1 leading-[1.1]">
|
|
<span className="inline-block min-w-[52px] font-bold" style={ { opacity: 0.75 } }>translate:</span>
|
|
<span className={ messageClassName } dangerouslySetInnerHTML={ { __html: SanitizeHtml(`${ chat.translatedMessage || chat.message || '' }`) } } />
|
|
</div>
|
|
</div> }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) }
|
|
</div>
|
|
);
|
|
}) }
|
|
</div>
|
|
{ !isAutoScrollEnabled && (
|
|
<button className="absolute bottom-2 right-2 px-2 py-1 text-white text-[11px] rounded bg-black/45 hover:bg-black/60" onClick={ () =>
|
|
{
|
|
setIsAutoScrollEnabled(true);
|
|
scrollToLatest();
|
|
} } type="button">
|
|
Go to latest message
|
|
</button>
|
|
) }
|
|
</NitroCardContentView>
|
|
</NitroCardView>
|
|
);
|
|
};
|