fix(xss): add DOMPurify to ReadMore.vue as defense-in-depth

Adds client-side HTML sanitization via DOMPurify to the ReadMore
component, which renders group and event descriptions via v-html.
Server-side Purify::clean() model mutators are the primary defense,
but this provides a second layer in case any write path bypasses
the model (raw DB queries, migrations, imports).

Author: ardelato

package.json

@@ -59,6 +59,7 @@
         "bootstrap4-datetimepicker": "^5.2.3",
         "chart.js": "^2.7.2",
         "codemirror": "^5.39.2",
+        "dompurify": "^3.4.0",
         "dropzone": "^5.7.2",
         "ekko-lightbox": "^5.3.0",
         "floatthead": "^2.1.2",

resources/js/components/ReadMore.vue

@@ -4,10 +4,10 @@
       <p v-html="formattedString"></p>
     </span>
     <span v-else-if="html">
-      <span v-if="!needsTruncating" v-html="html" class="w-100" />
+      <span v-if="!needsTruncating" v-html="sanitizedHtml" class="w-100" />
       <span v-else>
-        <span v-if="!isReadMore" v-html="truncatedHTML" class="w-100" />
-        <span v-else v-html="html" class="w-100" />
+        <span v-if="!isReadMore" v-html="sanitizedTruncatedHtml" class="w-100" />
+        <span v-else v-html="sanitizedHtml" class="w-100" />
       </span>
     </span>
     <span v-if="needsTruncating">
@@ -20,6 +20,7 @@
 <script>
 const htmlToText = require('html-to-text');
 import clip from "text-clipper"
+import DOMPurify from "dompurify"
 // Originally based on https://github.com/orlyyani/read-more, with thanks.
 
 export default {
@@ -70,12 +71,18 @@ export default {
 
       return val_container;
     },
+    sanitizedHtml() {
+      return this.html ? DOMPurify.sanitize(this.html) : null
+    },
     truncatedHTML() {
       // We need to truncate HTML with care to ensure that the result is tag safe; string truncation isn't good
       // enough.
       const ret = this.html ? clip(this.html, this.maxChars, { html: true, maxLines: this.maxLines }) : null
       return ret
     },
+    sanitizedTruncatedHtml() {
+      return this.truncatedHTML ? DOMPurify.sanitize(this.truncatedHTML) : null
+    },
     needsTruncating() {
       if (this.text && (text.length > maxChars)) {
         return true