fix: Sanitize HTML tooltips (#2538)

frontend/package.json

@@ -61,6 +61,7 @@
     "cors": "^2.8.3",
     "cross-env": "5.2.0",
     "css-loader": "4.3.0",
+    "dompurify": "^3.0.5",
     "dotenv": "6.2.0",
     "express": "4.17.3",
     "express-handlebars": "6.0.5",
@@ -135,6 +136,7 @@
     "@ffmpeg-installer/ffmpeg": "^1.1.0",
     "@types/classnames": "^2.3.1",
     "@types/color": "^3.0.3",
+    "@types/dompurify": "^3.0.2",
     "@types/react-router": "^5.1.19",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-select": "^2.0.3",

frontend/web/components/Tooltip.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import * as DOMPurify from 'dompurify'
+import Utils from 'common/utils/utils'
+
+const ReactTooltip = require('react-tooltip')
+
+type StyledTooltipProps = {
+  children: string
+}
+
+type TooltipProps = {
+  children: string
+  plainText: boolean
+  place?: string | undefined
+  title: JSX.Element // This is actually the Tooltip parent component
+}
+
+const StyledTooltip = ({ children }: StyledTooltipProps) => (
+  <div className='flex-row'>
+    <div className='icon--tooltip ion-ios-information-circle mr-1'></div>
+    <span>{`${children}`}</span>
+  </div>
+)
+
+const tooltipStyler = (plainText: boolean, children: string): string => {
+  const html = renderToStaticMarkup(
+    <StyledTooltip>{plainText ? children : '{{html}}'}</StyledTooltip>,
+  )
+  if (plainText) {
+    return html
+  }
+  return html.replace('{{html}}', DOMPurify.sanitize(children.toString()))
+}
+
+const Tooltip = ({
+  children,
+  place,
+  plainText,
+  title,
+}: TooltipProps): JSX.Element => {
+  const id = Utils.GUID()
+
+  return (
+    <span className='question-tooltip'>
+      {title ? (
+        <span data-for={id} data-tip>
+          {title}
+        </span>
+      ) : (
+        <span className='ion ion-ios-help' data-for={id} data-tip />
+      )}
+      <ReactTooltip
+        html
+        id={id}
+        place={place || 'top'}
+        type='dark'
+        effect='solid'
+      >
+        {tooltipStyler(plainText, children)}
+      </ReactTooltip>
+    </span>
+  )
+}
+
+export default Tooltip

frontend/web/components/tags/Tag.tsx

@@ -47,6 +47,7 @@ const Tag: FC<TagType> = ({
 
   return (
     <Tooltip
+      plainText
       title={
         <div
           onClick={() => onClick?.(tag as TTag)}

frontend/web/project/project-components.js

@@ -8,7 +8,7 @@ import Input from 'components/base/forms/Input'
 import InputGroup from 'components/base/forms/InputGroup'
 import PanelSearch from 'components/PanelSearch'
 import AccountStore from 'common/stores/account-store'
-import Tooltip from 'components/Toolip'
+import Tooltip from 'components/Tooltip'
 import ProjectProvider from 'common/providers/ProjectProvider'
 import AccountProvider from 'common/providers/AccountProvider'