fix: sanitize and render faq answer as html

Author: axelrindle

apps/frontend/package.json

@@ -44,6 +44,7 @@
     "radix-vue": "^1.9.5",
     "reka-ui": "^2.1.1",
     "remixicon": "^3.5.0",
+    "sanitize-html": "^2.17.1",
     "simple-syntax-highlighter": "^3.1.1",
     "superjson": "catalog:",
     "tailwind-merge": "^2.6.0",
@@ -56,6 +57,7 @@
     "@codeanker/eslint-config": "workspace:*",
     "@codeanker/typescript-config": "workspace:*",
     "@types/node": "catalog:",
+    "@types/sanitize-html": "^2.16.0",
     "@vitejs/plugin-basic-ssl": "^2.1.0",
     "@vitejs/plugin-vue": "^6.0.2",
     "autoprefixer": "^10.4.16",

apps/frontend/src/helpers/sanitizeHtml.ts

@@ -0,0 +1,22 @@
+import doSanitizeHtml from 'sanitize-html'
+
+export function sanitizeHtml(html: string): string {
+  return doSanitizeHtml(html, {
+    allowedTags: [
+      'p',
+      'strong',
+      'em',
+      'u',
+      'a',
+      'ul',
+      'ol',
+      'li',
+      'img',
+    ],
+    allowedAttributes: {
+      img: [
+        'src', 'alt', 'style',
+      ],
+    },
+  })
+}

apps/frontend/src/views/Anmeldung/components/PublicFAQ.vue

@@ -2,6 +2,7 @@
 import { injectUnterveranstaltung } from '@/layouts/AnmeldungLayout.vue'
 import { PlusIcon, MinusIcon } from '@heroicons/vue/24/solid'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+import { sanitizeHtml } from '@/helpers/sanitizeHtml';
 
 const unterveranstaltung = injectUnterveranstaltung()
 </script>
@@ -57,7 +58,7 @@ const unterveranstaltung = injectUnterveranstaltung()
                 as="dd"
                 class="mt-2 pr-12"
               >
-                <p class="text-base/7 text-gray-600">{{ faq.answer }}</p>
+                <p class="text-base/7 text-gray-600" v-html="sanitizeHtml(faq.answer)"></p>
               </DisclosurePanel>
             </Disclosure>
           </dl>