Display message html, sanitized

package.json

@@ -66,6 +66,7 @@
     "sass": "^1.23.7",
     "schema-utils": "^2.5.0",
     "sugarss": "^2.0.0",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-sanitize": "^0.2.0"
   }
 }

scipost/static/scipost/assets/vue/components/MessageContent.vue

 <template>
   <div>
-    {{ message.data["stripped-html"] }}
+    <h3>Message content:</h3>
+    <span v-html="sanitized_html"></span>
   </div>
 </template>
 
@@ -11,7 +12,12 @@
 	  message: {
 	      type: Object,
 	      required: true
+	  },
+      },
+      computed: {
+	  sanitized_html() {
+	      return this.$sanitize(this.message.data["stripped-html"])
 	  }
-      }
+      },
   }
 </script>

scipost/static/scipost/assets/vue/message_list.js

@@ -7,8 +7,23 @@ Vue.use(BootstrapVue);
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 
 
+import VueSanitize from "vue-sanitize";
+const sanitizationOptions = {
+    allowedTags: [ // same as in markup.constants.py
+	'a', 'abbr', 'acronym', 'b', 'blockquote', 'br', 'code', 'em',
+	'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'li', 'ol',
+	'p', 'pre', 'strong', 'table', 'td', 'th', 'tr', 'ul'
+    ],
+    allowedAttributes: {
+      'a': [ 'href' ]
+    }
+};
+Vue.use(VueSanitize, sanitizationOptions);
+
+
 import MessageHeaderList from './components/MessageHeaderList.vue'
 
+
 new Vue({
     render: h => h(MessageHeaderList),
 }).$mount('#message-header-list');