Use dompurify to sanitize HTML on notifications (#537)

This replaces sanitize-html as this package was a commonjs package and
it created some errors in tests.

- Fixes #322

package.json

@@ -41,6 +41,7 @@
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "dayjs": "^1.8.29",
+    "dompurify": "^3.2.2",
     "file-loader": "^6.2.0",
     "imports-loader": "^4.0.1",
     "jquery": "^3.4.1",

src/js/build/detail.js

@@ -150,31 +150,16 @@ class BuildCommand {
   color_output(output) {
     // Dynamically load expensive chunks. These will be kept out of the normal
     // vendor bundle.
-    return Promise.all([
-      import(
-        /* webpackChunkName: 'ansi_up' */
-        "ansi_up"
-      ).then(({ default: AnsiUp }) => {
-        return AnsiUp;
-      }),
-      import(
-        /* webpackChunkName: 'sanitize-html' */
-        "sanitize-html"
-      ).then(({ default: sanitize_html }) => {
-        return sanitize_html;
-      }),
-    ]).then((imports) => {
-      let AnsiUp, sanitize_html;
-      [AnsiUp, sanitize_html] = imports;
-
+    return import(
+      /* webpackChunkName: 'ansi_up' */
+      "ansi_up"
+    ).then(({ default: AnsiUp }) => {
       // Build output lines
       let ansi_up = new AnsiUp();
       ansi_up.use_classes = true;
       output = ansi_up.ansi_to_html(output);
-      output = sanitize_html(output, {
-        allowedTags: ["span"],
-        allowedAttributes: { span: ["class"] },
-      });
+      // TODO use dompurify here
+      //output = DOMPurify.sanitize_html(output);
       return output;
     });
   }

src/js/modules/notifications.js

@@ -4,6 +4,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { when } from "lit/directives/when.js";
 import { classMap } from "lit/directives/class-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import DOMPurify from "dompurify";
 
 import { LightDOMElement } from "../application/elements";
 
@@ -143,7 +144,15 @@ export class NotificationListElement extends LightDOMElement {
       })
       .then((notifications) => {
         if (notifications) {
-          this.notifications = notifications;
+          this.notifications = notifications.map((notification) => {
+            notification.message.header = DOMPurify.sanitize(
+              notification.message.header,
+            );
+            notification.message.body = DOMPurify.sanitize(
+              notification.message.body,
+            );
+            return notification;
+          });
         }
       })
       .catch((err) => {