fix: cross site scripting with html content

apps/dashboard/package.json

@@ -42,6 +42,7 @@
     "d3-cloud": "^1.2.7",
     "d3-sankey": "^0.12.3",
     "dayjs": "^1.11.10",
+    "dompurify": "^3.3.0",
     "encoding": "^0.1.13",
     "hotkeys-js": "^3.11.2",
     "html-to-image": "^1.11.11",
@@ -78,6 +79,7 @@
     "@tailwindcss/typography": "^0.5.9",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/svelte": "^4.0.5",
+    "@types/dompurify": "^3.2.0",
     "@types/jest": "^29.5.10",
     "@types/lodash": "^4.14.196",
     "all-object-keys": "^2.2.0",

apps/dashboard/src/app.html

@@ -17,10 +17,10 @@
   <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
   <link rel="stylesheet" href="/carbon-all.css" />
 
-  <script defer src="https://umami.hz.oncws.com/script.js"
+  <script nonce="%sveltekit.nonce%" defer src="https://umami.hz.oncws.com/script.js"
     data-website-id="80a9544a-4dda-4c91-b62f-b6be7a8a3b5c"></script>
 
-  <script src="https://cdn.plyr.io/3.7.3/plyr.js"></script>
+  <script nonce="%sveltekit.nonce%" src="https://cdn.plyr.io/3.7.3/plyr.js"></script>
 
   %sveltekit.head%
 </head>

apps/dashboard/src/lib/components/CodeSnippet/index.svelte

@@ -1,7 +1,8 @@
 <script>
+  import { sanitizeHtml } from '$lib/utils/functions/sanitize';
   export let code = '';
 </script>
 
-<div class="bg-gray-200 dark:bg-gray-500 p-5 rounded-md mb-3">
+<div class="mb-3 rounded-md bg-gray-200 p-5 dark:bg-gray-500">
-  {@html code}
+  {@html sanitizeHtml(code)}
 </div>

apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/UpdateDescription.svelte

@@ -4,6 +4,7 @@
   import TextField from '$lib/components/Form/TextField.svelte';
   import { questionnaire } from '../store/exercise';
   import TextEditor from '$lib/components/TextEditor/index.svelte';
+  import { sanitizeHtml } from '$lib/utils/functions/sanitize';
   import { t } from '$lib/utils/functions/translations';
 
   export let preview: boolean;
@@ -52,31 +53,33 @@
     {:else if preview}
       <h2 class="my-1">{$questionnaire.title}</h2>
       <div class="flex items-center">
-        <p class="dark:text-white mx-2">
+        <p class="mx-2 dark:text-white">
           <strong>{$questionnaire.questions.length}</strong>
           {$t('course.navItem.lessons.exercises.all_exercises.view_mode.questions')}
         </p>
         |
-        <p class="dark:text-white mx-2">
+        <p class="mx-2 dark:text-white">
           <strong>{getTotalPossibleGrade($questionnaire.questions)}</strong>
           {$t('course.navItem.lessons.exercises.all_exercises.view_mode.points')}.
         </p>
         |
-        <p class="dark:text-white mx-2">
+        <p class="mx-2 dark:text-white">
           {$t('course.navItem.lessons.exercises.all_exercises.view_mode.all')}
         </p>
         {#if $questionnaire.due_by}
           |
-          <p class="dark:text-white mx-2">
+          <p class="mx-2 dark:text-white">
             <strong>{$t('course.navItem.lessons.exercises.all_exercises.view_mode.due')}:</strong>
             {new Date($questionnaire.due_by).toLocaleString()}
           </p>
         {/if}
       </div>
 
-      <article class="mt-3 preview prose prose-sm sm:prose p-2">
+      <article class="preview prose prose-sm sm:prose mt-3 p-2">
-        {@html $questionnaire.description ||
+        {@html sanitizeHtml(
-          $t('course.navItem.lessons.exercises.all_exercises.description.no')}
+          $questionnaire.description ||
+            $t('course.navItem.lessons.exercises.all_exercises.description.no')
+        )}
       </article>
     {/if}
   </QuestionContainer>

apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -27,6 +27,7 @@
   import { lesson } from '../store/lessons';
   import { browser } from '$app/environment';
   import { COURSE_TYPE } from '$lib/utils/types';
+  import { sanitizeHtml } from '$lib/utils/functions/sanitize';
   import { t } from '$lib/utils/functions/translations';
 
   export let preview: boolean = false;
@@ -296,7 +297,7 @@
       </div>
 
       <article class="preview prose prose-sm sm:prose mt-3 p-2">
-        {@html $questionnaire.description || 'No desription'}
+        {@html sanitizeHtml($questionnaire.description || 'No desription')}
       </article>
 
       <PrimaryButton

apps/dashboard/src/lib/components/Course/components/Lesson/LessonVersionHistory.svelte

@@ -10,6 +10,7 @@
   import { diffLines } from 'diff';
   import { lesson, lessons } from '$lib/components/Course/components/Lesson/store/lessons';
   import { supabase } from '$lib/utils/functions/supabase';
+  import { sanitizeHtml } from '$lib/utils/functions/sanitize';
   import { t } from '$lib/utils/functions/translations';
 
   import { LOCALE } from '$lib/utils/types';
@@ -166,7 +167,7 @@
 
 <aside class="drawer bg-gray-100 dark:bg-neutral-800" class:open>
   <div class="panel bg-white dark:bg-black">
-    <div class="p-10 w-full pr-80">
+    <div class="w-full p-10 pr-80">
       <div class="flex items-start gap-x-10">
         <PrimaryButton variant={VARIANTS.OUTLINED} onClick={handleDrawerClose}>
           <ArrowLeft />
@@ -180,10 +181,10 @@
           </div>
         {/if}
       </div>
-      <div class="w-full h-full flex flex-col items-start">
+      <div class="flex h-full w-full flex-col items-start">
         <HtmlRender className="m-auto text-center mt-6 flex items-center justify-center">
           <svelte:fragment slot="content">
-            <h1 class="text-2xl md:text-4xl mt-0 capitalize">
+            <h1 class="mt-0 text-2xl capitalize md:text-4xl">
               {lessonTitle}
             </h1>
           </svelte:fragment>
@@ -193,7 +194,7 @@
           <HtmlRender id="display" className="m-auto">
             <svelte:fragment slot="content">
               <div class="amen">
-                {@html content}
+                {@html sanitizeHtml(content)}
               </div>
             </svelte:fragment>
           </HtmlRender>
@@ -203,9 +204,9 @@
   </div>
   <div
     id="scroll-container"
-    class="w-80 fixed right-0 top-0 min-h-screen h-full z-10 overflow-x-auto overflow-y-scroll bg-gray-100 dark:bg-neutral-800 py-10 space-y-6"
+    class="fixed right-0 top-0 z-10 h-full min-h-screen w-80 space-y-6 overflow-x-auto overflow-y-scroll bg-gray-100 py-10 dark:bg-neutral-800"
   >
-    <p class="font-medium text-xl text-left flex items-start justify-start px-10">
+    <p class="flex items-start justify-start px-10 text-left text-xl font-medium">
       {$t('course.navItem.lessons.version_history.title')}
     </p>
 
@@ -213,25 +214,25 @@
       {#each lessonHistory as version, index}
         <button
           on:click={() => updateContentVersion(version, index)}
-          class="hover:bg-gray-200 dark:hover:bg-neutral-700 cursor-pointer p-4 w-full px-10 flex items-start {index ==
+          class="flex w-full cursor-pointer items-start p-4 px-10 hover:bg-gray-200 dark:hover:bg-neutral-700 {index ==
           selectedVersionIndex
             ? 'bg-gray-200 dark:bg-neutral-700'
             : ''}"
         >
           <CaretRight class="mt-1"></CaretRight>
           <div>
-            <span class="inline-block font-medium text-base"
+            <span class="inline-block text-base font-medium"
               >{formatTimestamp(version.timestamp)}</span
             >
             {#if index == 0}
-              <span class="block italic text-xs text-start"
+              <span class="block text-start text-xs italic"
                 >{$t('course.navItem.lessons.version_history.current_version')}</span
               >
             {/if}
           </div>
         </button>
       {/each}
-      <div class="flex items-center justify-start px-10 mt-2 h-10">
+      <div class="mt-2 flex h-10 items-center justify-start px-10">
         <PrimaryButton className="h-full" isLoading={isMoreHistoryLoading} onClick={loadMoreHistory}
           >{$t('course.navItem.lessons.version_history.fetch_more_versions')}</PrimaryButton
         >

apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
+  import { sanitizeHtml } from '$lib/utils/functions/sanitize';
   import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
   import {
     lesson,
@@ -26,7 +27,7 @@
   <HtmlRender className="m-auto">
     <svelte:fragment slot="content">
       <div>
-        {@html content}
+        {@html sanitizeHtml(content)}
       </div>
     </svelte:fragment>
   </HtmlRender>

apps/dashboard/src/lib/components/Course/components/NewsFeed/NewsFeedCard.svelte

@@ -12,6 +12,7 @@
   import { isOrgAdmin } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
+  import { sanitizeHtml } from '$lib/utils/functions/sanitize';
   import pluralize from 'pluralize';
   import { onMount } from 'svelte';
   import { addNewsfeedCommentValidation } from '$lib/utils/functions/validator';
@@ -101,18 +102,18 @@
 <div
   id={feed.id}
   class="flex flex-col gap-5 {isActive
-    ? 'border-2 border-primary-700'
+    ? 'border-primary-700 border-2'
-    : 'border border-gray-200 dark:border-neutral-600'} rounded-md mb-7 max-w-3xl"
+    : 'border border-gray-200 dark:border-neutral-600'} mb-7 max-w-3xl rounded-md"
 >
   <section>
     <div class="p-3 pb-0">
-      <div class="flex justify-between mb-2">
+      <div class="mb-2 flex justify-between">
         <span class="flex items-center gap-3">
-          <div class="w-9 h-9">
+          <div class="h-9 w-9">
             <img
               src={feed.author?.profile?.avatar_url}
               alt="users banner"
-              class="w-full h-full rounded-full object-cover"
+              class="h-full w-full rounded-full object-cover"
             />
           </div>
           <span>
@@ -135,7 +136,7 @@
         <HtmlRender className="text-sm font-medium w-[80%] mb-4">
           <svelte:fragment slot="content">
             <div>
-              {@html feed.content}
+              {@html sanitizeHtml(feed.content)}
             </div>
           </svelte:fragment>
         </HtmlRender>
@@ -150,7 +151,7 @@
               on:click={() => handleAddNewReaction(reactionType)}
               class={`flex items-center transition ${
                 feed.reaction[reactionType].length >= 1 &&
-                `${getClassIfSelectedByAuthor(reactionType)} dark:text-black border rounded-full`
+                `${getClassIfSelectedByAuthor(reactionType)} rounded-full border dark:text-black`
               }`}
             >
               <div class="text-[15px]">{reactions[reactionType]}</div>
@@ -164,14 +165,14 @@
     </div>
   </section>
 
-  <section class="border-t border-gray-200 dark:border-neutral-600 p-3">
+  <section class="border-t border-gray-200 p-3 dark:border-neutral-600">
     {#if feed.comment.length > 0}
       <button
         on:click={expandComment}
-        class="flex flex-row items-center gap-1 -mx-2 px-2 rounded-md"
+        class="-mx-2 flex flex-row items-center gap-1 rounded-md px-2"
       >
         <UserMultiple size={16} />
-        <p class="text-sm py-2">
+        <p class="py-2 text-sm">
           {pluralize('comment', feed.comment.length, true)}
         </p>
       </button>
@@ -179,13 +180,13 @@
     <div>
       {#each feed.comment as comment, index}
         {#if comment.content && (areCommentsExpanded || index === feed.comment.length - 1)}
-          <div class="group flex justify-between items-center py-2">
+          <div class="group flex items-center justify-between py-2">
             <span class="flex items-center gap-3">
-              <div class="w-9 h-9">
+              <div class="h-9 w-9">
                 <img
                   src={comment.author?.profile?.avatar_url}
                   alt="users banner"
-                  class="w-full h-full rounded-full object-cover"
+                  class="h-full w-full rounded-full object-cover"
                 />
               </div>
               <span>
@@ -211,11 +212,11 @@
       {/each}
     </div>
     <div class="flex items-center justify-between gap-2">
-      <div class="w-7 h-7">
+      <div class="h-7 w-7">
         <img
           src={author.avatar_url}
           alt="users banner"
-          class="w-full h-full rounded-full object-cover"
+          class="h-full w-full rounded-full object-cover"
         />
       </div>
       <div class="flex-1">
@@ -224,7 +225,7 @@
           bind:value={comment}
           on:keydown={handleAddNewComment}
           placeholder="Add class comment"
-          class="w-full bg-transparent border border-gray-200 dark:border-neutral-600 rounded-3xl"
+          class="w-full rounded-3xl border border-gray-200 bg-transparent dark:border-neutral-600"
           required
         />
       </div>

apps/dashboard/src/lib/components/HTMLRender/HTMLRender.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { sanitizeHtml } from '$lib/utils/functions/sanitize';
   export let content = '';
   export let className = '';
   export let id = '';
@@ -13,6 +14,6 @@
   {#if $$slots.content}
     <slot name="content" />
   {:else}
-    {@html content}
+    {@html sanitizeHtml(content)}
   {/if}
 </article>

apps/dashboard/src/lib/utils/functions/sanitize.ts

@@ -0,0 +1,177 @@
+/**
+ * HTML Sanitization utilities to prevent XSS attacks
+ */
+import DOMPurify from 'dompurify';
+import { browser } from '$app/environment';
+
+/**
+ * Sanitizes HTML content using DOMPurify to prevent XSS attacks
+ * This provides robust client-side protection against XSS attacks
+ */
+export function sanitizeHtml(html: string): string {
+  if (typeof html !== 'string') return '';
+
+  // Only run DOMPurify in the browser
+  if (!browser) {
+    return fallbackSanitize(html);
+  }
+
+  return DOMPurify.sanitize(html, {
+    // Allow safe HTML tags
+    ALLOWED_TAGS: [
+      'p',
+      'br',
+      'strong',
+      'b',
+      'em',
+      'i',
+      'u',
+      'span',
+      'div',
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'ul',
+      'ol',
+      'li',
+      'blockquote',
+      'pre',
+      'code',
+      'a',
+      'img'
+    ],
+    // Allow safe attributes
+    ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'style'],
+    // Forbid dangerous attributes
+    FORBID_ATTR: [
+      'onerror',
+      'onload',
+      'onclick',
+      'onmouseover',
+      'onfocus',
+      'onblur',
+      'onchange',
+      'onsubmit',
+      'onreset',
+      'onselect',
+      'onunload'
+    ],
+    // Forbid dangerous tags
+    FORBID_TAGS: [
+      'script',
+      'iframe',
+      'object',
+      'embed',
+      'form',
+      'input',
+      'textarea',
+      'select',
+      'button',
+      'meta',
+      'link'
+    ],
+    // Keep content of forbidden tags
+    KEEP_CONTENT: true,
+    // Sanitize attributes
+    SANITIZE_DOM: true,
+    // Allow data attributes
+    ALLOW_DATA_ATTR: false,
+    // Transform URLs
+    ALLOWED_URI_REGEXP:
+      /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
+  });
+}
+
+/**
+ * Fallback sanitization for server-side rendering
+ */
+function fallbackSanitize(html: string): string {
+  if (typeof html !== 'string') return '';
+
+  // Remove script tags and their content
+  html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+
+  // Remove javascript: protocol from attributes
+  html = html.replace(/javascript:/gi, '');
+
+  // Remove on* event handlers (onclick, onload, onerror, etc.)
+  html = html.replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '');
+  html = html.replace(/\s*on\w+\s*=\s*[^\s>]*/gi, '');
+
+  // Remove data: protocol for script execution
+  html = html.replace(/\bdata:\s*text\/html/gi, 'data:text/plain');
+
+  // Remove vbscript: protocol
+  html = html.replace(/vbscript:/gi, '');
+
+  // Remove expression() from CSS (IE specific XSS vector)
+  html = html.replace(/expression\s*\(/gi, '');
+
+  // Remove dangerous tags
+  const dangerousTags = [
+    'script',
+    'iframe',
+    'object',
+    'embed',
+    'form',
+    'input',
+    'textarea',
+    'select',
+    'button'
+  ];
+  dangerousTags.forEach((tag) => {
+    const regex = new RegExp(`<${tag}\\b[^>]*>.*?<\\/${tag}>`, 'gi');
+    html = html.replace(regex, '');
+    const selfClosing = new RegExp(`<${tag}\\b[^>]*\\/>`, 'gi');
+    html = html.replace(selfClosing, '');
+    const unclosed = new RegExp(`<${tag}\\b[^>]*>`, 'gi');
+    html = html.replace(unclosed, '');
+  });
+
+  return html;
+}
+
+/**
+ * Strips all HTML tags and returns plain text
+ * Use this when you only need the text content
+ */
+export function stripHtml(html: string): string {
+  if (typeof html !== 'string') return '';
+  return html.replace(/<[^>]*>/g, '');
+}
+
+/**
+ * Escapes HTML special characters to prevent XSS
+ * Use this when displaying user input as text
+ */
+export function escapeHtml(text: string): string {
+  if (typeof text !== 'string') return '';
+
+  const map: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#x27;',
+    '/': '&#x2F;'
+  };
+
+  return text.replace(/[&<>"'/]/g, (s) => map[s]);
+}
+
+/**
+ * Validates and sanitizes URLs to prevent javascript: and data: XSS vectors
+ */
+export function sanitizeUrl(url: string): string {
+  if (typeof url !== 'string') return '';
+
+  // Remove dangerous protocols
+  if (/^(javascript|vbscript|data|file):/i.test(url.trim())) {
+    return '';
+  }
+
+  return url;
+}

apps/dashboard/src/routes/csp-report/+server.ts

@@ -0,0 +1,26 @@
+import type { RequestHandler } from './$types';
+
+export const POST: RequestHandler = async ({ request }) => {
+  try {
+    const report = await request.json();
+
+    // Log the CSP violation for monitoring
+    console.warn('CSP Violation Report:', {
+      timestamp: new Date().toISOString(),
+      documentURI: report['document-uri'],
+      violatedDirective: report['violated-directive'],
+      blockedURI: report['blocked-uri'],
+      effectiveDirective: report['effective-directive'],
+      originalPolicy: report['original-policy'],
+      sourceFile: report['source-file'],
+      lineNumber: report['line-number'],
+      columnNumber: report['column-number'],
+      userAgent: request.headers.get('user-agent')
+    });
+
+    return new Response('OK', { status: 200 });
+  } catch (error) {
+    console.error('Error processing CSP report:', error);
+    return new Response('Bad Request', { status: 400 });
+  }
+};

apps/dashboard/src/routes/lms/community/[slug]/+page.svelte

@@ -26,6 +26,7 @@
   import { fetchCourses } from '$lib/utils/services/courses';
   import { t } from '$lib/utils/functions/translations';
   import { courses } from '$lib/components/Courses/store';
+  import { sanitizeHtml } from '$lib/utils/functions/sanitize';
   import type { Course } from '$lib/utils/types';
 
   export let data;
@@ -383,20 +384,21 @@
   }}
   onDelete={() => handleDelete(false)}
 />
-<section class="max-w-3xl mx-auto md:mx-10 lg:mb-20">
+<section class="mx-auto max-w-3xl md:mx-10 lg:mb-20">
+  sfgsggs
   {#if !question}
-    <div class="py-10 px-5 mb-3">
+    <div class="mb-3 px-5 py-10">
       <SkeletonText style="width: 25%;" />
       <SkeletonText style="width: 100%; margin-bottom: 2rem" />
       <SkeletonPlaceholder style="width: 100%; height: 20rem;" />
     </div>
   {:else}
-    <div class="py-10 px-5">
+    <div class="px-5 py-10">
-      <a class="text-gray-500 dark:text-white text-md flex items-center" href={`/lms/community`}>
+      <a class="text-md flex items-center text-gray-500 dark:text-white" href={`/lms/community`}>
         <ArrowLeftIcon size={24} class="carbon-icon dark:text-white" />
         {$t('community.ask.go_back')}
       </a>
-      <div class="my-5 flex justify-between items-center">
+      <div class="my-5 flex items-center justify-between">
         {#if isEditMode}
           <TextField
             bind:value={editContent.title}
@@ -404,7 +406,7 @@
             errorMessage={errors.title}
           />
           <Dropdown
-            class="w-[25%] h-full"
+            class="h-full w-[25%]"
             size="xl"
             label="Select Course"
             items={fetchedCourses.map((course) => ({ id: course.id, text: course.title }))}
@@ -418,6 +420,7 @@
               disabled={voted.question}
             />
             <h2 class="text-3xl">{question.title}</h2>
+            sfgsg
           </div>
         {/if}
 
@@ -439,17 +442,18 @@
           {/if}
         {/if}
       </div>
-      <div class="my-1 px-1 rounded-lg border border-1 border-gray">
+      <div class="border-1 border-gray my-1 rounded-lg border px-1">
-        <header class="flex items-center justify-between leading-none p-2">
+        <header class="flex items-center justify-between p-2 leading-none">
-          <div class="flex items-center no-underline hover:underline text-black">
+          <div class="flex items-center text-black no-underline hover:underline">
+            sfgsg
             <Avatar
               src={question.author.avatar}
               name={question.author.name}
               width="w-7"
               height="h-7"
             />
-            <p class="dark:text-white ml-2 text-sm">{question.author.name}</p>
+            <p class="ml-2 text-sm dark:text-white">{question.author.name}</p>
-            <p class="dark:text-white ml-2 text-sm text-gray-500">
+            <p class="ml-2 text-sm text-gray-500 dark:text-white">
               {question.createdAt}
             </p>
           </div>
@@ -475,7 +479,7 @@
           </div>
         {:else}
           <section class="prose prose-sm sm:prose p-2">
-            {@html question.body}
+            {@html sanitizeHtml(question.body)}
           </section>
         {/if}
       </div>
@@ -485,18 +489,18 @@
       </div>
 
       {#each question.comments as comment}
-        <div class="my-5 px-1 flex items-start">
+        <div class="my-5 flex items-start px-1">
           <Vote
             value={comment.votes}
             upVote={() => upvoteQuestion('comment', comment.id)}
             disabled={voted.comment[comment.id]}
           />
-          <div class="w-full rounded-lg border border-1 border-gray">
+          <div class="border-1 border-gray w-full rounded-lg border">
-            <header class="flex items-center justify-between leading-none p-2">
+            <header class="flex items-center justify-between p-2 leading-none">
               <div class="flex items-center text-black">
                 <Avatar src={comment.avatar} name={comment.name} width="w-7" height="h-7" />
-                <p class="dark:text-white ml-2 text-sm">{comment.name}</p>
+                <p class="ml-2 text-sm dark:text-white">{comment.name}</p>
-                <p class="dark:text-white ml-2 text-sm text-gray-500">
+                <p class="ml-2 text-sm text-gray-500 dark:text-white">
                   {comment.createdAt}
                 </p>
               </div>
@@ -518,7 +522,7 @@
               {/if}
             </header>
             <article class="prose prose-sm sm:prose p-2">
-              {@html comment.comment}
+              {@html sanitizeHtml(comment.comment)}
             </article>
           </div>
         </div>
@@ -535,7 +539,7 @@
           />
         {/if}
 
-        <div class="flex justify-end mr-2">
+        <div class="mr-2 flex justify-end">
           <PrimaryButton label="Comment" onClick={submitComment} />
         </div>
       </div>

apps/dashboard/src/routes/org/[slug]/community/[slug]/+page.svelte

@@ -19,6 +19,7 @@
     commentInCommunityValidation
   } from '$lib/utils/functions/validator';
   import { fetchCourses } from '$lib/utils/services/courses';
+  import { sanitizeHtml } from '$lib/utils/functions/sanitize';
   import { currentOrg, currentOrgPath, isOrgAdmin } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import type { Course } from '$lib/utils/types';
@@ -477,7 +478,7 @@
           </div>
         {:else}
           <section class="prose prose-sm sm:prose p-2">
-            {@html question.body}
+            {@html sanitizeHtml(question.body)}
           </section>
         {/if}
       </div>
@@ -520,7 +521,7 @@
               {/if}
             </header>
             <article class="prose prose-sm sm:prose p-2">
-              {@html comment.comment}
+              {@html sanitizeHtml(comment.comment)}
             </article>
           </div>
         </div>

apps/dashboard/svelte.config.js

@@ -18,6 +18,78 @@ const config = {
     alias: {
       $lib: path.resolve('./src/lib'),
       $mail: path.resolve('./src/mail')
+    },
+    csp: {
+      directives: {
+        'default-src': ['self'],
+        'script-src': ['self', 'https://assets.cdn.clsrio.com', 'https://cdnjs.cloudflare.com'],
+        'style-src': [
+          'self',
+          'unsafe-inline',
+          'https://cdn.plyr.io',
+          'https://unpkg.com/katex@0.12.0/dist/katex.min.css',
+          'https://assets.cdn.clsrio.com/eqneditor_1.css'
+        ],
+        'style-src-elem': [
+          'self',
+          'unsafe-inline',
+          'https://cdn.plyr.io',
+          'https://unpkg.com/katex@0.12.0/dist/katex.min.css',
+          'https://assets.cdn.clsrio.com/eqneditor_1.css'
+        ],
+        'font-src': ['self', 'https://fonts.gstatic.com', 'https://cdn.plyr.io'],
+        'img-src': ['self', 'data:', 'https:'],
+        'frame-src': ['self', 'https://www.youtube.com', 'https://youtube.com'],
+        'connect-src': [
+          'self',
+          'https://*.supabase.co',
+          'https://assets.cdn.clsrio.com',
+          'https://cdn.plyr.io',
+          'http://localhost:54321',
+          'ws://localhost:54321',
+          'wss://*.supabase.co'
+        ],
+        'object-src': ['none'],
+        'base-uri': ['self'],
+        'form-action': ['self'],
+        'frame-ancestors': ['none'],
+        'upgrade-insecure-requests': true
+      },
+      reportOnly: {
+        'default-src': ['self'],
+        'script-src': ['self', 'https://assets.cdn.clsrio.com', 'https://cdnjs.cloudflare.com'],
+        'style-src': [
+          'self',
+          'unsafe-inline',
+          'https://cdn.plyr.io',
+          'https://unpkg.com/katex@0.12.0/dist/katex.min.css',
+          'https://assets.cdn.clsrio.com/eqneditor_1.css'
+        ],
+        'style-src-elem': [
+          'self',
+          'unsafe-inline',
+          'https://cdn.plyr.io',
+          'https://unpkg.com/katex@0.12.0/dist/katex.min.css',
+          'https://assets.cdn.clsrio.com/eqneditor_1.css'
+        ],
+        'font-src': ['self', 'https://fonts.gstatic.com', 'https://cdn.plyr.io'],
+        'img-src': ['self', 'data:', 'https:'],
+        'frame-src': ['self', 'https://www.youtube.com', 'https://youtube.com'],
+        'connect-src': [
+          'self',
+          'https://*.supabase.co',
+          'https://assets.cdn.clsrio.com',
+          'https://cdn.plyr.io',
+          'http://localhost:54321',
+          'ws://localhost:54321',
+          'wss://*.supabase.co'
+        ],
+        'object-src': ['none'],
+        'base-uri': ['self'],
+        'form-action': ['self'],
+        'frame-ancestors': ['none'],
+        'report-uri': ['/csp-report']
+      }
     }
   }
 };

pnpm-lock.yaml

@@ -317,19 +317,19 @@ importers:
         version: 2.2.0
       '@polar-sh/sveltekit':
         specifier: ^0.2.1
-        version: 0.2.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)))(zod@3.25.64)
+        version: 0.2.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)))(zod@3.25.64)
       '@supabase/supabase-js':
         specifier: ^2.31.0
         version: 2.50.0(bufferutil@4.0.9)(utf-8-validate@6.0.5)
       '@sveltejs/adapter-auto':
         specifier: ^2.1.0
-        version: 2.1.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)))
+        version: 2.1.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)))
       '@sveltejs/adapter-node':
         specifier: ^1.3.1
-        version: 1.3.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)))
+        version: 1.3.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)))
       '@sveltejs/adapter-vercel':
         specifier: ^3.1.0
-        version: 3.1.0(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)))(encoding@0.1.13)
+        version: 3.1.0(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)))(encoding@0.1.13)
       '@sveltekit-i18n/base':
         specifier: ^1.3.7
         version: 1.3.7(svelte@4.2.20)
@@ -338,7 +338,7 @@ importers:
         version: 1.0.8
       '@tailwindcss/forms':
         specifier: ^0.5.4
-        version: 0.5.10(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)))
+        version: 0.5.10(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)))
       '@types/pluralize':
         specifier: 0.0.30
         version: 0.0.30
@@ -378,6 +378,9 @@ importers:
       dayjs:
         specifier: ^1.11.10
         version: 1.11.13
+      dompurify:
+        specifier: ^3.3.0
+        version: 3.3.0
       encoding:
         specifier: ^0.1.13
         version: 0.1.13
@@ -471,16 +474,19 @@ importers:
         version: 7.27.6
       '@sveltejs/kit':
         specifier: ^1.29.0
-        version: 1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))
+        version: 1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))
       '@tailwindcss/typography':
         specifier: ^0.5.9
-        version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)))
+        version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)))
       '@testing-library/jest-dom':
         specifier: ^6.1.5
         version: 6.6.3
       '@testing-library/svelte':
         specifier: ^4.0.5
         version: 4.2.3(svelte@4.2.20)
+      '@types/dompurify':
+        specifier: ^3.2.0
+        version: 3.2.0
       '@types/jest':
         specifier: ^29.5.10
         version: 29.5.14
@@ -513,13 +519,13 @@ importers:
         version: 3.1.1
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+        version: 29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       postcss:
         specifier: ^8.4.24
         version: 8.5.5
       postcss-load-config:
         specifier: ^4.0.1
-        version: 4.0.2(postcss@8.5.5)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+        version: 4.0.2(postcss@8.5.5)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       qrcode:
         specifier: ^1.5.3
         version: 1.5.4
@@ -534,22 +540,22 @@ importers:
         version: 0.9.61(svelte@4.2.20)
       svelte-jester:
         specifier: ^3.0.0
-        version: 3.0.0(jest@29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)))(svelte@4.2.20)
+        version: 3.0.0(jest@29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)))(svelte@4.2.20)
       svelte-loading-spinners:
         specifier: ^0.3.4
         version: 0.3.6
       svelte-preprocess:
         specifier: ^5.0.4
-        version: 5.1.4(@babel/core@7.27.4)(postcss-load-config@4.0.2(postcss@8.5.5)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)))(postcss@8.5.5)(sass@1.89.2)(svelte@4.2.20)(typescript@5.8.3)
+        version: 5.1.4(@babel/core@7.27.4)(postcss-load-config@4.0.2(postcss@8.5.5)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)))(postcss@8.5.5)(sass@1.89.2)(svelte@4.2.20)(typescript@5.8.3)
       tailwindcss:
         specifier: ^3.3.2
-        version: 3.4.17(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+        version: 3.4.17(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       ts-jest:
         specifier: ^29.1.1
-        version: 29.4.0(@babel/core@7.27.4)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.4))(jest-util@29.7.0)(jest@29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)))(typescript@5.8.3)
+        version: 29.4.0(@babel/core@7.27.4)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.4))(jest-util@29.7.0)(jest@29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)))(typescript@5.8.3)
       ts-node:
         specifier: ^10.9.2
-        version: 10.9.2(@types/node@22.15.31)(typescript@5.8.3)
+        version: 10.9.2(@types/node@24.0.1)(typescript@5.8.3)
       tsconfig:
         specifier: workspace:*
         version: link:../../packages/tsconfig
@@ -561,7 +567,7 @@ importers:
         version: 5.8.3
       vite:
         specifier: ^4.4.8
-        version: 4.5.14(@types/node@22.15.31)(sass@1.89.2)
+        version: 4.5.14(@types/node@24.0.1)(sass@1.89.2)
 
   apps/docs:
     dependencies:
@@ -3692,6 +3698,10 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
+  '@types/dompurify@3.2.0':
+    resolution: {integrity: sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==}
+    deprecated: This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.
+
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
@@ -5064,8 +5074,8 @@ packages:
   dompurify@3.1.6:
     resolution: {integrity: sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==}
 
-  dompurify@3.2.6:
+  dompurify@3.3.0:
-    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
+    resolution: {integrity: sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==}
 
   dot-prop@5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
@@ -5880,6 +5890,7 @@ packages:
 
   intersection-observer@0.12.2:
     resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
+    deprecated: The Intersection Observer polyfill is no longer needed and can safely be removed. Intersection Observer has been Baseline since 2019.
 
   intl-messageformat@10.7.16:
     resolution: {integrity: sha512-UmdmHUmp5CIKKjSoE10la5yfU+AYJAaiYLsodbjL4lji83JNvgOQUjGaGhGrpFCb0Uh7sl7qfP1IyILa8Z40ug==}
@@ -10592,7 +10603,7 @@ snapshots:
       d3-cloud: 1.2.7
       d3-sankey: 0.12.3
       date-fns: 4.1.0
-      dompurify: 3.2.6
+      dompurify: 3.3.0
       html-to-image: 1.11.13
       lodash-es: 4.17.21
       topojson-client: 3.1.0
@@ -11308,7 +11319,7 @@ snapshots:
       jest-util: 29.7.0
       slash: 3.0.0
 
-  '@jest/core@29.7.0(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))':
+  '@jest/core@29.7.0(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))':
     dependencies:
       '@jest/console': 29.7.0
       '@jest/reporters': 29.7.0
@@ -11322,7 +11333,7 @@ snapshots:
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+      jest-config: 29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       jest-haste-map: 29.7.0
       jest-message-util: 29.7.0
       jest-regex-util: 29.6.3
@@ -11711,10 +11722,10 @@ snapshots:
       standardwebhooks: 1.0.0
       zod: 3.25.64
 
-  '@polar-sh/sveltekit@0.2.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)))(zod@3.25.64)':
+  '@polar-sh/sveltekit@0.2.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)))(zod@3.25.64)':
     dependencies:
       '@polar-sh/sdk': 0.20.2(zod@3.25.64)
-      '@sveltejs/kit': 1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))
+      '@sveltejs/kit': 1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))
     transitivePeerDependencies:
       - zod
 
@@ -12341,9 +12352,9 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
-  '@sveltejs/adapter-auto@2.1.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)))':
+  '@sveltejs/adapter-auto@2.1.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)))':
     dependencies:
-      '@sveltejs/kit': 1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))
+      '@sveltejs/kit': 1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))
       import-meta-resolve: 4.1.0
 
   '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.21.5(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.20)(vite@5.4.19(@types/node@24.0.1)(sass@1.89.2)))(svelte@4.2.20)(vite@5.4.19(@types/node@24.0.1)(sass@1.89.2)))':
@@ -12361,26 +12372,26 @@ snapshots:
       '@sveltejs/kit': 2.21.5(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.34.1)(vite@6.3.5(@types/node@24.0.1)(jiti@1.21.7)(sass@1.89.2)(tsx@4.20.3)(yaml@2.8.0)))(svelte@5.34.1)(vite@6.3.5(@types/node@24.0.1)(jiti@1.21.7)(sass@1.89.2)(tsx@4.20.3)(yaml@2.8.0))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-node@1.3.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)))':
+  '@sveltejs/adapter-node@1.3.1(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)))':
     dependencies:
       '@rollup/plugin-commonjs': 25.0.8(rollup@3.29.5)
       '@rollup/plugin-json': 6.1.0(rollup@3.29.5)
       '@rollup/plugin-node-resolve': 15.3.1(rollup@3.29.5)
-      '@sveltejs/kit': 1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))
+      '@sveltejs/kit': 1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))
       rollup: 3.29.5
 
-  '@sveltejs/adapter-vercel@3.1.0(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)))(encoding@0.1.13)':
+  '@sveltejs/adapter-vercel@3.1.0(@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)))(encoding@0.1.13)':
     dependencies:
-      '@sveltejs/kit': 1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))
+      '@sveltejs/kit': 1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))
       '@vercel/nft': 0.24.4(encoding@0.1.13)
       esbuild: 0.18.20
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))':
+  '@sveltejs/kit@1.30.4(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.5.3(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))
+      '@sveltejs/vite-plugin-svelte': 2.5.3(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))
       '@types/cookie': 0.5.4
       cookie: 0.5.0
       devalue: 4.3.3
@@ -12394,7 +12405,7 @@ snapshots:
       svelte: 4.2.20
       tiny-glob: 0.2.9
       undici: 5.29.0
-      vite: 4.5.14(@types/node@22.15.31)(sass@1.89.2)
+      vite: 4.5.14(@types/node@24.0.1)(sass@1.89.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -12455,12 +12466,12 @@ snapshots:
       vite: 6.3.5(@types/node@24.0.1)(jiti@1.21.7)(sass@1.89.2)(tsx@4.20.3)(yaml@2.8.0)
       vitefu: 1.0.6(vite@6.3.5(@types/node@24.0.1)(jiti@1.21.7)(sass@1.89.2)(tsx@4.20.3)(yaml@2.8.0))
 
-  '@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.3(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)))(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))':
+  '@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.3(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)))(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.5.3(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))
+      '@sveltejs/vite-plugin-svelte': 2.5.3(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))
       debug: 4.4.1
       svelte: 4.2.20
-      vite: 4.5.14(@types/node@22.15.31)(sass@1.89.2)
+      vite: 4.5.14(@types/node@24.0.1)(sass@1.89.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -12491,17 +12502,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@2.5.3(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))':
+  '@sveltejs/vite-plugin-svelte@2.5.3(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.5.3(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)))(svelte@4.2.20)(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.5.3(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)))(svelte@4.2.20)(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))
       debug: 4.4.1
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
       svelte: 4.2.20
       svelte-hmr: 0.15.3(svelte@4.2.20)
-      vite: 4.5.14(@types/node@22.15.31)(sass@1.89.2)
+      vite: 4.5.14(@types/node@24.0.1)(sass@1.89.2)
-      vitefu: 0.2.5(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2))
+      vitefu: 0.2.5(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -12567,24 +12578,11 @@ snapshots:
     dependencies:
       tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
 
-  '@tailwindcss/forms@0.5.10(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)))':
-    dependencies:
-      mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
-
   '@tailwindcss/forms@0.5.10(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)))':
     dependencies:
       mini-svg-data-uri: 1.4.4
       tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
 
-  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)))':
-    dependencies:
-      lodash.castarray: 4.4.0
-      lodash.isplainobject: 4.0.6
-      lodash.merge: 4.6.2
-      postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
-
   '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)))':
     dependencies:
       lodash.castarray: 4.4.0
@@ -12823,6 +12821,10 @@ snapshots:
     dependencies:
       '@types/ms': 2.1.0
 
+  '@types/dompurify@3.2.0':
+    dependencies:
+      dompurify: 3.3.0
+
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.8
@@ -12908,7 +12910,6 @@ snapshots:
   '@types/node@24.0.1':
     dependencies:
       undici-types: 7.8.0
-    optional: true
 
   '@types/nodemailer@6.4.17':
     dependencies:
@@ -13992,13 +13993,13 @@ snapshots:
     dependencies:
       layout-base: 1.0.2
 
-  create-jest@29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)):
+  create-jest@29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)):
     dependencies:
       '@jest/types': 29.6.3
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+      jest-config: 29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       jest-util: 29.7.0
       prompts: 2.4.2
     transitivePeerDependencies:
@@ -14376,7 +14377,7 @@ snapshots:
 
   dompurify@3.1.6: {}
 
-  dompurify@3.2.6:
+  dompurify@3.3.0:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
@@ -15712,16 +15713,16 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-cli@29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)):
+  jest-cli@29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)):
     dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+      '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
       chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+      create-jest: 29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       exit: 0.1.2
       import-local: 3.2.0
-      jest-config: 29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+      jest-config: 29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       jest-util: 29.7.0
       jest-validate: 29.7.0
       yargs: 17.7.2
@@ -15731,7 +15732,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-config@29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)):
+  jest-config@29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)):
     dependencies:
       '@babel/core': 7.27.4
       '@jest/test-sequencer': 29.7.0
@@ -15757,7 +15758,38 @@ snapshots:
       strip-json-comments: 3.1.1
     optionalDependencies:
       '@types/node': 22.15.31
-      ts-node: 10.9.2(@types/node@22.15.31)(typescript@5.8.3)
+      ts-node: 10.9.2(@types/node@24.0.1)(typescript@5.8.3)
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
+  jest-config@29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)):
+    dependencies:
+      '@babel/core': 7.27.4
+      '@jest/test-sequencer': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.27.4)
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 29.7.0
+      jest-environment-node: 29.7.0
+      jest-get-type: 29.6.3
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-runner: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      micromatch: 4.0.8
+      parse-json: 5.2.0
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    optionalDependencies:
+      '@types/node': 24.0.1
+      ts-node: 10.9.2(@types/node@24.0.1)(typescript@5.8.3)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -15977,12 +16009,12 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)):
+  jest@29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)):
     dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+      '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       '@jest/types': 29.6.3
       import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+      jest-cli: 29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -18334,9 +18366,9 @@ snapshots:
     dependencies:
       svelte: 5.34.1
 
-  svelte-jester@3.0.0(jest@29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)))(svelte@4.2.20):
+  svelte-jester@3.0.0(jest@29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)))(svelte@4.2.20):
     dependencies:
-      jest: 29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+      jest: 29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       svelte: 4.2.20
 
   svelte-loading-spinners@0.3.6: {}
@@ -18360,21 +18392,6 @@ snapshots:
       svelte: 5.34.1
       tslib: 2.8.1
 
-  svelte-preprocess@5.1.4(@babel/core@7.27.4)(postcss-load-config@4.0.2(postcss@8.5.5)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)))(postcss@8.5.5)(sass@1.89.2)(svelte@4.2.20)(typescript@5.8.3):
-    dependencies:
-      '@types/pug': 2.0.10
-      detect-indent: 6.1.0
-      magic-string: 0.30.17
-      sorcery: 0.11.1
-      strip-indent: 3.0.0
-      svelte: 4.2.20
-    optionalDependencies:
-      '@babel/core': 7.27.4
-      postcss: 8.5.5
-      postcss-load-config: 4.0.2(postcss@8.5.5)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
-      sass: 1.89.2
-      typescript: 5.8.3
-
   svelte-preprocess@5.1.4(@babel/core@7.27.4)(postcss-load-config@4.0.2(postcss@8.5.5)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)))(postcss@8.5.5)(sass@1.89.2)(svelte@4.2.20)(typescript@5.8.3):
     dependencies:
       '@types/pug': 2.0.10
@@ -18694,12 +18711,12 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-jest@29.4.0(@babel/core@7.27.4)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.4))(jest-util@29.7.0)(jest@29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3)))(typescript@5.8.3):
+  ts-jest@29.4.0(@babel/core@7.27.4)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.4))(jest-util@29.7.0)(jest@29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3)))(typescript@5.8.3):
     dependencies:
       bs-logger: 0.2.6
       ejs: 3.1.10
       fast-json-stable-stringify: 2.1.0
-      jest: 29.7.0(@types/node@22.15.31)(ts-node@10.9.2(@types/node@22.15.31)(typescript@5.8.3))
+      jest: 29.7.0(@types/node@24.0.1)(ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3))
       json5: 2.2.3
       lodash.memoize: 4.1.2
       make-error: 1.3.6
@@ -18768,6 +18785,7 @@ snapshots:
       typescript: 5.8.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optional: true
 
   ts-node@10.9.2(@types/node@24.0.1)(typescript@5.8.3):
     dependencies:
@@ -18786,7 +18804,6 @@ snapshots:
       typescript: 5.8.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    optional: true
 
   tsc-alias@1.8.16:
     dependencies:
@@ -18878,8 +18895,7 @@ snapshots:
 
   undici-types@6.21.0: {}
 
-  undici-types@7.8.0:
+  undici-types@7.8.0: {}
-    optional: true
 
   undici@5.29.0:
     dependencies:
@@ -19159,13 +19175,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite@4.5.14(@types/node@22.15.31)(sass@1.89.2):
+  vite@4.5.14(@types/node@24.0.1)(sass@1.89.2):
     dependencies:
       esbuild: 0.18.20
       postcss: 8.5.5
       rollup: 3.29.5
     optionalDependencies:
-      '@types/node': 22.15.31
+      '@types/node': 24.0.1
       fsevents: 2.3.3
       sass: 1.89.2
 
@@ -19215,9 +19231,9 @@ snapshots:
       tsx: 4.20.3
       yaml: 2.8.0
 
-  vitefu@0.2.5(vite@4.5.14(@types/node@22.15.31)(sass@1.89.2)):
+  vitefu@0.2.5(vite@4.5.14(@types/node@24.0.1)(sass@1.89.2)):
     optionalDependencies:
-      vite: 4.5.14(@types/node@22.15.31)(sass@1.89.2)
+      vite: 4.5.14(@types/node@24.0.1)(sass@1.89.2)
 
   vitefu@0.2.5(vite@5.4.19(@types/node@24.0.1)(sass@1.89.2)):
     optionalDependencies: