Add dompurify to dangerouslysetinnerhtml (#128)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.0.4",
+  "version": "2.0.5-alpha.1",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",
@@ -20,6 +20,7 @@
     "@tanstack/react-query": "^4.24.4",
     "@tanstack/react-table": "^8.7.9",
     "axios": "^1.3.2",
+    "dompurify": "^3.0.5",
     "prop-types": "^15.8.1",
     "qs": "^6.11.0",
     "react-datepicker": "^4.10.0",
@@ -68,4 +69,4 @@
     "lib",
     "dist"
   ]
-}
+}

src/components/DatasetSearchListItem/index.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import DOMPurify from 'dompurify';
 import TextTruncate from 'react-text-truncate';
 
 import { Button, Badge } from '@cmsgov/design-system';
 import TransformedDate from '../TransformedDate';
 import './dataset-search-list-item.scss';
 
 const dangerousDescriptionElement = ({ children }) => (
-  <span dangerouslySetInnerHTML={{ __html: children }} />
+  <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(children) }} />
 );
 
 const DatasetSearchListItem = ({ item, updateFacets }) => {

src/templates/Dataset/DatasetBody.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import DOMPurify from 'dompurify';
 import SwaggerUI from 'swagger-ui-react';
 import { Badge, Button } from '@cmsgov/design-system';
 import useDatastore from '../../services/useDatastore';
@@ -76,7 +77,7 @@ const DatasetBody = ({
               </p>
             )}
           </div>
-          <p className="dc-c-metadata-description" dangerouslySetInnerHTML={{ __html: dataset.description }} />
+          <p className="dc-c-metadata-description" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dataset.description) }} />
           {resource.columns && Object.keys(resource.schema).length ? (
             <>
               <h2 className="dc-resource-header">Resource Preview</h2>
@@ -154,7 +155,7 @@ const DatasetBody = ({
           {dataset.keyword && (
             <DatasetTags keywords={dataset.keyword} />
           )}
-          
+
           {Object.keys(distribution).length && fileFormat === 'CSV' ? (
             <div className="dc-c-dataset-tags ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1">
               <h2 className="ds-u-color--primary ds-u-font-size--h3 ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2">

src/templates/FilteredResource/FilteredResourceBody.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import qs from 'qs';
+import DOMPurify from 'dompurify';
 import { Link, useNavigate } from 'react-router-dom';
 import SwaggerUI from 'swagger-ui-react';
 import useDatastore from '../../services/useDatastore';
@@ -86,7 +87,7 @@ const FilteredResourceBody = ({
           <h1 className="ds-title">{customTitle ? customTitle : pageTitle}</h1>
           <p
             className="ds-u-margin-top--0 dc-c-metadata-description"
-            dangerouslySetInnerHTML={{ __html: distribution.data.description }}
+            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(distribution.data.description) }}
           />
           {resource.columns && Object.keys(resource.schema).length && (
             <QueryBuilder