Replace dompurify with sanitize-html ready for ssr

SalesforceCommerceCloud · Feb 18, 2023 · 231183a · 231183a
1 parent e95a23e
commit 231183a
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 29 deletions.
diff --git a/packages/template-retail-react-app/app/components/experience/image-with-text/index.jsx b/packages/template-retail-react-app/app/components/experience/image-with-text/index.jsx
@@ -7,7 +7,7 @@
 import React, {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import {Image, Box, Text, Link} from '@chakra-ui/react'
-import DOMPurify from 'dompurify'
+import sanitizeHtml from 'sanitize-html'
 
 /**
  * Image with text caption
@@ -21,15 +21,9 @@ import DOMPurify from 'dompurify'
  * @constructor
  */
 const ImageWithText = ({ITCLink, ITCText, image, heading, alt}) => {
-    const [sanitizedHtml, setSainitizedHtml] = useState(null)
-
-    useEffect(() => {
-        const purify = DOMPurify(window)
-        const cleanHeading = purify.sanitize(heading)
-        const cleanITCText = purify.sanitize(ITCText)
-        setSainitizedHtml({heading: cleanHeading, ITCText: cleanITCText})
-    }, [])
-
+    const sanitizeHtmlOptions = {
+        allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img'])
+    }
     return (
         <div className={'image-with-text'}>
             <figure className={'image-with-text-figure'}>
@@ -51,24 +45,24 @@ const ImageWithText = ({ITCLink, ITCText, image, heading, alt}) => {
                     <Text as="figcaption">
                         {heading && (
                             <Box className={'image-with-text-heading-container'}>
-                                <Text as="span" className={'image-with-text-heading-text'}>
-                                    <div
-                                        dangerouslySetInnerHTML={{
-                                            __html: sanitizedHtml?.heading
-                                        }}
-                                    />
-                                </Text>
+                                <Text
+                                    as="span"
+                                    className={'image-with-text-heading-text'}
+                                    dangerouslySetInnerHTML={{
+                                        __html: sanitizeHtml(heading, sanitizeHtmlOptions)
+                                    }}
+                                ></Text>
                             </Box>
                         )}
                         {ITCText && (
                             <Box>
-                                <Text as="span" className={'image-with-text-text-underneath'}>
-                                    <div
-                                        dangerouslySetInnerHTML={{
-                                            __html: sanitizedHtml?.ITCText
-                                        }}
-                                    />
-                                </Text>
+                                <Text
+                                    as="span"
+                                    className={'image-with-text-text-underneath'}
+                                    dangerouslySetInnerHTML={{
+                                        __html: sanitizeHtml(ITCText, sanitizeHtmlOptions)
+                                    }}
+                                ></Text>
                             </Box>
                         )}
                     </Text>

diff --git a/packages/template-retail-react-app/package-lock.json b/packages/template-retail-react-app/package-lock.json
diff --git a/packages/template-retail-react-app/package.json b/packages/template-retail-react-app/package.json
@@ -30,7 +30,6 @@
         "core-js": "2.4.0",
         "cross-env": "^5.2.0",
         "cross-fetch": "^3.1.5",
-        "dompurify": "3.0.0",
         "focus-visible": "^5.2.0",
         "framer-motion": "^3.7.0",
         "full-icu": "^1.3.1",
@@ -56,6 +55,7 @@
         "react-hook-form": "^6.15.5",
         "react-intl": "^5.13.1",
         "react-router-dom": "^5.1.2",
+        "sanitize-html": "2.10.0",
         "whatwg-fetch": "1.0.0"
     },
     "scripts": {