FIX: use DOMPurify to sanitize description

package-lock.json

@@ -3820,6 +3820,11 @@
         "domelementtype": "1"
       }
     },
+    "dompurify": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-1.0.10.tgz",
+      "integrity": "sha512-huhl3DSWX5LaA7jDtnj3XQdJgWW1wYouNW7N0drGzQa4vEUSVWyeFN+Atx6HP4r5cang6oQytMom6I4yhGJj5g=="
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -4926,7 +4931,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4947,12 +4953,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4967,17 +4975,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5094,7 +5105,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5106,6 +5118,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5120,6 +5133,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5127,12 +5141,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5151,6 +5167,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5231,7 +5248,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5243,6 +5261,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5328,7 +5347,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5364,6 +5384,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5383,6 +5404,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5426,12 +5448,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "bootstrap-vue": "^2.0.0-rc.11",
+    "dompurify": "^1.0.10",
     "oidc-client": "^1.6.1",
     "vue": "^2.5.22",
     "vue-router": "^3.0.1"

src/components/ShowManager.vue

@@ -24,11 +24,7 @@
       <p v-if="loaded.shows">
         <b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="$refs.appModalShow.showDescription()" />
         <div v-if="loaded.shows">
-          <!-- TODO: see if we can make a nice but secure html rendering of the description
-            This should be already secure, as long as you do not write directly to the DOM.
-            Only if you do this and render HTML, take care to have it save (no script tags etc.).
-            This current regex replace is only to have it looking nicely, in case there are html tags. -->
-          {{ shows[currentShow].description.replace(/<[^>]*>/g, '') }}
+          <div v-html="sanitizedShowDescription"></div>
           <!-- TODO: add image and logo here? -->
         </div>
       </p>
@@ -306,6 +302,7 @@ import modalShow from './ShowManagerModalShow.vue'
 import timeslotSort from '../mixins/timeslotSort'
 import prettyDate from '../mixins/prettyDate'
 import axios from 'axios'
+import DOMPurify from 'dompurify'
 
 export default {
   components: {
@@ -363,6 +360,10 @@ export default {
   },
   mixins: [ timeslotSort, prettyDate ],
   computed: {
+    sanitizedShowDescription: function () {
+      //return this.shows[this.currentShow].description.replace(/<[^>]*>/g, '')
+      return DOMPurify.sanitize(this.shows[this.currentShow].description)
+    },
     predecessorName: function () {
       for (var i in this.shows) {
         if (this.shows[i].id === this.shows[this.currentShow].predecessor) {