From 137aadaa64f0f30f9749c37185d4fbebece2d67a Mon Sep 17 00:00:00 2001
From: Zilvinas Saltys <zilvinas.saltys@yahooinc.com>
Date: Mon, 18 Dec 2023 14:14:44 +0000
Subject: [PATCH] adding support for dompurify to sanitize html

---
 frontend/package.json                               |  1 +
 frontend/src/design/components/SanitizedHTML.js     | 12 ++++++++++++
 frontend/src/design/components/index.js             |  1 +
 .../Environments/views/EnvironmentCreateForm.js     | 13 ++++++-------
 4 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/design/components/SanitizedHTML.js

diff --git a/frontend/package.json b/frontend/package.json
index d233f5b2e..155bb027d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -60,6 +60,7 @@
     "react-router": "6.0.0",
     "react-router-dom": "6.0.0",
     "react-scripts": "^5.0.1",
+    "dompurify": "^3.0.6",
     "simplebar": "^5.3.6",
     "simplebar-react": "^2.3.6",
     "web-vitals": "^2.1.4",
diff --git a/frontend/src/design/components/SanitizedHTML.js b/frontend/src/design/components/SanitizedHTML.js
new file mode 100644
index 000000000..a802d9ba0
--- /dev/null
+++ b/frontend/src/design/components/SanitizedHTML.js
@@ -0,0 +1,12 @@
+import DOMPurify from 'dompurify';
+
+export const SanitizedHTML = ({ dirtyHTML }) => {
+  const defaultOptions = {
+    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
+    ALLOWED_ATTR: ['href']
+  };
+
+  const sanitizedHtml = DOMPurify.sanitize(dirtyHTML, defaultOptions);
+
+  return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;
+};
diff --git a/frontend/src/design/components/index.js b/frontend/src/design/components/index.js
index 9fcddb9f1..b9c460dd7 100644
--- a/frontend/src/design/components/index.js
+++ b/frontend/src/design/components/index.js
@@ -28,3 +28,4 @@ export * from './UpVotesReadOnly';
 export * from './defaults';
 export * from './layout';
 export * from './popovers';
+export * from './SanitizedHTML';
diff --git a/frontend/src/modules/Environments/views/EnvironmentCreateForm.js b/frontend/src/modules/Environments/views/EnvironmentCreateForm.js
index e5dca2d06..f2c889108 100644
--- a/frontend/src/modules/Environments/views/EnvironmentCreateForm.js
+++ b/frontend/src/modules/Environments/views/EnvironmentCreateForm.js
@@ -32,6 +32,7 @@ import { Helmet } from 'react-helmet-async';
 import { Link as RouterLink, useNavigate, useParams } from 'react-router-dom';
 import * as Yup from 'yup';
 import {
+  SanitizedHTML,
   ArrowLeftIcon,
   ChevronRightIcon,
   ChipInput,
@@ -306,13 +307,11 @@ const EnvironmentCreateForm = (props) => {
             <CardContent>
               {config.core.custom_env_linking_text !== undefined ? (
                 <Box>
-                  <Typography
-                    color="textSecondary"
-                    variant="subtitle2"
-                    dangerouslySetInnerHTML={{
-                      __html: config.core.custom_env_linking_text
-                    }}
-                  />
+                  <Typography color="textSecondary" variant="subtitle2">
+                    <SanitizedHTML
+                      dirtyHTML={config.core.custom_env_linking_text}
+                    />
+                  </Typography>
                 </Box>
               ) : (
                 <>