fix: Update sanitize util (#391)

epam · Sep 24, 2024 · d5cc72a · d5cc72a
1 parent 32688f5
commit d5cc72a
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 138 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "carbon-components-react": "7.59.6",
     "clsx": "^1.2.1",
     "d3-path": "3.1.0",
+    "dompurify": "^3.1.6",
     "elkjs": "^0.8.2",
     "humanize-duration": "^3.27.3",
     "lodash": "^4.17.21",
@@ -63,7 +64,6 @@
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
     "react-zoom-pan-pinch": "^3.1.0",
-    "sanitize-html": "^2.13.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

diff --git a/src/components/LoadingWrapper/index.tsx b/src/components/LoadingWrapper/index.tsx
@@ -6,15 +6,11 @@ export const LoadingWrapper: React.FC<{ isLoading: boolean; size?: number }> = (
   isLoading,
   size = 40,
 }) => {
-  return (
-    <Grid container justifyContent={'center'} alignItems={'center'}>
-      {isLoading ? (
-        <CircularProgress size={size} />
-      ) : (
-        <Grid item xs={12}>
-          {children}
-        </Grid>
-      )}
+  return isLoading ? (
+    <Grid container justifyContent={'center'} alignItems={'center'} sx={{ height: '100%' }}>
+      <CircularProgress size={size} />
     </Grid>
+  ) : (
+    <>{children}</>
   );
 };
diff --git a/src/widgets/AIChat/components/Chat/index.tsx b/src/widgets/AIChat/components/Chat/index.tsx
@@ -232,7 +232,7 @@ export const Chat = ({
         const newConversation = {
           ...prev,
           conversationHistory: [
-            ...prev.conversationHistory,
+            ...(prev?.conversationHistory || []),
             {
               id: uuidv4(),
               createdAt: new Date().toISOString(),

diff --git a/src/widgets/AIChat/index.tsx b/src/widgets/AIChat/index.tsx
@@ -3,6 +3,7 @@ import { Box, Fab, IconButton, Popover, Stack, Typography } from '@mui/material'
 import React from 'react';
 import { useQuery } from 'react-query';
 import { v4 as uuidv4 } from 'uuid';
+import { LoadingWrapper } from '../../components/LoadingWrapper';
 import { ICONS } from '../../icons/iconify-icons-mapping';
 import { SecretKubeObject } from '../../k8s/groups/default/Secret';
 import { SECRET_LABEL_SECRET_TYPE } from '../../k8s/groups/default/Secret/labels';
@@ -55,12 +56,13 @@ export const AiChat = ({ codemieSecretData }: { codemieSecretData: CodemieSecret
     },
   });
 
-  const query = useQuery({
+  const {
+    data: assistantData,
+    error: requestError,
+    isLoading: assistantDataIsLoading,
+  } = useQuery({
     queryKey: ['assistant', codemieSecretData?.assistantId],
     queryFn: () => getAssistantFetcher(),
-    staleTime: 60000, // 1 minute
-    cacheTime: 60000, // 1 minute
-    retry: false,
     onSuccess: (data) => {
       const newConversation = createStateConversation({
         conversationId: newConversationID,
@@ -76,8 +78,6 @@ export const AiChat = ({ codemieSecretData }: { codemieSecretData: CodemieSecret
     },
   });
 
-  const { data: assistantData, error: requestError } = query;
-
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -190,12 +190,14 @@ export const AiChat = ({ codemieSecretData }: { codemieSecretData: CodemieSecret
             </Box>
           )}
           <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>
-            <Chat
-              conversation={activeConversation}
-              updateConversation={updateConversation}
-              codemieSecretData={codemieSecretData}
-              requestError={requestError as Error}
-            />
+            <LoadingWrapper isLoading={assistantDataIsLoading}>
+              <Chat
+                conversation={activeConversation}
+                updateConversation={updateConversation}
+                codemieSecretData={codemieSecretData}
+                requestError={requestError as Error}
+              />
+            </LoadingWrapper>
           </Box>
         </StyledChatBody>
       </Popover>

diff --git a/src/widgets/AIChat/utils/sanitizeMessage.ts b/src/widgets/AIChat/utils/sanitizeMessage.ts
@@ -1,22 +1,31 @@
-import * as sanitizeHtml from 'sanitize-html';
+import DOMPurify from 'dompurify';
 
-export const sanitizeMessage = (html: string): string =>
-  sanitizeHtml(html, {
-    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']), // example of adding 'img' to the default allowed tags
-    allowedAttributes: {
-      a: ['href', 'name', 'target'],
-      img: ['src'],
-    },
-    selfClosing: ['img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta'],
-    allowedSchemes: ['http', 'https', 'ftp', 'mailto'],
-    allowedSchemesByTag: {
-      a: ['http', 'https', 'ftp', 'mailto'],
-      img: ['http', 'https'],
-    },
-    allowProtocolRelative: true,
-    transformTags: {
-      a: sanitizeHtml.simpleTransform('a', { rel: 'noopener noreferrer' }, true),
-    },
-    forbiddenTags: ['style', 'script', 'iframe', 'form'],
-    forbiddenAttributes: ['style', 'onerror', 'onload', 'onclick'],
+export const sanitizeMessage = (html: string): string => {
+  return DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: ['p', 'strong', 'em', 'b', 'i', 'ul', 'ol', 'li', 'a', 'hr', 'br'],
+    ALLOWED_ATTR: ['href', 'target'],
+
+    ALLOW_UNKNOWN_PROTOCOLS: false,
+
+    ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto):)/i,
+
+    ADD_ATTR: ['rel'],
+    ADD_TAGS: ['u'],
+    FORBID_TAGS: [
+      'style',
+      'script',
+      'iframe',
+      'form',
+      'input',
+      'button',
+      'select',
+      'textarea',
+      'noscript',
+      'embed',
+      'object',
+      'base',
+      'link',
+    ],
+    FORBID_ATTR: ['style', 'on*', 'background', 'srcset', 'formaction', 'form', 'xlink:href'],
   });
+};
diff --git a/src/widgets/dialogs/ManageCodebaseBranch/__snapshots__/index.test.tsx.snap b/src/widgets/dialogs/ManageCodebaseBranch/__snapshots__/index.test.tsx.snap
@@ -160,7 +160,7 @@ exports[`ManageCodebaseBranchDialog renders ManageCodebaseBranchDialog Create co
                 class="MuiBox-root css-17bmav7"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container css-1hbmzt3-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container css-qupyqv-MuiGrid-root"
                 >
                   <span
                     class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-1rcnq9c-MuiCircularProgress-root"
@@ -295,7 +295,7 @@ exports[`ManageCodebaseBranchDialog renders ManageCodebaseBranchDialog Create co
                 class="MuiBox-root css-17bmav7"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container css-1hbmzt3-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container css-qupyqv-MuiGrid-root"
                 >
                   <span
                     class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-1rcnq9c-MuiCircularProgress-root"
@@ -833,7 +833,7 @@ exports[`ManageCodebaseBranchDialog renders ManageCodebaseBranchDialog Edit comp
                 class="MuiBox-root css-17bmav7"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container css-1hbmzt3-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container css-qupyqv-MuiGrid-root"
                 >
                   <span
                     class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-1rcnq9c-MuiCircularProgress-root"
@@ -968,7 +968,7 @@ exports[`ManageCodebaseBranchDialog renders ManageCodebaseBranchDialog Edit comp
                 class="MuiBox-root css-17bmav7"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container css-1hbmzt3-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container css-qupyqv-MuiGrid-root"
                 >
                   <span
                     class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-1rcnq9c-MuiCircularProgress-root"