Merge branch 'escape_html_tags' into 'master'

Bot UI: ignore unsafe HTML tags in Markdown renderer See merge request postgres-ai/database-lab!876
postgres-ai · Jun 10, 2024 · 5e74458 · 5e74458
2 parents 978edf9 + abf835c
commit 5e74458
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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}`;
-};
+};
+
+export const disallowedHtmlTagsForMarkdown= [
+ 'script',
+ 'style',
+ 'iframe',
+ 'form',
+ 'input',
+ 'link',
+ 'meta',
+ 'embed',
+ 'object',
+ 'applet',
+ 'base',
+ 'frame',
+ 'frameset',
+ 'audio',
+ 'video',
+]