fix(clubInfo): use sanitizeHtml instead of regex to sanitize descriptions

Author: qwerzl

components/custom/club-card.vue

@@ -3,8 +3,9 @@ import type { PropType } from 'vue'
 import type { Club } from '~/types/clubs'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { cleanHTML, cn } from '@/lib/utils'
+import { cn } from '@/lib/utils'
 import Badge from '@/components/ui/badge/Badge.vue'
+import sanitizeHtml from 'sanitize-html'
 
 const props = defineProps({
   club: {
@@ -13,7 +14,9 @@ const props = defineProps({
   },
 })
 
-const Description_C = cleanHTML(props.club.groups[0].C_DescriptionC)
+const Description_C = sanitizeHtml(props.club.groups[0].C_DescriptionC, {
+  allowedTags: [],
+})
 </script>
 
 <template>

lib/utils.ts

@@ -14,11 +14,3 @@ export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref
       ? updaterOrValue(ref.value)
       : updaterOrValue
 }
-
-export function cleanHTML(content: string): string {
-  if (!content)
-    return ''
-
-  return content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, '')
-    .replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, '')
-}

package.json

@@ -38,6 +38,7 @@
     "lucide-vue-next": "^0.441.0",
     "ofetch": "^1.3.4",
     "radix-vue": "^1.9.5",
+    "sanitize-html": "^2.13.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "uncrypto": "^0.1.3",
@@ -61,6 +62,7 @@
     "@rollup/plugin-wasm": "^6.2.2",
     "@tailwindcss/typography": "^0.5.15",
     "@types/node-fetch": "^2.6.11",
+    "@types/sanitize-html": "^2.13.0",
     "@types/uuid": "^10.0.0",
     "@types/ws": "^8.5.12",
     "dayjs-nuxt": "^2.1.11",

pages/cas/clubs/[id].vue

@@ -2,7 +2,7 @@
 import { useRoute } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { cleanHTML } from '@/lib/utils'
+import sanitizeHtml from 'sanitize-html'
 import type { Club, Clubs } from '~/types/clubs'
 
 const { data } = await useFetch<Clubs>('/api/club/all_details')
@@ -30,7 +30,9 @@ let hasDescriptionC = false
 let Description_C = ''
 
 if (filteredClubs[0] && filteredClubs[0].groups[0].C_DescriptionC) {
-  const tempDescription = cleanHTML(filteredClubs[0].groups[0].C_DescriptionC)
+  const tempDescription = sanitizeHtml(filteredClubs[0].groups[0].C_DescriptionC, {
+    allowedTags: [],
+  })
   if (tempDescription.trim() !== '') {
     Description_C = tempDescription
     hasDescriptionC = true

pages/cas/clubs/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import ClubCard from '@/components/custom/club-card.vue'
 import { Input } from '@/components/ui/input'
-import TabsList from '@/components/ui/tabs/TabsList.vue'
 import Tabs from '@/components/ui/tabs/Tabs.vue'
 import TabsContent from '@/components/ui/tabs/TabsContent.vue'
+import TabsList from '@/components/ui/tabs/TabsList.vue'
 import TabsTrigger from '@/components/ui/tabs/TabsTrigger.vue'
-import ClubCard from '@/components/custom/club-card.vue'
+import { onMounted, ref, watch } from 'vue'
 
 import type { Club, ClubCategoryKey, Clubs, Groups } from '~/types/clubs'