Fix: Created a NewPR for implementing XSS protection-5

Author: boppanapraveen

src/components/UserProfile/EditableModal/RoleInfoModal.jsx

@@ -1,4 +1,5 @@
 import React, { useState , useEffect } from 'react';
+import DOMPurify from 'dompurify';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector, connect } from 'react-redux';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Col, Row} from 'reactstrap';
@@ -22,9 +23,29 @@ const RoleInfoModal = ({ info, auth, roleName}) => {
   const [infoContentModal, setInfoContentModal] = useState('');
   const dispatch = useDispatch();
 
+  // XSS Protection: Sanitize HTML content
+  const sanitizeHTML = (htmlContent) => {
+    if (!htmlContent || typeof htmlContent !== 'string') return '';
+
+    return DOMPurify.sanitize(htmlContent, {
+      ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'span', 'div'],
+      ALLOWED_ATTR: ['href', 'class'],
+      ALLOW_DATA_ATTR: false,
+      ALLOWED_URI_REGEXP: /^https?:\/\//, // Only allow http/https URLs
+    });
+  };
+
+  // XSS Protection: Sanitize text content
+  const sanitizeText = (textContent) => {
+    if (!textContent || typeof textContent !== 'string') return '';
+    return DOMPurify.sanitize(textContent, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] });
+  };
+
   useEffect(() => {
-    setInfoContentModal(infoContent);
-  }, [infoContent]);
+    // Sanitize content when setting initial state
+    setInfoContentModal(sanitizeHTML(infoContent));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [infoContent]); // sanitizeHTML is stable, no need to include in deps
 
   const handleSaveSuccess = async () => {
     toast.success('✔ The info was saved successfully!', {
@@ -53,7 +74,9 @@ const RoleInfoModal = ({ info, auth, roleName}) => {
   };
 
   const handleInputChange = (content) => {
-    setInfoContentModal(content);
+    // Sanitize content from rich text editor
+    const sanitizedContent = sanitizeHTML(content);
+    setInfoContentModal(sanitizedContent);
   };
 
   const handleSave = async (e) => {
@@ -63,14 +86,16 @@ const RoleInfoModal = ({ info, auth, roleName}) => {
       e.preventDefault();
     }
 
-    const updateInfo = {infoContent: infoContentModal};
+    // Sanitize content before saving
+    const sanitizedContent = sanitizeHTML(infoContentModal);
+    const updateInfo = {infoContent: sanitizedContent};
     let saveResult;
 
     // If info doesn't exist in database, create new record
     if (!info || !info._id) {
       const newInfo = {
-        infoName: roleName || 'UnknownRoleInfo',
-        infoContent: infoContentModal,
+        infoName: sanitizeText(roleName) || 'UnknownRoleInfo',
+        infoContent: sanitizedContent,
         visibility: '0'
       };
       saveResult = await dispatch(addInfoCollection(newInfo));
@@ -79,7 +104,7 @@ const RoleInfoModal = ({ info, auth, roleName}) => {
       saveResult = await dispatch(updateInfoCollection(info._id, updateInfo));
     }
 
-    setInfoContentModal(infoContentModal);
+    setInfoContentModal(sanitizedContent);
 
     if (saveResult === 200 || saveResult === 201) {
       await handleSaveSuccess();
@@ -110,7 +135,7 @@ const RoleInfoModal = ({ info, auth, roleName}) => {
                 <div
                   className={`${styles['role-info-content']} ${darkMode ? styles['dark-mode'] : ''}`}
                   style={{ paddingLeft: '20px' }}
-                  dangerouslySetInnerHTML={{ __html: infoContentModal }}
+                  dangerouslySetInnerHTML={{ __html: sanitizeHTML(infoContentModal) }}
                   onClick={() => setIsEditing(true)}
                 />}
             </ModalBody>