adding support for dompurify to sanitize html

data-dot-all · Dec 18, 2023 · 137aada · 137aada
1 parent c0f54f9
commit 137aada
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
               ) : (
                 <>