From abf835cf7f703ecb8d88ab0127b7b7bf03ccde46 Mon Sep 17 00:00:00 2001
From: Bogdan Tsechoev <bogdan@postgres.ai>
Date: Mon, 10 Jun 2024 15:20:57 +0000
Subject: [PATCH] Bot UI: ignore unsafe HTML tags in Markdown renderer

---
 .../src/pages/Bot/DebugDialog/DebugDialog.tsx |  3 +++
 .../pages/Bot/Messages/Message/Message.tsx    |  4 +++-
 ui/packages/platform/src/pages/Bot/utils.ts   | 20 ++++++++++++++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/ui/packages/platform/src/pages/Bot/DebugDialog/DebugDialog.tsx b/ui/packages/platform/src/pages/Bot/DebugDialog/DebugDialog.tsx
index 0ee4ac38..a752214d 100644
--- a/ui/packages/platform/src/pages/Bot/DebugDialog/DebugDialog.tsx
+++ b/ui/packages/platform/src/pages/Bot/DebugDialog/DebugDialog.tsx
@@ -5,6 +5,7 @@ import { DialogContent, IconButton, makeStyles, Typography } from "@material-ui/
 import ReactMarkdown from "react-markdown";
 import Format from "../../../utils/format";
 import { icons } from "@postgres.ai/shared/styles/icons";
+import { disallowedHtmlTagsForMarkdown } from "../utils";
 
 type DebugDialogProps = {
   isOpen: boolean;
@@ -80,6 +81,8 @@ export const DebugDialog = (props: DebugDialogProps) => {
                     components={{
                       p: 'div',
                     }}
+                    disallowedElements={disallowedHtmlTagsForMarkdown}
+                    unwrapDisallowed
                   >
                     {debugMessage.message}
                   </ReactMarkdown>
diff --git a/ui/packages/platform/src/pages/Bot/Messages/Message/Message.tsx b/ui/packages/platform/src/pages/Bot/Messages/Message/Message.tsx
index 62094ffe..919a3f90 100644
--- a/ui/packages/platform/src/pages/Bot/Messages/Message/Message.tsx
+++ b/ui/packages/platform/src/pages/Bot/Messages/Message/Message.tsx
@@ -8,7 +8,7 @@ import { colors } from "@postgres.ai/shared/styles/colors";
 import { icons } from "@postgres.ai/shared/styles/icons";
 import { DebugDialog } from "../../DebugDialog/DebugDialog";
 import { CodeBlock } from "./CodeBlock";
-import { permalinkLinkBuilder } from "../../utils";
+import { disallowedHtmlTagsForMarkdown, permalinkLinkBuilder } from "../../utils";
 
 type BaseMessageProps = {
   id: string | null;
@@ -321,6 +321,8 @@ export const Message = React.memo((props: MessageProps) => {
                 remarkPlugins={[remarkGfm]}
                 linkTarget='_blank'
                 components={renderers}
+                disallowedElements={disallowedHtmlTagsForMarkdown}
+                unwrapDisallowed
               />
           }
         </div>
diff --git a/ui/packages/platform/src/pages/Bot/utils.ts b/ui/packages/platform/src/pages/Bot/utils.ts
index 135835c7..ecf04052 100644
--- a/ui/packages/platform/src/pages/Bot/utils.ts
+++ b/ui/packages/platform/src/pages/Bot/utils.ts
@@ -11,4 +11,22 @@ export const permalinkLinkBuilder = (id: string): string => {
   const apiUrl = process.env.REACT_APP_API_URL_PREFIX || API_URL_PREFIX;
   const isV2API = /https?:\/\/.*v2\.postgres\.ai\b/.test(apiUrl);
   return `https://${isV2API ? 'v2.' : ''}postgres.ai/chats/${id}`;
-};
\ No newline at end of file
+};
+
+export const disallowedHtmlTagsForMarkdown= [
+  'script',
+  'style',
+  'iframe',
+  'form',
+  'input',
+  'link',
+  'meta',
+  'embed',
+  'object',
+  'applet',
+  'base',
+  'frame',
+  'frameset',
+  'audio',
+  'video',
+]
\ No newline at end of file