From 66d5b3917b9b09f017ca90cc36e56e8602d15724 Mon Sep 17 00:00:00 2001
From: Thomas Gerbet <thomas.gerbet@enalean.com>
Date: Mon, 15 Apr 2019 08:56:54 +0200
Subject: [PATCH] request #13278: Remove direct usage of the v-html directive
 in Vue apps

v-html usages is replaced by a safer by default alternative.

The goals are multiple:
 * make it easier to do the right thing for the developers: besides
telling Vue to use the plugin at the instantiation of the app, the new directive
can be used directly. There is no need of defining a new computed properties to sanize
the value which means less boilerplate code.
* reduce the number of points to inspect: only the directive/plugin code (and potentially
a custom config at the init of the Vue app) instead of all the usages of v-html and the
computed props associated with them.

Note this does not means v-dompurify-html should be used everywhere, the usages
should be limited where there is a real need for it and no alternative (same as v-html).

No functionnal change is expected.

vue-eslint-parser has been rollbacked to version 5.x. The 6.x version is not yet compatible
with eslint-plugin-vue [0] causing false positives. It seems that major versions of
vue-eslint-parser and eslint-plugin-vue must be kept in sync.

[0] https://github.com/vuejs/eslint-plugin-vue/pull/807

Change-Id: Ibd599706cf3f6b19076841b4d7f330cab11e2e33
---
 package-lock.json                             | 27 +++++++++---
 package.json                                  |  2 +-
 .../src/CallMeBack.vue                        |  9 +---
 .../call-me-back-burning-parrot/src/index.js  |  4 +-
 .../src/CallMeBack.vue                        |  9 +---
 .../call-me-back-flaming-parrot/src/index.js  |  4 +-
 .../create_test_env/scripts/package-lock.json |  8 ++++
 plugins/create_test_env/scripts/package.json  |  2 +-
 .../ItemDisplay/DisplayEmbeddedContent.vue    |  7 ++--
 .../QuickLook/QuickLookDocumentPreview.vue    | 12 +++---
 .../scripts/document/helpers/local-vue.js     |  2 +
 plugins/document/scripts/document/index.js    |  4 +-
 plugins/document/scripts/package-lock.json    |  8 ++++
 plugins/document/scripts/package.json         |  2 +-
 plugins/label/www/scripts/package-lock.json   |  8 ++++
 plugins/label/www/scripts/package.json        |  2 +-
 .../src/LabeledItem.spec.js                   | 42 -------------------
 .../project-labeled-items/src/LabeledItem.vue | 20 ++-------
 .../project-labeled-items/src/app.spec.js     |  5 ++-
 .../project-labeled-items/src/index.js        |  8 +++-
 20 files changed, 86 insertions(+), 99 deletions(-)
 delete mode 100644 plugins/label/www/scripts/project-labeled-items/src/LabeledItem.spec.js

diff --git a/package-lock.json b/package-lock.json
index 569781c4e79..98ad1748748 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14612,19 +14612,25 @@
       "dev": true
     },
     "vue-eslint-parser": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-6.0.3.tgz",
-      "integrity": "sha512-f2jZQojTLyZmuDLhCybJ8qIicfZfC6PmO7dEubZ0U/0tQ4dweRFuB0RpbbaHeMUfVFSYiKexbiemkze/h3/6SA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
+      "integrity": "sha512-JlHVZwBBTNVvzmifwjpZYn0oPWH2SgWv5dojlZBsrhablDu95VFD+hriB1rQGwbD+bms6g+rAFhQHk6+NyiS6g==",
       "dev": true,
       "requires": {
-        "debug": "^4.1.1",
+        "debug": "^4.1.0",
         "eslint-scope": "^4.0.0",
         "eslint-visitor-keys": "^1.0.0",
-        "espree": "^5.0.0",
+        "espree": "^4.1.0",
         "esquery": "^1.0.1",
         "lodash": "^4.17.11"
       },
       "dependencies": {
+        "acorn": {
+          "version": "6.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
+          "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==",
+          "dev": true
+        },
         "debug": {
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -14634,6 +14640,17 @@
             "ms": "^2.1.1"
           }
         },
+        "espree": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-4.1.0.tgz",
+          "integrity": "sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==",
+          "dev": true,
+          "requires": {
+            "acorn": "^6.0.2",
+            "acorn-jsx": "^5.0.0",
+            "eslint-visitor-keys": "^1.0.0"
+          }
+        },
         "lodash": {
           "version": "4.17.11",
           "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
diff --git a/package.json b/package.json
index 3b4cffa85fa..e1d1c893fc0 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "stylelint": "^9.9.0",
     "stylelint-config-property-sort-order-smacss": "^4.0.2",
     "stylelint-config-sass-guidelines": "^5.3.0",
-    "vue-eslint-parser": "^6.0.3",
+    "vue-eslint-parser": "^5.0.0",
     "vue-loader": "^15.4.2",
     "webpack": "^4.20.2",
     "webpack-assets-manifest": "^3.1.1",
diff --git a/plugins/create_test_env/scripts/call-me-back-burning-parrot/src/CallMeBack.vue b/plugins/create_test_env/scripts/call-me-back-burning-parrot/src/CallMeBack.vue
index f5e57360ad9..f2cbb2c6505 100644
--- a/plugins/create_test_env/scripts/call-me-back-burning-parrot/src/CallMeBack.vue
+++ b/plugins/create_test_env/scripts/call-me-back-burning-parrot/src/CallMeBack.vue
@@ -1,5 +1,5 @@
 <!--
-  - Copyright (c) Enalean, 2018. All Rights Reserved.
+  - Copyright (c) Enalean, 2018-Present. All Rights Reserved.
   -
   - This file is a part of Tuleap.
   -
@@ -18,8 +18,7 @@
   -->
 <template>
     <div class="call-me-back tlp-dropdown">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="call-me-back-message" v-if="! dropdown_open && message" v-html="sanitized_message"></div>
+        <div class="call-me-back-message" v-if="! dropdown_open && message" v-dompurify-html="message"></div>
         <button class="call-me-back-button tlp-button-primary tlp-button-large" ref="call_me_back_button">
             <i class="fa fa-phone"></i>
         </button>
@@ -85,7 +84,6 @@
 import { dropdown, datePicker } from "tlp";
 import { getCallMeBackMessage, askToBeCalledBack } from "../../call-me-back-rest-querier.js";
 import { DateTime } from "luxon";
-import { sanitize } from "dompurify";
 
 export default {
     name: "CallMeBack",
@@ -103,9 +101,6 @@ export default {
     computed: {
         call_me_back_formatted_date() {
             return DateTime.fromISO(this.call_me_back_date).toLocaleString(DateTime.DATE_FULL);
-        },
-        sanitized_message() {
-            return sanitize(this.message);
         }
     },
     mounted() {
diff --git a/plugins/create_test_env/scripts/call-me-back-burning-parrot/src/index.js b/plugins/create_test_env/scripts/call-me-back-burning-parrot/src/index.js
index b4d1f0f9d14..b220456dc6f 100644
--- a/plugins/create_test_env/scripts/call-me-back-burning-parrot/src/index.js
+++ b/plugins/create_test_env/scripts/call-me-back-burning-parrot/src/index.js
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Enalean, 2018. All Rights Reserved.
+ * Copyright (c) Enalean, 2018-Present. All Rights Reserved.
  *
  * This file is a part of Tuleap.
  *
@@ -18,12 +18,14 @@
  */
 
 import Vue from "vue";
+import VueDOMPurifyHTML from "vue-dompurify-html";
 import GetTextPlugin from "vue-gettext";
 import french_translations from "../../po/fr.po";
 import CallMeBack from "./CallMeBack.vue";
 import { Settings } from "luxon";
 
 document.addEventListener("DOMContentLoaded", () => {
+    Vue.use(VueDOMPurifyHTML);
     Vue.use(GetTextPlugin, {
         translations: {
             fr: french_translations.messages
diff --git a/plugins/create_test_env/scripts/call-me-back-flaming-parrot/src/CallMeBack.vue b/plugins/create_test_env/scripts/call-me-back-flaming-parrot/src/CallMeBack.vue
index 80fcfdbc6e7..3a8a1d3a2a1 100644
--- a/plugins/create_test_env/scripts/call-me-back-flaming-parrot/src/CallMeBack.vue
+++ b/plugins/create_test_env/scripts/call-me-back-flaming-parrot/src/CallMeBack.vue
@@ -1,5 +1,5 @@
 <!--
-  - Copyright (c) Enalean, 2018. All Rights Reserved.
+  - Copyright (c) Enalean, 2018-Present. All Rights Reserved.
   -
   - This file is a part of Tuleap.
   -
@@ -18,8 +18,7 @@
   -->
 <template>
     <div class="call-me-back dropup" ref="dropdown">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="call-me-back-message" v-if="! dropdown_open && message" v-html="sanitized_message"></div>
+        <div class="call-me-back-message" v-if="! dropdown_open && message" v-dompurify-html="message"></div>
         <button class="call-me-back-button dropdown-toggle" data-toggle="dropdown">
             <i class="fa fa-phone"></i>
         </button>
@@ -84,7 +83,6 @@
 <script>
 import { getCallMeBackMessage, askToBeCalledBack } from "../../call-me-back-rest-querier.js";
 import { DateTime } from "luxon";
-import { sanitize } from "dompurify";
 import jQuery from "jquery";
 
 export default {
@@ -106,9 +104,6 @@ export default {
     computed: {
         call_me_back_formatted_date() {
             return DateTime.fromISO(this.call_me_back_date).toLocaleString(DateTime.DATE_FULL);
-        },
-        sanitized_message() {
-            return sanitize(this.message);
         }
     },
     mounted() {
diff --git a/plugins/create_test_env/scripts/call-me-back-flaming-parrot/src/index.js b/plugins/create_test_env/scripts/call-me-back-flaming-parrot/src/index.js
index 8d8df42679e..0276a20f002 100644
--- a/plugins/create_test_env/scripts/call-me-back-flaming-parrot/src/index.js
+++ b/plugins/create_test_env/scripts/call-me-back-flaming-parrot/src/index.js
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Enalean, 2018. All Rights Reserved.
+ * Copyright (c) Enalean, 2018-Present. All Rights Reserved.
  *
  * This file is a part of Tuleap.
  *
@@ -18,12 +18,14 @@
  */
 
 import Vue from "vue";
+import VueDOMPurifyHTML from "vue-dompurify-html";
 import GetTextPlugin from "vue-gettext";
 import french_translations from "../../po/fr.po";
 import CallMeBack from "./CallMeBack.vue";
 import { Settings } from "luxon";
 
 document.addEventListener("DOMContentLoaded", () => {
+    Vue.use(VueDOMPurifyHTML);
     Vue.use(GetTextPlugin, {
         translations: {
             fr: french_translations.messages
diff --git a/plugins/create_test_env/scripts/package-lock.json b/plugins/create_test_env/scripts/package-lock.json
index d723f0965ea..fb7687f5bb4 100644
--- a/plugins/create_test_env/scripts/package-lock.json
+++ b/plugins/create_test_env/scripts/package-lock.json
@@ -19,6 +19,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
       "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
     },
+    "vue-dompurify-html": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-1.2.0.tgz",
+      "integrity": "sha512-cU9/oVyzTCuCd2OoV1Yihhf53Sf1TWCpmuycpJoc+4LiiM4skLUoMKcGo58U8/zqv9cTTVH0rtdM5MEiEzPtPw==",
+      "requires": {
+        "dompurify": "^1.0.10"
+      }
+    },
     "vue-gettext": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/vue-gettext/-/vue-gettext-2.1.0.tgz",
diff --git a/plugins/create_test_env/scripts/package.json b/plugins/create_test_env/scripts/package.json
index d8a8f0ce385..90c6eb760e0 100644
--- a/plugins/create_test_env/scripts/package.json
+++ b/plugins/create_test_env/scripts/package.json
@@ -6,9 +6,9 @@
   "license": "GPL-2.0+",
   "private": true,
   "dependencies": {
-    "dompurify": "^1.0.10",
     "luxon": "^0.5.3",
     "vue": "^2.5.17",
+    "vue-dompurify-html": "^1.2.0",
     "vue-gettext": "^2.1.0"
   },
   "config": {
diff --git a/plugins/document/scripts/document/components/Folder/ItemDisplay/DisplayEmbeddedContent.vue b/plugins/document/scripts/document/components/Folder/ItemDisplay/DisplayEmbeddedContent.vue
index a1a52ef9bf9..160737018c5 100644
--- a/plugins/document/scripts/document/components/Folder/ItemDisplay/DisplayEmbeddedContent.vue
+++ b/plugins/document/scripts/document/components/Folder/ItemDisplay/DisplayEmbeddedContent.vue
@@ -29,7 +29,7 @@
 
         <section class="tlp-pane">
             <div class="tlp-pane-container">
-                <section class="tlp-pane-section" v-html="embedded_content"></section>
+                <section class="tlp-pane-section" v-dompurify-html="embedded_content"></section>
             </div>
         </section>
 
@@ -38,7 +38,6 @@
 </template>
 
 <script>
-import dompurify from "dompurify";
 import DropdownButton from "../ActionsDropDown/DropdownButton.vue";
 import DropdownMenu from "../ActionsDropDown/DropdownMenu.vue";
 import UpdateItemButton from "../ActionsButton/UpdateItemButton.vue";
@@ -67,10 +66,10 @@ export default {
         },
         embedded_content() {
             if (!this.embedded_file.embedded_file_properties) {
-                return;
+                return "";
             }
 
-            return dompurify.sanitize(this.embedded_file.embedded_file_properties.content);
+            return this.embedded_file.embedded_file_properties.content;
         }
     },
     mounted() {
diff --git a/plugins/document/scripts/document/components/Folder/QuickLook/QuickLookDocumentPreview.vue b/plugins/document/scripts/document/components/Folder/QuickLook/QuickLookDocumentPreview.vue
index 03f0f062e10..468cb4b58ee 100644
--- a/plugins/document/scripts/document/components/Folder/QuickLook/QuickLookDocumentPreview.vue
+++ b/plugins/document/scripts/document/components/Folder/QuickLook/QuickLookDocumentPreview.vue
@@ -1,5 +1,5 @@
 <!--
-  - Copyright (c) Enalean, 2019. All Rights Reserved.
+  - Copyright (c) Enalean, 2019-Present. All Rights Reserved.
   -
   - This file is a part of Tuleap.
   -
@@ -18,8 +18,7 @@
   -
   -->
 <template>
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <div v-html="escaped_embedded_content"
+    <div v-dompurify-html="item.embedded_file_properties.content"
          class="document-quick-look-embedded"
          v-if="is_embedded"
     ></div>
@@ -89,7 +88,6 @@
     </div>
 </template>
 <script>
-import dompurify from "dompurify";
 import { TYPE_EMBEDDED, TYPE_FOLDER } from "../../../constants.js";
 import IconQuicklookFolder from "../../svg-icons/IconQuicklookFolder.vue";
 import IconQuicklookDropIntoFolder from "../../svg-icons/IconQuicklookDropIntoFolder.vue";
@@ -115,11 +113,11 @@ export default {
         is_embedded() {
             return this.item.type === TYPE_EMBEDDED;
         },
-        escaped_embedded_content() {
+        embedded_content() {
             if (!this.item.embedded_file_properties) {
-                return;
+                return "";
             }
-            return dompurify.sanitize(this.item.embedded_file_properties.content);
+            return this.item.embedded_file_properties.content;
         },
         is_a_folder() {
             return this.item.type === TYPE_FOLDER;
diff --git a/plugins/document/scripts/document/helpers/local-vue.js b/plugins/document/scripts/document/helpers/local-vue.js
index e9e4ed5be0b..ca63c6a07a6 100644
--- a/plugins/document/scripts/document/helpers/local-vue.js
+++ b/plugins/document/scripts/document/helpers/local-vue.js
@@ -20,6 +20,7 @@
 
 import { createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
+import VueDOMPurifyHTML from "vue-dompurify-html";
 import GettextPlugin from "vue-gettext";
 import VueRouter from "vue-router";
 
@@ -27,6 +28,7 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueRouter);
 
+localVue.use(VueDOMPurifyHTML);
 localVue.use(GettextPlugin, {
     translations: {},
     silent: true
diff --git a/plugins/document/scripts/document/index.js b/plugins/document/scripts/document/index.js
index cdd08b1ff40..c515d0b34aa 100644
--- a/plugins/document/scripts/document/index.js
+++ b/plugins/document/scripts/document/index.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) Enalean, 2018-2019. All Rights Reserved.
+ * Copyright (c) Enalean, 2018-Present. All Rights Reserved.
  *
  * This file is a part of Tuleap.
  *
@@ -19,6 +19,7 @@
 
 import Vue from "vue";
 import GetTextPlugin from "vue-gettext";
+import VueDOMPurifyHTML from "vue-dompurify-html";
 
 import french_translations from "./po/fr.po";
 import App from "./components/App.vue";
@@ -28,6 +29,7 @@ import moment from "moment";
 import "moment-timezone";
 
 document.addEventListener("DOMContentLoaded", () => {
+    Vue.use(VueDOMPurifyHTML);
     Vue.use(GetTextPlugin, {
         translations: {
             fr: french_translations.messages
diff --git a/plugins/document/scripts/package-lock.json b/plugins/document/scripts/package-lock.json
index 48cf5c2377a..7b4f3379c7f 100644
--- a/plugins/document/scripts/package-lock.json
+++ b/plugins/document/scripts/package-lock.json
@@ -215,6 +215,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
       "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
     },
+    "vue-dompurify-html": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-1.2.0.tgz",
+      "integrity": "sha512-cU9/oVyzTCuCd2OoV1Yihhf53Sf1TWCpmuycpJoc+4LiiM4skLUoMKcGo58U8/zqv9cTTVH0rtdM5MEiEzPtPw==",
+      "requires": {
+        "dompurify": "^1.0.10"
+      }
+    },
     "vue-gettext": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/vue-gettext/-/vue-gettext-2.1.1.tgz",
diff --git a/plugins/document/scripts/package.json b/plugins/document/scripts/package.json
index 04c35fdccf8..3ddb43a84a4 100644
--- a/plugins/document/scripts/package.json
+++ b/plugins/document/scripts/package.json
@@ -6,7 +6,6 @@
   "license": "GPL-2.0+",
   "private": true,
   "dependencies": {
-    "dompurify": "^1.0.9",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.23",
     "phptomoment": "0.0.2",
@@ -14,6 +13,7 @@
     "pretty-kibibytes": "^4.0.4",
     "tus-js-client": "^1.5.2",
     "vue": "^2.5.17",
+    "vue-dompurify-html": "^1.2.0",
     "vue-gettext": "^2.1.0",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
diff --git a/plugins/label/www/scripts/package-lock.json b/plugins/label/www/scripts/package-lock.json
index c1369f82bcd..8e7b7ada5c8 100644
--- a/plugins/label/www/scripts/package-lock.json
+++ b/plugins/label/www/scripts/package-lock.json
@@ -145,6 +145,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
       "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
     },
+    "vue-dompurify-html": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-1.2.0.tgz",
+      "integrity": "sha512-cU9/oVyzTCuCd2OoV1Yihhf53Sf1TWCpmuycpJoc+4LiiM4skLUoMKcGo58U8/zqv9cTTVH0rtdM5MEiEzPtPw==",
+      "requires": {
+        "dompurify": "^1.0.10"
+      }
+    },
     "vue-gettext": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/vue-gettext/-/vue-gettext-2.1.0.tgz",
diff --git a/plugins/label/www/scripts/package.json b/plugins/label/www/scripts/package.json
index c75b05ab92f..51b46c61169 100644
--- a/plugins/label/www/scripts/package.json
+++ b/plugins/label/www/scripts/package.json
@@ -6,9 +6,9 @@
   "license": "GPL-2.0+",
   "private": true,
   "dependencies": {
-    "dompurify": "^1.0.10",
     "mustache": "^2.3.0",
     "vue": "^2.5.17",
+    "vue-dompurify-html": "^1.2.0",
     "vue-gettext": "^2.1.0"
   },
   "devDependencies": {
diff --git a/plugins/label/www/scripts/project-labeled-items/src/LabeledItem.spec.js b/plugins/label/www/scripts/project-labeled-items/src/LabeledItem.spec.js
deleted file mode 100644
index 9705735758c..00000000000
--- a/plugins/label/www/scripts/project-labeled-items/src/LabeledItem.spec.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (c) Enalean, 2017. All Rights Reserved.
- *
- * This file is a part of Tuleap.
- *
- * Tuleap is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or
- * (at your option) any later version.
- *
- * Tuleap is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import Vue from "vue";
-import LabeledItem from "./LabeledItem.vue";
-
-describe("LabeledItem", function() {
-    it("Given a svg icon, then it should purify it.", function() {
-        const LabeledItemVueElement = Vue.extend(LabeledItem);
-
-        const vm = new LabeledItemVueElement({
-            propsData: {
-                item: {
-                    small_icon: "<svg><g/onload=alert(2)//<p>"
-                }
-            }
-        });
-
-        vm.$mount();
-
-        const labeled_item_icon = vm.$el.querySelector(".labeled-item-icon").innerHTML;
-        const expected_sanitized_svg = "<svg><g></g></svg>";
-
-        expect(labeled_item_icon).toEqual(expected_sanitized_svg);
-    });
-});
diff --git a/plugins/label/www/scripts/project-labeled-items/src/LabeledItem.vue b/plugins/label/www/scripts/project-labeled-items/src/LabeledItem.vue
index d5013ea7c0a..2c2b410036d 100644
--- a/plugins/label/www/scripts/project-labeled-items/src/LabeledItem.vue
+++ b/plugins/label/www/scripts/project-labeled-items/src/LabeledItem.vue
@@ -1,5 +1,5 @@
 <!--
-  - Copyright (c) Enalean, 2018. All Rights Reserved.
+  - Copyright (c) Enalean, 2018-Present. All Rights Reserved.
   -
   - This file is a part of Tuleap.
   -
@@ -18,29 +18,15 @@
   -->
 <template>
     <a v-bind:href="item.html_url" class="labeled-item">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="labeled-item-icon" v-html="purified_icon"></div>
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="labeled-item-content" v-html="purified_title"></div>
+        <div class="labeled-item-icon" v-dompurify-html:svg="item.small_icon"></div>
+        <div class="labeled-item-content" v-dompurify-html="item.title"></div>
     </a>
 </template>
 <script>
-import { sanitize } from "dompurify";
-
 export default {
     name: "LabeledItem",
     props: {
         item: Object
-    },
-    computed: {
-        purified_icon: function() {
-            return sanitize(this.item.small_icon, {
-                USE_PROFILES: { svg: true }
-            });
-        },
-        purified_title: function() {
-            return sanitize(this.item.title);
-        }
     }
 };
 </script>
diff --git a/plugins/label/www/scripts/project-labeled-items/src/app.spec.js b/plugins/label/www/scripts/project-labeled-items/src/app.spec.js
index 9aa5ff5f8f8..5861ac1f244 100644
--- a/plugins/label/www/scripts/project-labeled-items/src/app.spec.js
+++ b/plugins/label/www/scripts/project-labeled-items/src/app.spec.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) Enalean, 2017 - 2018. All Rights Reserved.
+ * Copyright (c) Enalean, 2017 - Present. All Rights Reserved.
  *
  * This file is a part of Tuleap.
  *
@@ -19,13 +19,14 @@
 
 import "tlp-mocks";
 import Vue from "vue";
+import VueDOMPurifyHTML from "vue-dompurify-html";
 import GetTextPlugin from "vue-gettext";
 
+Vue.use(VueDOMPurifyHTML);
 Vue.use(GetTextPlugin, {
     translations: {},
     silent: true
 });
 
 import "./LabeledItemsList.spec.js";
-import "./LabeledItem.spec.js";
 import "./rest-querier.spec.js";
diff --git a/plugins/label/www/scripts/project-labeled-items/src/index.js b/plugins/label/www/scripts/project-labeled-items/src/index.js
index 7a26a815083..9c45cc15309 100644
--- a/plugins/label/www/scripts/project-labeled-items/src/index.js
+++ b/plugins/label/www/scripts/project-labeled-items/src/index.js
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Enalean, 2017 - 2018. All Rights Reserved.
+ * Copyright (c) Enalean, 2017 - Present. All Rights Reserved.
  *
  * This file is a part of Tuleap.
  *
@@ -18,11 +18,17 @@
  */
 
 import Vue from "vue";
+import VueDOMPurifyHTML from "vue-dompurify-html";
 import GetTextPlugin from "vue-gettext";
 import french_translations from "../po/fr.po";
 import LabeledItemsList from "./LabeledItemsList.vue";
 
 document.addEventListener("DOMContentLoaded", () => {
+    Vue.use(VueDOMPurifyHTML, {
+        svg: {
+            USE_PROFILES: { svg: true }
+        }
+    });
     Vue.use(GetTextPlugin, {
         translations: {
             fr: french_translations.messages