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
; +}; 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) => {