From 7e7f98fd9264c0d655855cc7dd9bc4795aa2e335 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 13 Mar 2024 00:21:54 +0530
Subject: [PATCH] sanitize html - add dompurify

---
 extensions/react-widget/package-lock.json     | 22 +++++++++++++++++++
 extensions/react-widget/package.json          |  2 ++
 .../src/components/DocsGPTWidget.tsx          |  3 ++-
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/extensions/react-widget/package-lock.json b/extensions/react-widget/package-lock.json
index 9f0c722c..928e12e9 100644
--- a/extensions/react-widget/package-lock.json
+++ b/extensions/react-widget/package-lock.json
@@ -21,6 +21,7 @@
         "@types/react-dom": "^18.2.19",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "dompurify": "^3.0.9",
         "flow-bin": "^0.229.2",
         "i": "^0.3.7",
         "install": "^0.13.0",
@@ -36,6 +37,7 @@
         "@babel/preset-react": "^7.23.3",
         "@parcel/packager-ts": "^2.12.0",
         "@parcel/transformer-typescript-types": "^2.12.0",
+        "@types/dompurify": "^3.0.5",
         "babel-loader": "^8.0.4",
         "process": "^0.11.10",
         "typescript": "^5.3.3"
@@ -5706,6 +5708,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.5",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.5.tgz",
@@ -5789,6 +5800,12 @@
       "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
       "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -6736,6 +6753,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.9.tgz",
+      "integrity": "sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ=="
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
diff --git a/extensions/react-widget/package.json b/extensions/react-widget/package.json
index b8bb3fd7..b4e308ae 100644
--- a/extensions/react-widget/package.json
+++ b/extensions/react-widget/package.json
@@ -38,6 +38,7 @@
     "@types/react-dom": "^18.2.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "dompurify": "^3.0.9",
     "flow-bin": "^0.229.2",
     "i": "^0.3.7",
     "install": "^0.13.0",
@@ -53,6 +54,7 @@
     "@babel/preset-react": "^7.23.3",
     "@parcel/packager-ts": "^2.12.0",
     "@parcel/transformer-typescript-types": "^2.12.0",
+    "@types/dompurify": "^3.0.5",
     "babel-loader": "^8.0.4",
     "process": "^0.11.10",
     "typescript": "^5.3.3"
diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index 2983e30c..656a57cd 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -7,6 +7,7 @@ import MessageIcon from '../assets/message.svg'
 import { fetchAnswerStreaming } from '../requests/streamingApi';
 import styled, { keyframes, createGlobalStyle } from 'styled-components';
 import snarkdown from '@bpmn-io/snarkdown';
+import { sanitize } from 'dompurify';
 const GlobalStyles = createGlobalStyle`
 .response pre {
     padding: 8px;
@@ -410,7 +411,7 @@ export const DocsGPTWidget = ({
                           type='ANSWER'
                           ref={(index === queries.length - 1) ? scrollRef : null}
                         >
-                          <div className="response" dangerouslySetInnerHTML={{ __html: snarkdown(query.response) }} />
+                          <div className="response" dangerouslySetInnerHTML={{ __html: sanitize(snarkdown(query.response)) }} />
                         </Message>
                       </MessageBubble>
                         : <div>