use dompurify

Signed-off-by: Alex Rybchenko <arybchenko@box.com>

plugins/gcalendar-homepage/package.json

@@ -31,12 +31,12 @@
     "@testing-library/jest-dom": "^5.16.2",
     "classnames": "^2.3.1",
     "cross-fetch": "^3.1.5",
+    "dompurify": "^2.3.6",
     "lodash": "^4.17.21",
     "luxon": "^2.3.0",
     "material-ui-popup-state": "^2.0.0",
     "react-query": "^3.34.16",
-    "react-use": "^17.2.4",
-    "sanitize-html": "^2.7.0"
+    "react-use": "^17.2.4"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0"
@@ -49,6 +49,7 @@
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.8",
+    "@types/dompurify": "^2.3.3",
     "@types/gapi": "^0.0.41",
     "@types/gapi.auth2": "^0.0.56",
     "@types/gapi.client.calendar": "^3.0.10",

plugins/gcalendar-homepage/src/components/CalendarCard/CalendarEventPopoverContent.tsx

@@ -15,7 +15,7 @@
  */
 import { sortBy } from 'lodash';
 import React from 'react';
-import sanitizeHtml from 'sanitize-html';
+import DOMPurify from 'dompurify';
 
 import { useAnalytics } from '@backstage/core-plugin-api';
 
@@ -101,7 +101,9 @@ export const CalendarEventPopoverContent = ({
           <Box
             className={classes.description}
             dangerouslySetInnerHTML={{
-              __html: sanitizeHtml(event.description),
+              __html: DOMPurify.sanitize(event.description, {
+                USE_PROFILES: { html: true },
+              }),
             }}
           />
         </>