Revize e8591566

DomPurify + Escaping Impl

re #9626

frontend/package.json

@@ -11 +11 @@
     "@mui/material": "^5.5.2",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^0.26.0",
+    "dompurify": "^2.3.6",
     "dotenv": "^16.0.0",
     "formik": "^2.2.9",
     "jwt-decode": "^3.1.2",
     "leaflet": "^1.8.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-html-parser": "^2.0.2",
     "react-leaflet": "3.2.5",
     "react-leaflet-textpath": "^2.1.1",
     "react-redux": "^7.2.6",
@@ -60 +62 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "@types/dompurify": "^2.3.3",
     "@types/jest": "^27.0.1",
     "@types/leaflet": "^1.7.9",
     "@types/node": "^16.7.13",

frontend/src/features/Catalog/CatalogItemDetail.tsx

@@ -1 @@
-import {
-    Button,
-    Divider,
-    Grid,
-    Paper,
-    Typography,
-} from '@mui/material'
+import { Button, Divider, Grid, Paper, Typography } from '@mui/material'
 import { Fragment, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import axiosInstance from '../../api/api'
@@ -14 +8 @@
 import CatalogItemMap from './CatalogItemMap'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import { Link as RouterLink } from 'react-router-dom'
+import DOMPurify from 'dompurify'
+import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
 
 const apiError =
     'Error while fetching data from the server, please try again later.'
@@ -117 +113 @@
             <ShowErrorIfPresent err={err} />
 
             <Paper style={{ minHeight: '100vh' }} variant="outlined">
-
                 {isItemLoading && !err ? <ContentLoading /> : null}
                 {!isItemLoading && item ? (
                     <Grid container justifyContent="space-around">

frontend/src/features/Catalog/CatalogTable.tsx

@@ -23 +23 @@
     ShowAllItemsOption,
 } from './catalogSlice'
 import { fetchItems } from './catalogThunks'
+import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
 
 // Catalog table component
 const CatalogTable = () => {
@@ -94 +95 @@
                     ...textStyle,
                 }}
             >
-                {value || 'N/A'}
+                {formatHtmlStringToReactDom(value as string)}
             </Typography>
         </TableCell>
     )

frontend/src/utils/formatting/HtmlUtils.tsx

@@ +1 @@
+import DOMPurify from 'dompurify'
+import { ReactNode } from 'react'
+
+/**
+ * Formats HTML string to safe virtual DOM nodes.
+ * @param htmlString string to format
+ */
+export const formatHtmlStringToReactDom = (htmlString: string, defaultValue: string = '-'): ReactNode => {
+    if (!htmlString || htmlString.length === 0) {
+        return defaultValue
+    }
+    return (
+        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(htmlString) }} />
+    )
+}

frontend/src/utils/statePersistence.ts

@@ -1 @@
-// TODO this could be replaced with redux library
-const persist = (name: string, value: any) => {
-    localStorage.setItem(name, JSON.stringify(value))
-    return value
-}
-
-const load = (name: string) => {
-    const item = localStorage.getItem(name)
-    return item ? JSON.parse(item) : undefined
-}
-
-export { persist, load }

frontend/src/utils/thunkResponse.ts

@@ -1 @@
-
-export default interface ThunkResponse<T> {
-    success: boolean
-    data?: T
-}