Sanitize user/database-derived html properly before display (#1731)

bobular · web-flow · commit 364aa07dd4cd · 2026-06-03T23:36:19.000+01:00
* add dompurify and apply to all dangerouslySetInnerHTML

* ban img tags to keep behaviour the same
diff --git a/packages/libs/coreui/package.json b/packages/libs/coreui/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "@react-hook/size": "^2.1.2",
     "core-js": "^3.25.3",
+    "dompurify": "^3.4.7",
     "lodash": "^4.17.21",
     "react-cool-dimensions": "^2.0.7",
     "react-draggable": "^4.4.5",
diff --git a/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx b/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx
@@ -1,4 +1,5 @@
 import React, { CSSProperties } from 'react';
+import DOMPurify from 'dompurify';
 
 import { Tooltip } from '../../info/Tooltip';
 
@@ -54,7 +55,11 @@ const MesaTooltip = ({
     <Tooltip
       title={
         renderHtml ? (
-          <div dangerouslySetInnerHTML={{ __html: content as string }} />
+          <div
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(content as string),
+            }}
+          />
         ) : (
           content ?? <></>
         )
diff --git a/packages/libs/coreui/src/components/Mesa/Templates.jsx b/packages/libs/coreui/src/components/Mesa/Templates.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 
 import { OptionsDefaults } from './Defaults';
 import OverScroll from './Components/OverScroll';
@@ -35,7 +36,9 @@ const Templates = {
     let { displayText, url } = value;
     let href = url ? url : '#';
     let text = displayText.length ? value.displayText : href;
-    text = <div dangerouslySetInnerHTML={{ __html: text }} />;
+    text = (
+      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text) }} />
+    );
     let target = '_blank';
 
     const props = { href, target, className };
@@ -59,7 +62,9 @@ const Templates = {
   htmlCell({ key, value, row, rowIndex, column }) {
     const { truncated } = column;
     const className = 'Cell HtmlCell Cell-' + key;
-    const content = <div dangerouslySetInnerHTML={{ __html: value }} />;
+    const content = (
+      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(value) }} />
+    );
     const size = truncated === true ? '16em' : truncated;
 
     return truncated ? (
diff --git a/packages/libs/coreui/src/components/inputs/SelectTree/Utils.tsx b/packages/libs/coreui/src/components/inputs/SelectTree/Utils.tsx
@@ -1,4 +1,5 @@
 import 'regenerator-runtime/runtime';
+import DOMPurify from 'dompurify';
 // Field types
 // -----------
 
@@ -384,13 +385,10 @@ export function safeHtml<P>(
   if (str.indexOf('<') === -1) {
     return <Component {...props}>{str}</Component>;
   }
-  // Use innerHTML to auto close tags
-  const container = document.createElement('div');
-  container.innerHTML = str;
   return (
     <Component
       {...props}
-      dangerouslySetInnerHTML={{ __html: container.innerHTML }}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(str) }}
     />
   );
 }
diff --git a/packages/libs/preferred-organisms/package.json b/packages/libs/preferred-organisms/package.json
@@ -18,6 +18,7 @@
     "@veupathdb/coreui": "workspace:^",
     "@veupathdb/wdk-client": "workspace:^",
     "@veupathdb/web-common": "workspace:^",
+    "dompurify": "^3.4.7",
     "lodash": "^4.17.21",
     "recoil": "^0.7.7"
   },
diff --git a/packages/libs/preferred-organisms/src/lib/hooks/maxRecommendedGate.tsx b/packages/libs/preferred-organisms/src/lib/hooks/maxRecommendedGate.tsx
@@ -1,4 +1,5 @@
 import { useState, useCallback } from 'react';
+import DOMPurify from 'dompurify';
 import { Dialog } from '@veupathdb/wdk-client/lib/Components';
 import {
   FilledButton,
@@ -99,7 +100,11 @@ export function useMaxRecommendedGate(
       <div className="MaxRecommendedGate">
         <div className="MaxRecommendedGate--Message">
           {customMessage ? (
-            <div dangerouslySetInnerHTML={{ __html: customMessage }} />
+            <div
+              dangerouslySetInnerHTML={{
+                __html: DOMPurify.sanitize(customMessage),
+              }}
+            />
           ) : (
             defaultMessage
           )}
diff --git a/packages/libs/wdk-client/package.json b/packages/libs/wdk-client/package.json
@@ -25,6 +25,7 @@
     "@veupathdb/components": "workspace:^",
     "@veupathdb/coreui": "workspace:^",
     "classnames": "^2.2.0",
+    "dompurify": "^3.4.7",
     "history": "^4.10.1",
     "json-stable-stringify": "^1.0.0",
     "localforage": "^1.5.0",
diff --git a/packages/libs/wdk-client/src/Utils/ComponentUtils.tsx b/packages/libs/wdk-client/src/Utils/ComponentUtils.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import DOMPurify from 'dompurify';
 import { AttributeValue } from '../Utils/WdkModel';
 import { stripHTML } from './DomUtils';
 
@@ -267,13 +268,10 @@ export function safeHtml<P>(
   if (str.indexOf('<') === -1 && !isHtmlEntityFound) {
     return <Component {...props}>{str}</Component>;
   }
-  // Use innerHTML to auto close tags
-  let container = document.createElement('div');
-  container.innerHTML = str;
   return (
     <Component
       {...props}
-      dangerouslySetInnerHTML={{ __html: container.innerHTML }}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(str) }}
     />
   );
 }
diff --git a/packages/libs/wdk-client/src/Views/ResultTableSummaryView/AttributeCell.tsx b/packages/libs/wdk-client/src/Views/ResultTableSummaryView/AttributeCell.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { isEqual, truncate } from 'lodash';
+import DOMPurify from 'dompurify';
 import { RecordInstance, AttributeField } from '../../Utils/WdkModel';
 import { safeHtml, wrappable } from '../../Utils/ComponentUtils';
 import { Tooltip } from '@veupathdb/coreui';
@@ -78,7 +79,7 @@ function AttributeCellInner({ attribute, recordInstance }: AttributeCellProps) {
       <a
         href={url}
         dangerouslySetInnerHTML={{
-          __html: truncatedDisplay,
+          __html: DOMPurify.sanitize(truncatedDisplay),
         }}
       />
     </div>
diff --git a/packages/libs/web-common/package.json b/packages/libs/web-common/package.json
@@ -37,6 +37,7 @@
     "@veupathdb/eda": "workspace:^",
     "@veupathdb/wdk-client": "workspace:^",
     "custom-event-polyfill": "^1.0.7",
+    "dompurify": "^3.4.7",
     "md5": "^2.3.0",
     "pluralize": "^8.0.0",
     "whatwg-fetch": "^3.5.0"
diff --git a/packages/libs/web-common/src/App/Header/HeaderNav.jsx b/packages/libs/web-common/src/App/Header/HeaderNav.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 import { siteSearchServiceUrl } from '../../config';
 import SiteMenu from '../../App/SiteMenu';
 import { UserMenu, UserMenuGuest } from '../../App/UserMenu';
@@ -213,7 +214,9 @@ class HeaderNav extends React.Component {
             <Branding {...this.props} />
           </div>
           <div style={{ alignSelf: 'center' }}>
-            <h3 dangerouslySetInnerHTML={{ __html: tagline }} />
+            <h3
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(tagline) }}
+            />
           </div>
           <a href="https://veupathdb.org" target="_blank">
             <img src={partofveupath} id="VEuPathLogo" />
diff --git a/packages/libs/web-common/src/App/ImageCard/ImageCard.jsx b/packages/libs/web-common/src/App/ImageCard/ImageCard.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 
 import './ImageCard.scss';
 
@@ -34,9 +35,15 @@ class ImageCard extends React.Component {
         />
         <div className="box ImageCard-Title">
           <a href={linkUrl}>
-            <h3 dangerouslySetInnerHTML={{ __html: title }} />
+            <h3
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(title) }}
+            />
           </a>
-          <p dangerouslySetInnerHTML={{ __html: description }} />
+          <p
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(description),
+            }}
+          />
         </div>
         <a className="ImageCard-Footer" href={linkUrl} target={linkTarget}>
           {linkText} <Icon fa={'chevron-circle-right'} />
diff --git a/packages/libs/web-common/src/App/Searches/SearchCard.jsx b/packages/libs/web-common/src/App/Searches/SearchCard.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 
 import './SearchCard.scss';
 
@@ -47,7 +48,7 @@ class SearchCard extends React.Component {
         <div className="box SearchCard-Body">
           <div
             dangerouslySetInnerHTML={{
-              __html: httpHtml({ description }),
+              __html: DOMPurify.sanitize(httpHtml({ description })),
             }}
           />
         </div>
diff --git a/packages/libs/web-common/src/App/Studies/StudyCard.jsx b/packages/libs/web-common/src/App/Studies/StudyCard.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 import { connect } from 'react-redux';
 import { useEda } from '../../config';
 import { CategoryIcon } from '../../App/Categories';
@@ -177,7 +178,10 @@ class StudyCard extends React.Component {
         <div className="box StudyCard-Body">
           <ul>
             {points.map((point, index) => (
-              <li key={index} dangerouslySetInnerHTML={{ __html: point }} />
+              <li
+                key={index}
+                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(point) }}
+              />
             ))}
           </ul>
         </div>
diff --git a/packages/libs/web-common/src/components/SiteSearch/SiteSearch.tsx b/packages/libs/web-common/src/components/SiteSearch/SiteSearch.tsx
@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { Tooltip } from '@veupathdb/coreui';
 import { DataGrid } from '@veupathdb/coreui';
 import {
@@ -1585,15 +1586,11 @@ function makeGenericSummary(
 
 function HtmlString(props: { value: string }) {
   const { value } = props;
-  const formattedValue = useMemo(() => {
-    const div = document.createElement('div');
-    div.innerHTML = value;
-    div
-      .querySelectorAll('img, object, iframe')
-      .forEach((el) => el.parentElement?.removeChild(el));
-    return div.innerHTML;
-  }, [value]);
-  return <span dangerouslySetInnerHTML={{ __html: formattedValue }} />;
+  const sanitized = useMemo(
+    () => DOMPurify.sanitize(value, { FORBID_TAGS: ['img'] }),
+    [value]
+  );
+  return <span dangerouslySetInnerHTML={{ __html: sanitized }} />;
 }
 
 function formatSummaryFieldValue(value?: string | string[]) {
diff --git a/packages/libs/web-common/src/components/homepage/FeaturedTools.tsx b/packages/libs/web-common/src/components/homepage/FeaturedTools.tsx
@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import React, {
   useCallback,
   useEffect,
@@ -393,7 +394,7 @@ const SelectionBody = ({ entry }: SelectionBodyProps) => {
         ref={ref}
         className={cx('SelectionBodyContent', isExpanded && 'expanded')}
         dangerouslySetInnerHTML={{
-          __html: entry?.output || '...',
+          __html: DOMPurify.sanitize(entry?.output || '...'),
         }}
       ></div>
       {isOverflowing && (
diff --git a/packages/libs/web-common/src/components/records/DatasetRecordClasses.DatasetRecordClass.jsx b/packages/libs/web-common/src/components/records/DatasetRecordClasses.DatasetRecordClass.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 import { connect } from 'react-redux';
 import { HelpIcon, Link } from '@veupathdb/wdk-client/lib/Components';
 import { pure } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
@@ -117,7 +118,11 @@ export function RecordHeading(props) {
           {organism_prefix ? (
             <>
               <dt>Organism (source or reference)</dt>
-              <dd dangerouslySetInnerHTML={{ __html: organism_prefix }} />
+              <dd
+                dangerouslySetInnerHTML={{
+                  __html: DOMPurify.sanitize(organism_prefix),
+                }}
+              />
             </>
           ) : null}
 
@@ -161,7 +166,7 @@ export function RecordHeading(props) {
           <dt>Summary</dt>
           <dd
             style={{ whiteSpace: 'normal' }}
-            dangerouslySetInnerHTML={{ __html: summary }}
+            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(summary) }}
           />
 
           {megabase_pairs ? (
diff --git a/packages/libs/web-common/src/components/records/UserDatasetRecordClasses.UserDatasetRecordClass.jsx b/packages/libs/web-common/src/components/records/UserDatasetRecordClasses.UserDatasetRecordClass.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 import { connect } from 'react-redux';
 import { HelpIcon, Link } from '@veupathdb/wdk-client/lib/Components';
 import { projectId } from '../../config';
@@ -88,7 +89,7 @@ export function RecordHeading(props) {
           <dt>Summary:</dt>
           <dd
             style={{ whiteSpace: 'normal' }}
-            dangerouslySetInnerHTML={{ __html: summary }}
+            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(summary) }}
           />
 
           <dt>Data Accessibility:</dt>
diff --git a/packages/sites/clinepi-site/package.json b/packages/sites/clinepi-site/package.json
@@ -88,6 +88,7 @@
     "dist"
   ],
   "dependencies": {
-    "@veupathdb/preferred-organisms": "workspace:^"
+    "@veupathdb/preferred-organisms": "workspace:^",
+    "dompurify": "^3.4.7"
   }
 }
diff --git a/packages/sites/clinepi-site/webapp/js/client/component-wrappers/QuestionWizard.jsx b/packages/sites/clinepi-site/webapp/js/client/component-wrappers/QuestionWizard.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 import { connect } from 'react-redux';
 import { IconAlt, Link } from '@veupathdb/wdk-client/lib/Components';
 import { getStudyByQuestionName } from '../selectors/siteData';
@@ -34,7 +35,7 @@ export default (QuestionWizard) =>
               <span id="prompt">Summary: </span>
               <span
                 dangerouslySetInnerHTML={{
-                  __html: wizardState.question.summary,
+                  __html: DOMPurify.sanitize(wizardState.question.summary),
                 }}
               />
             </div>
diff --git a/yarn.lock b/yarn.lock
