Merge pull request #1287 from Piumal1999/htmlrender

Improve document view component

Author: PasanT9

portals/devportal/src/main/webapp/package-lock.json

@@ -53,6 +53,7 @@
         "cleanup-dependencies": "0.0.6",
         "dataloader": "^2.1.0",
         "dayjs": "^1.11.13",
+        "dompurify": "3.3.3",
         "fetch-to-curl": "^0.6.0",
         "fs-react": "0.0.4",
         "graphiql": "^3.1.1",

portals/devportal/src/main/webapp/package.json

@@ -24,13 +24,10 @@
             },
             "syntaxHighlighterDarkTheme": false
         },
-        "sanitizeHtml": {
-            "allowedTags": false,
-            "allowedAttributes": false
-        },
-        "reactHTMLParser": {
-            "decodeEntries": true,
-            "tagsNotAllowed": []
+        "sanitizeHtmlDocs": {
+          "enabled": true,
+          "additionalAllowedTags": [],
+          "additionalAllowedAttributes": []
         }
     },
     "grantTypes": {

portals/devportal/src/main/webapp/site/public/theme/settings.json

@@ -147,7 +147,9 @@ function Carousel() {
                             >
                                 <HTMLRender html={slide.title} />
                             </div>
-                            <div className={classes.slideContentContent}><HTMLRender html={slide.content} /></div>
+                            <div className={classes.slideContentContent}>
+                                <HTMLRender html={slide.content} />
+                            </div>
                         </div>
                         <img
                             alt='slider'

portals/devportal/src/main/webapp/source/src/app/components/LandingPage/Carousel.jsx

@@ -20,36 +20,38 @@
  */
 import React from 'react'
 import parse from 'html-react-parser';
+import DOMPurify from 'dompurify';
 import Settings from 'Settings';
 
 /**
- * Render html content.
- * @param {int} props Props passing down from parent components.
+ * Render html content with optional sanitization.
+ * @param {object} props Props passing down from parent components.
+ * @param {string} props.html The HTML content to render.
+ * @param {boolean} [props.sanitize=true] Whether to sanitize the HTML content.
  * @returns {JSX} React render output.
  */
 export default function HTMLRender(props) {
-    const {html} = props;
-    // Extract html parser props from settings.json
-    const { tagsNotAllowed } = (Settings.app &&
-        Settings.app.reactHTMLParser) ? Settings.app.reactHTMLParser : {
-        tagsNotAllowed: [],
-    };
-    // Define a custom replace function to filter out script tags
-    const customReplace = (node) => {
-        if (node.type === 'tag' && tagsNotAllowed.find( t => t === node.name)) {
-            // You can handle script tags in any way you want here.
-            // For example, you can replace them with a harmless element like a <div>.
-            return <div>{node.name} tags are not allowed</div>;
-        }
-        // Return the node as is for other tags
-        return node;
-    };
-
-    // Use html-react-parser with the custom replace function
-    const parsedHtml = parse(html, {
-        replace: customReplace,
-    });
-    // Remove tags from html
+    const { html, sanitize = true } = props;
+    
+    // Extract sanitization config from settings.json
+    const sanitizeConfig = Settings.app?.sanitizeHtmlDocs || {};
+    const isSanitizationEnabled = sanitize === true && sanitizeConfig.enabled !== false;
+    
+    let parsedHtml;
+    
+    if (isSanitizationEnabled) {
+        // Use DOMPurify for sanitization when enabled
+        const sanitizationOptions = {
+            ADD_TAGS: sanitizeConfig.additionalAllowedTags || [],
+            ADD_ATTR: sanitizeConfig.additionalAllowedAttributes || [],
+        };
+        const sanitizedHtml = DOMPurify.sanitize(html, sanitizationOptions);
+        parsedHtml = parse(sanitizedHtml);
+    } else {
+        // Render without sanitization
+        parsedHtml = html ? parse(html) : null;
+    }
+    
     return (
         <>{parsedHtml}</>
     )

portals/devportal/src/main/webapp/source/src/app/components/Shared/HTMLRender.jsx

@@ -55,6 +55,7 @@
         "btoa": "^1.2.1",
         "caniuse-api": "^3.0.0",
         "dayjs": "^1.11.13",
+        "dompurify": "3.3.3",
         "downshift": "^6.1.12",
         "draft-js": "^0.11.7",
         "draftjs-to-html": "^0.9.1",

portals/publisher/src/main/webapp/package-lock.json

@@ -33,9 +33,10 @@
                 "other": ""
             }
         },
-        "reactHTMLParser": {
-            "decodeEntries": true,
-            "tagsNotAllowed": []
+        "sanitizeHtmlDocs": {
+          "enabled": true,
+          "additionalAllowedTags": [],
+          "additionalAllowedAttributes": []
         },
         "workflows": {
             "limit": 30

portals/publisher/src/main/webapp/package.json

@@ -20,37 +20,38 @@
  */
 import React from 'react'
 import parse from 'html-react-parser';
+import DOMPurify from 'dompurify';
 import Configuration from 'Config';
 
 /**
- * Render html content.
- * @param {int} props Props passing down from parent components.
+ * Render html content with optional sanitization.
+ * @param {object} props Props passing down from parent components.
+ * @param {string} props.html The HTML content to render.
+ * @param {boolean} [props.sanitize=true] Whether to sanitize the HTML content.
  * @returns {JSX} React render output.
  */
 export default function HTMLRender(props) {
-    const {html} = props;
-    // Extract html parser props from settings.json
-    const { tagsNotAllowed } = (Configuration.app && 
-        Configuration.app.reactHTMLParser) ? Configuration.app.reactHTMLParser : {
-            tagsNotAllowed: [],
+    const { html, sanitize = true } = props;
+    
+    // Extract sanitization config from Configuration
+    const sanitizeConfig = Configuration.app?.sanitizeHtmlDocs || {};
+    const isSanitizationEnabled = sanitize === true && sanitizeConfig.enabled !== false;
+    
+    let parsedHtml;
+    
+    if (isSanitizationEnabled) {
+        // Use DOMPurify for sanitization when enabled
+        const sanitizationOptions = {
+            ADD_TAGS: sanitizeConfig.additionalAllowedTags || [],
+            ADD_ATTR: sanitizeConfig.additionalAllowedAttributes || [],
         };
-    // Define a custom replace function to filter out script tags
-    const customReplace = (node) => {
-        if (node.type === 'tag' && tagsNotAllowed.find( t => t === node.name)) {
-            // You can handle script tags in any way you want here.
-            // For example, you can replace them with a harmless element like a <div>.
-            return <div>{node.name} tags are not allowed</div>;
-        }
-        // Return the node as is for other tags
-        return node;
-    };
-
-    // Use html-react-parser with the custom replace function
-    const parsedHtml = parse(html, {
-        replace: customReplace,
-    });
-    // Remove tags from html
-   
+        const sanitizedHtml = DOMPurify.sanitize(html, sanitizationOptions);
+        parsedHtml = parse(sanitizedHtml);
+    } else {
+        // Render without sanitization
+        parsedHtml = html ? parse(html) : null;
+    }
+    
     return (
         <>{parsedHtml}</>
     )