Merge commit from fork

* Rework frontend code interacting directly with DOM

Rework frontend code that uses user-supplied data to render things like
comments and notes. In places where using React's built-in sanitization
is possible, the feature is used. In other places, where some markup
might be necessary, DOMPurify is used to sanitize the HTML before
rendering it.

Solves: GHSA-rh3r-8pxm-hg4w

* Remove test post DOM rework

* fixup! Rework frontend code interacting directly with DOM

Author: AlexGustafsson

ui/package-lock.json

@@ -27,6 +27,7 @@
     "clsx": "^2.1.1",
     "connected-react-router": "^6.9.3",
     "deepmerge": "^4.3.1",
+    "dompurify": "^3.3.1",
     "history": "^4.10.1",
     "inflection": "^3.0.2",
     "jwt-decode": "^4.0.0",

ui/package.json

@@ -33,6 +33,7 @@ import {
 import config from '../config'
 import { formatFullDate, intersperse } from '../utils'
 import AlbumExternalLinks from './AlbumExternalLinks'
+import { SafeHTML } from '../common/SafeHTML'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -225,8 +226,7 @@ const AlbumDetails = (props) => {
   const [imageLoading, setImageLoading] = useState(false)
   const [imageError, setImageError] = useState(false)
 
-  let notes =
-    albumInfo?.notes?.replace(new RegExp('<.*>', 'g'), '') || record.notes
+  let notes = albumInfo?.notes || record.notes
 
   if (notes) {
     notes += '..'
@@ -351,7 +351,7 @@ const AlbumDetails = (props) => {
                   variant={'body1'}
                   onClick={() => setExpanded(!expanded)}
                 >
-                  <span dangerouslySetInnerHTML={{ __html: notes }} />
+                  <span><SafeHTML>{notes}</SafeHTML></span>
                 </Typography>
               </Collapse>
             )}
@@ -371,7 +371,7 @@ const AlbumDetails = (props) => {
               variant={'body1'}
               onClick={() => setExpanded(!expanded)}
             >
-              <span dangerouslySetInnerHTML={{ __html: notes }} />
+              <span><SafeHTML>{notes}</SafeHTML></span>
             </Typography>
           </Collapse>
         </div>