Use vue decompurify

frontend/package.json

@@ -53,6 +53,7 @@
     "universal-cookie": "4.0.4",
     "vue": "3.2.45",
     "vue-advanced-cropper": "2.8.6",
+    "vue-dompurify-html": "^3.1.2",
     "vue-i18n": "9.2.2",
     "vue3-popper": "1.5.0"
   },

frontend/pnpm-lock.yaml

@@ -70,6 +70,7 @@ specifiers:
   vite-plugin-eslint: 1.8.1
   vue: 3.2.45
   vue-advanced-cropper: 2.8.6
+  vue-dompurify-html: ^3.1.2
   vue-i18n: 9.2.2
   vue-tsc: 1.0.24
   vue3-popper: 1.5.0
@@ -103,6 +104,7 @@ dependencies:
   universal-cookie: 4.0.4
   vue: 3.2.45
   vue-advanced-cropper: 2.8.6_vue@3.2.45
+  vue-dompurify-html: 3.1.2_vue@3.2.45
   vue-i18n: 9.2.2_vue@3.2.45
   vue3-popper: 1.5.0_vue@3.2.45
 
@@ -8617,6 +8619,18 @@ packages:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
     dev: true
 
+  /vue-dompurify-html/3.1.2_vue@3.2.45:
+    resolution: {integrity: sha512-2xCnSuog5+OPUtmeAwPZY/6oV9YKuLhjgcl5EUw3jKbmhnyPo8YyCczCeRNGBorVcz1fCGm6PEOIUSXNS8I0ZA==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+    dependencies:
+      dompurify: 2.4.3
+      vue: 3.2.45
+      vue-demi: 0.13.11_vue@3.2.45
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
   /vue-eslint-parser/9.1.0_eslint@8.31.0:
     resolution: {integrity: sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==}
     engines: {node: ^14.17.0 || >=16.0.0}

frontend/src/components/Announcement.vue

@@ -7,5 +7,5 @@ const { announcement } = toRefs(props);
 </script>
 
 <template>
-  <div :style="'background-color:' + announcement.color" class="p-2 text-center text-white" v-html="announcement.text" />
+  <div :style="'background-color:' + announcement.color" class="p-2 text-center text-white" v-dompurify-html="announcement.text" />
 </template>

frontend/src/components/Markdown.vue

@@ -28,8 +28,7 @@ watchPostEffect(async () => {
 
 <template>
   <div class="prose max-w-full rounded markdown break-words" :class="{ 'p-4': !inline, inline: inline }">
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <div v-html="renderedMarkdown" />
+    <div v-dompurify-html="renderedMarkdown" />
   </div>
 </template>
 

frontend/src/components/modals/DiffModal.vue

@@ -49,8 +49,7 @@ const prettyDiff = computed(() => {
 
 <template>
   <Modal :title="props.title" window-classes="w-250">
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <div v-html="prettyDiff"></div>
+    <div v-dompurify-html="prettyDiff"></div>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>
     </template>

frontend/src/pages/new.vue

@@ -158,10 +158,8 @@ function createProject() {
 <template>
   <Steps v-model="selectedStep" :steps="steps" button-lang-key="project.new.step">
     <template #tos>
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <p v-html="i18n.t('project.new.step1.text1')" />
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <Link to="/guidelines"><p v-html="i18n.t('project.new.step1.text2')" /></Link>
+      <p v-dompurify-html="i18n.t('project.new.step1.text1')" />
+      <Link to="/guidelines"><p v-dompurify-html="i18n.t('project.new.step1.text2')" /></Link>
     </template>
     <template #basic>
       <div class="flex flex-wrap">

frontend/src/plugins/dompurify.ts

@@ -0,0 +1,7 @@
+import { NuxtApp } from "nuxt/app";
+import VueDOMPurifyHTML from "vue-dompurify-html";
+import { defineNuxtPlugin } from "#imports";
+
+export default defineNuxtPlugin((nuxtApp: NuxtApp) => {
+  nuxtApp.vueApp.use(VueDOMPurifyHTML);
+});