🔧 chore(chatMessage/index.tsx): import DOMPurify to sanitize HTML content in chat message thought

🐛 fix(chatMessage/index.tsx): use DOMPurify to sanitize HTML content in chat message thought to prevent XSS attacks
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-07-08 14:58:47 -03:00
commit ded0529d59

View file

@ -1,4 +1,5 @@
import Convert from "ansi-to-html"; import Convert from "ansi-to-html";
import DOMPurify from "dompurify";
import { ChevronDown } from "lucide-react"; import { ChevronDown } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
@ -12,7 +13,6 @@ import { ChatMessageType } from "../../../types/chat";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
import FileCard from "../fileComponent"; import FileCard from "../fileComponent";
import { CodeBlock } from "./codeBlock"; import { CodeBlock } from "./codeBlock";
export default function ChatMessage({ export default function ChatMessage({
chat, chat,
lockChat, lockChat,
@ -61,7 +61,7 @@ export default function ChatMessage({
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className=" form-modal-chat-thought " className=" form-modal-chat-thought "
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: convert.toHtml(chat.thought), __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
}} }}
></div> ></div>
)} )}