From 4d690fc43d2aafdd4b29383396c8e0871390f6e6 Mon Sep 17 00:00:00 2001
From: EiffelFly <57251712+EiffelFly@users.noreply.github.com>
Date: Mon, 29 Jul 2024 15:02:35 +0800
Subject: [PATCH] fix: fix not sanitized html issue

---
 packages/toolkit/package.json                     |  2 ++
 .../components/component-output/MDTextViewer.tsx  |  9 ++++++---
 pnpm-lock.yaml                                    | 15 ++++++++++++++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
index edc977ecbf..e35fb4934d 100644
--- a/packages/toolkit/package.json
+++ b/packages/toolkit/package.json
@@ -63,6 +63,7 @@
     "@types/react-avatar-editor": "^13.0.2",
     "@types/react-dom": "18.2.0",
     "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/sanitize-html": "^2.11.0",
     "@types/semver": "^7.5.3",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/uuid": "^9.0.1",
@@ -142,6 +143,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "reactflow": "^11.10.0",
     "recharts": "2.12.7",
+    "sanitize-html": "^2.13.0",
     "semver": "^7.5.4",
     "server-only": "^0.0.1",
     "unique-names-generator": "^4.7.1",
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output/MDTextViewer.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output/MDTextViewer.tsx
index 7c3f422332..5845b01481 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output/MDTextViewer.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output/MDTextViewer.tsx
@@ -3,6 +3,7 @@
 import * as React from "react";
 import cn from "clsx";
 import Markdown from "markdown-to-jsx";
+import sanitizeHtml from "sanitize-html";
 
 import { Switch } from "@instill-ai/design-system";
 
@@ -12,6 +13,8 @@ import { CopyButton } from "./CopyButton";
 export const MDTextViewer = ({ text }: { text: Nullable<string> }) => {
   const [enableFormattedText, setEnableFormattedText] = React.useState(false);
 
+  const sanitizedHtmlText = sanitizeHtml(text ?? "");
+
   return (
     <React.Fragment>
       {/* The anchor, code, paragraph in the MD viewer will overflow */}
@@ -62,7 +65,7 @@ export const MDTextViewer = ({ text }: { text: Nullable<string> }) => {
             </div>
           </div>
           <div className="ml-auto flex flex-row">
-            <CopyButton className="my-auto" text={text ?? ""} />
+            <CopyButton className="my-auto" text={sanitizedHtmlText} />
           </div>
         </div>
         <div>
@@ -72,7 +75,7 @@ export const MDTextViewer = ({ text }: { text: Nullable<string> }) => {
               enableFormattedText ? "" : "hidden",
             )}
           >
-            <Markdown>{text ?? ""}</Markdown>
+            <Markdown>{sanitizedHtmlText}</Markdown>
           </div>
           <pre
             className={cn(
@@ -80,7 +83,7 @@ export const MDTextViewer = ({ text }: { text: Nullable<string> }) => {
               enableFormattedText ? "hidden" : "",
             )}
           >
-            {text}
+            {sanitizedHtmlText}
           </pre>
         </div>
       </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1208307214..89a20859f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -600,7 +600,7 @@ importers:
         version: 4.3.0(vite@5.2.12(@types/node@18.19.8)(terser@5.27.0))
       postcss-import:
         specifier: ^15.1.0
-        version: 15.1.0(postcss@8.4.31)
+        version: 15.1.0(postcss@8.4.39)
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
@@ -854,6 +854,9 @@ importers:
       recharts:
         specifier: 2.12.7
         version: 2.12.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      sanitize-html:
+        specifier: ^2.13.0
+        version: 2.13.0
       semver:
         specifier: ^7.5.4
         version: 7.5.4
@@ -921,6 +924,9 @@ importers:
       '@types/react-syntax-highlighter':
         specifier: ^15.5.7
         version: 15.5.11
+      '@types/sanitize-html':
+        specifier: ^2.11.0
+        version: 2.11.0
       '@types/semver':
         specifier: ^7.5.3
         version: 7.5.6
@@ -24778,6 +24784,13 @@ snapshots:
       read-cache: 1.0.0
       resolve: 1.22.8
 
+  postcss-import@15.1.0(postcss@8.4.39):
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+
   postcss-js@4.0.1(postcss@8.4.31):
     dependencies:
       camelcase-css: 2.0.1