🛡️ Sentinel: [HIGH] Fix XSS vulnerability in citation add modal

.jules/sentinel.md

@@ -1,4 +1,4 @@
-## 2025-02-28 - [XSS via unsanitized dangerouslySetInnerHTML]
-**Vulnerability:** The application was passing unvalidated HTML variables, specifically `citation.formattedHtml`, to React's `dangerouslySetInnerHTML` prop in multiple components (`src/components/wiki/sortable-citation.tsx`, `src/app/cite/page.tsx`, `src/app/share/[code]/page.tsx`).
-**Learning:** This is a classic pattern for Cross-Site Scripting (XSS). If a citation's contents originated from an untrusted source or were maliciously formatted, an attacker could execute arbitrary scripts in a user's session when the citation is rendered.
-**Prevention:** Always sanitize any untrusted or dynamic HTML before rendering it in React. In a Next.js (SSR) application, use a library like `isomorphic-dompurify` to safely strip malicious scripts from the HTML payload on both the client and server side without hydration errors.
+## 2024-05-18 - [Fix XSS Vulnerability in Citation Add Modal]
+**Vulnerability:** A Cross-Site Scripting (XSS) vulnerability was found in `src/components/wiki/citation-add-modal.tsx` where user-controlled HTML (`generatedCitation.html`) was rendered directly via React's `dangerouslySetInnerHTML` without sanitization.
+**Learning:** Even when generating HTML from an internal process, it's critical to sanitize the output, particularly when the underlying text fields are populated from external user inputs (like citation fields which originate from user-submitted URLs or manual entry). The application already had `isomorphic-dompurify` available for this purpose but missed applying it in this one specific modal.
+**Prevention:** Always use a standard sanitization library (like DOMPurify) when setting `__html` in `dangerouslySetInnerHTML`. Ensure UI components handling potentially untrusted or dynamically generated HTML are audited regularly for missing sanitization steps.

src/components/wiki/citation-add-modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
+import DOMPurify from "isomorphic-dompurify";
 import { WikiButton } from "./wiki-button";
 import { formatCitation } from "@/lib/citation";
 import { buildCitationFields } from "@/lib/citation/build-fields";
@@ -266,7 +267,7 @@ export function CitationAddModal({
               </p>
               <p
                 className="text-wiki-text leading-relaxed"
-                dangerouslySetInnerHTML={{ __html: generatedCitation.html }}
+                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(generatedCitation.html) }}
               />
             </div>
           )}