From 40b1793cce0c920bc9af2a839aa167fad3ee9b6e Mon Sep 17 00:00:00 2001
From: tonyaellie <tonya@tokia.dev>
Date: Wed, 30 Oct 2024 22:40:02 +0000
Subject: [PATCH] feat: sanitise translations when using v-html

---
 frontend/pages/tools.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/tools.vue b/frontend/pages/tools.vue
index c4597314..6f28cca6 100644
--- a/frontend/pages/tools.vue
+++ b/frontend/pages/tools.vue
@@ -40,7 +40,7 @@
           <DetailAction @action="modals.import = true">
             <template #title> {{ $t("tools.import_export_set.import") }} </template>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div v-html="$t('tools.import_export_set.import_sub')"></div>
+            <div v-html="DOMPurify.sanitize($t('tools.import_export_set.import_sub'))"></div>
             <template #button> {{ $t("tools.import_export_set.import_button") }} </template>
           </DetailAction>
           <DetailAction @action="getExportCSV()">
@@ -57,7 +57,7 @@
             <span> {{ $t("tools.actions") }} </span>
             <template #description>
               <!-- eslint-disable-next-line vue/no-v-html -->
-              <div v-html="$t('tools.actions_sub')"></div>
+              <div v-html="DOMPurify.sanitize($t('tools.actions_sub'))"></div>
             </template>
           </BaseSectionHeader>
         </template>
@@ -75,13 +75,13 @@
           <DetailAction @action="resetItemDateTimes">
             <template #title> {{ $t("tools.actions_set.zero_datetimes") }} </template>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div v-html="$t('tools.actions_set.zero_datetimes_sub')"></div>
+            <div v-html="DOMPurify.sanitize($t('tools.actions_set.zero_datetimes_sub'))"></div>
             <template #button> {{ $t("tools.actions_set.zero_datetimes_button") }} </template>
           </DetailAction>
           <DetailAction @action="setPrimaryPhotos">
             <template #title> {{ $t("tools.actions_set.set_primary_photo") }} </template>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div v-html="$t('tools.actions_set.set_primary_photo_sub')"></div>
+            <div v-html="DOMPurify.sanitize($t('tools.actions_set.set_primary_photo_sub'))"></div>
             <template #button> {{ $t("tools.actions_set.set_primary_photo_button") }} </template>
           </DetailAction>
         </div>
@@ -91,6 +91,7 @@
 </template>
 
 <script setup lang="ts">
+  import DOMPurify from "dompurify";
   import MdiFileChart from "~icons/mdi/file-chart";
   import MdiArrowRight from "~icons/mdi/arrow-right";
   import MdiDatabase from "~icons/mdi/database";