security: sanitize Strapi HTML to prevent stored XSS

package.json

@@ -48,6 +48,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "fast-geoip": "^1.1.88",
     "html2canvas": "^1.4.1",
+    "isomorphic-dompurify": "^3.12.0",
     "lodash.debounce": "4.0.8",
     "lodash.unescape": "4.0.1",
     "mixpanel-browser": "^2.65.0",

src/components/OurProjectsModal/OurProjectsModal.tsx

@@ -7,6 +7,8 @@ import { Tooltip as ReactTooltip } from 'react-tooltip';
 
 import { TRouter } from '@local-types/global';
 
+import { sanitizeHtml } from '@lib/sanitizeHtml';
+
 import ourProjectsData from '@data/ourProjects';
 
 import Button from '@components/Button';
@@ -93,7 +95,9 @@ const OurProjectsModal: FC<OurProjectsModalProps> = ({
             </div>
 
             <div
-              dangerouslySetInnerHTML={{ __html: project.description }}
+              dangerouslySetInnerHTML={{
+                __html: sanitizeHtml(project.description),
+              }}
               className={styles.description}
             />
 

src/components/_biases/BiasBody/demos/InformationBias/InformationBias.tsx

@@ -1,5 +1,7 @@
 import { useRouter } from 'next/router';
 
+import { sanitizeHtml } from '@lib/sanitizeHtml';
+
 import rawContent from './InformationBias.content';
 
 import styles from './InformationBias.module.scss';
@@ -45,8 +47,8 @@ export function After() {
       <div className={styles.specTable}>
         {c.after.specs.map(([k, v]) => (
           <div key={k} className={styles.specRow}>
-            <span dangerouslySetInnerHTML={{ __html: k }} />
-            <strong dangerouslySetInnerHTML={{ __html: v }} />
+            <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(k) }} />
+            <strong dangerouslySetInnerHTML={{ __html: sanitizeHtml(v) }} />
           </div>
         ))}
       </div>

src/components/_uxcp/CountryBiasMap/BiasPanel/BiasPanel.tsx

@@ -13,6 +13,8 @@ import {
 import type { StrapiBiasType } from '@local-types/data';
 import type { TRouter } from '@local-types/global';
 
+import { sanitizeHtml } from '@lib/sanitizeHtml';
+
 import { countryBiasByLocale, REGION_COLORS } from '@data/countryBias';
 
 import FlagImage from '../FlagImage';
@@ -204,7 +206,7 @@ const BiasPanel = forwardRef<HTMLDivElement, BiasPanelProps>(
                   <div
                     className={styles.BiasShort}
                     dangerouslySetInnerHTML={{
-                      __html: bias.description ?? '',
+                      __html: sanitizeHtml(bias.description),
                     }}
                   />
                 </Link>

src/components/_uxcp/DecisionTableModal/DecisionTableModal.tsx

@@ -4,6 +4,8 @@ import { Tooltip as ReactTooltip } from 'react-tooltip';
 
 import { TRouter } from '@local-types/global';
 
+import { sanitizeHtml } from '@lib/sanitizeHtml';
+
 import decisionTable from '@data/decisionTable';
 
 import Button from '@components/Button';
@@ -105,7 +107,9 @@ const DecisionTableModal = (props: DecisionTableModalProps) => {
               place={'top'}
             >
               <span
-                dangerouslySetInnerHTML={{ __html: props.descriptionOfBias }}
+                dangerouslySetInnerHTML={{
+                  __html: sanitizeHtml(props.descriptionOfBias),
+                }}
               />
             </ReactTooltip>
           </div>

src/lib/sanitizeHtml.ts

@@ -0,0 +1,9 @@
+import DOMPurify from 'isomorphic-dompurify';
+
+export const sanitizeHtml = (dirty: unknown): string => {
+  if (dirty == null || dirty === '') return '';
+  return DOMPurify.sanitize(String(dirty), {
+    USE_PROFILES: { html: true },
+    ADD_ATTR: ['target', 'rel'],
+  });
+};