From 3faf5f5b9624c4648b1cb0bba19d3000cc293532 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 29 Jun 2023 10:02:28 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(chatMessage):=20sanitize=20H?=
 =?UTF-8?q?TML=20content=20to=20prevent=20potential=20XSS=20attacks=20?=
 =?UTF-8?q?=E2=9C=A8=20feat(chatMessage):=20improve=20rendering=20of=20mul?=
 =?UTF-8?q?ti-line=20messages=20The=20`convert`=20variable=20is=20now=20im?=
 =?UTF-8?q?ported=20before=20being=20used=20to=20convert=20ANSI=20to=20HTM?=
 =?UTF-8?q?L.=20Additionally,=20the=20`DOMPurify`=20library=20is=20importe?=
 =?UTF-8?q?d=20and=20used=20to=20sanitize=20the=20HTML=20content=20before?=
 =?UTF-8?q?=20rendering=20it,=20preventing=20potential=20XSS=20attacks.=20?=
 =?UTF-8?q?The=20rendering=20of=20multi-line=20messages=20has=20been=20imp?=
 =?UTF-8?q?roved=20by=20splitting=20the=20message=20by=20newline=20charact?=
 =?UTF-8?q?ers=20and=20rendering=20each=20line=20separately=20with=20a=20l?=
 =?UTF-8?q?ine=20break.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chatComponent/chatMessage/index.tsx       |  9 +++++----
 .../modals/chatModal/chatMessage/index.tsx    | 19 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index ee11d69cb..5bb4e8b33 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -2,9 +2,9 @@ import { useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { nodeColors } from "../../../utils";
 import Convert from "ansi-to-html";
-const convert = new Convert({ newline: true });
 import { MessageCircle } from "lucide-react";
-
+import DOMPurify from "dompurify";
+const convert = new Convert({ newline: true });
 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
   const [hidden, setHidden] = useState(true);
   return (
@@ -23,13 +23,14 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
                 <MessageCircle className="w-5 h-5 animate-bounce" />
               </div>
             )}
+
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
                 style={{ backgroundColor: nodeColors["thought"] }}
-                className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
+                className="text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
                 dangerouslySetInnerHTML={{
-                  __html: convert.toHtml(chat.thought),
+                  __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
                 }}
               ></div>
             )}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 3d4ce0b44..3b44ffe6f 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -11,7 +11,7 @@ import remarkMath from "remark-math";
 import { CodeBlock } from "./codeBlock";
 import Convert from "ansi-to-html";
 import { User2, MessageCircle } from "lucide-react";
-
+import DOMPurify from "dompurify";
 export default function ChatMessage({
   chat,
   lockChat,
@@ -78,10 +78,9 @@ export default function ChatMessage({
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500
-								bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+                className="text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500 bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
                 dangerouslySetInnerHTML={{
-                  __html: convert.toHtml(chat.thought),
+                  __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
                 }}
               ></div>
             )}
@@ -152,12 +151,12 @@ export default function ChatMessage({
       ) : (
         <div className="w-full flex items-center">
           <div className="text-start inline-block px-3 text-gray-600 dark:text-white">
-            <span
-              className="text-gray-600 dark:text-gray-200"
-              dangerouslySetInnerHTML={{
-                __html: message.replace(/\n/g, "<br>"),
-              }}
-            ></span>
+            {message.split("\n").map((line, index) => (
+              <span key={index}>
+                {line}
+                <br />
+              </span>
+            ))}
           </div>
         </div>
       )}