Client - move input sanitization in utils

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutNotes.vue

@@ -3,31 +3,38 @@
     <Card>
       <template #title>{{ $t('workouts.NOTES') }}</template>
       <template #content>
-        <span v-html="notes !== '' ? $sanitize(linkifyHtml(notes, { target: '_blank' })) : $t('workouts.NO_NOTES')" />
+        <span
+          v-html="
+            notes && notes !== ''
+              ? linkifyAndClean(notes)
+              : $t('workouts.NO_NOTES')
+          "
+        />
       </template>
     </Card>
   </div>
 </template>
 
 <script setup lang="ts">
-import linkifyHtml from 'linkify-html'
-import { toRefs, withDefaults } from 'vue'
+  import { toRefs, withDefaults } from 'vue'
 
-interface Props {
-  notes?: string | null
-}
-const props = withDefaults(defineProps<Props>(), {
-  notes: () => null,
-})
+  import { linkifyAndClean } from '@/utils/inputs'
 
-const { notes } = toRefs(props)
+  interface Props {
+    notes?: string | null
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    notes: () => null,
+  })
+
+  const { notes } = toRefs(props)
 </script>
 
 <style lang="scss" scoped>
-#workout-note {
-  ::v-deep(.card-content) {
-    font-style: italic;
-    white-space: pre-wrap;
+  #workout-note {
+    ::v-deep(.card-content) {
+      font-style: italic;
+      white-space: pre-wrap;
+    }
   }
-}
 </style>

fittrackee_client/src/main.ts

@@ -14,7 +14,6 @@ import {
 } from 'chart.js'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 import { createApp } from 'vue'
-import Vue3Sanitize from "vue-3-sanitize"
 import VueFullscreen from 'vue-fullscreen'
 
 import './registerServiceWorker'
@@ -48,7 +47,6 @@ const app = createApp(App)
   .use(store)
   .use(router)
   .use(VueFullscreen, { name: 'VFullscreen' })
-  .use(Vue3Sanitize, { allowedTags: ['a'], disallowedTagsMode: 'escape' })
   .directive('click-outside', clickOutsideDirective)
 
 customComponents.forEach((component) => {

fittrackee_client/src/utils/inputs.ts

@@ -0,0 +1,9 @@
+import linkifyHtml from 'linkify-html'
+import sanitizeHtml from 'sanitize-html'
+
+export const linkifyAndClean = (input: string): string => {
+  return sanitizeHtml(linkifyHtml(input, { target: '_blank' }), {
+    allowedTags: ['a'],
+    disallowedTagsMode: 'escape',
+  })
+}

fittrackee_client/src/vue-3-sanitize.d.ts

@@ -1 +0,0 @@
-declare module 'vue-3-sanitize';