From 21238300b048743faf7bf655d68f15392fab01fa Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 1 Jul 2026 10:52:11 +0000
Subject: [PATCH] Fix XSS vulnerability in email preview using sandboxed iframe

* Replaced dangerouslySetInnerHTML with a sandboxed iframe to safely render untrusted dynamic email HTML.
* Set sandbox="allow-popups allow-popups-to-escape-sandbox" to allow link clicking while preventing scripts.
* Injected styles into the srcDoc to preserve original typography.
* Added security learnings to .jules/sentinel.md.

Co-authored-by: brycejohnson1417 <257422776+brycejohnson1417@users.noreply.github.com>
---
 .jules/sentinel.md                        |  9 +++++++++
 components/accounts/ppp-savings-panel.tsx | 10 +++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 .jules/sentinel.md

diff --git a/.jules/sentinel.md b/.jules/sentinel.md
new file mode 100644
index 0000000..2518fb1
--- /dev/null
+++ b/.jules/sentinel.md
@@ -0,0 +1,9 @@
+## 2024-07-01 - Prevent reverse tabnabbing on external links
+**Vulnerability:** External links with `target="_blank"` missing `rel="noopener noreferrer"`.
+**Learning:** React/Next.js might not always auto-add these attributes depending on how the tag is structured, and it's safer to be explicit to prevent reverse tabnabbing.
+**Prevention:** Always explicitly include `rel="noopener noreferrer"` when using `target="_blank"`.
+
+## 2024-07-01 - Prevent XSS in dynamic email rendering
+**Vulnerability:** Using `dangerouslySetInnerHTML` directly in the DOM to render dynamic email HTML (even if sanitized by DOMPurify).
+**Learning:** DOMPurify sanitizes, but doesn't isolate the environment. An attacker could potentially find a DOMPurify bypass, or CSS could leak and affect the application UI. Rendering untrusted HTML (like an email preview) should be done in an isolated environment.
+**Prevention:** Always use a sandboxed `<iframe>` with `srcDoc` and `sandbox="allow-popups allow-popups-to-escape-sandbox"` instead of `dangerouslySetInnerHTML` when rendering dynamic, potentially untrusted HTML content like emails.
diff --git a/components/accounts/ppp-savings-panel.tsx b/components/accounts/ppp-savings-panel.tsx
index e6d961b..ccab773 100644
--- a/components/accounts/ppp-savings-panel.tsx
+++ b/components/accounts/ppp-savings-panel.tsx
@@ -41,7 +41,11 @@ export function PppSavingsPanel({ orgSlug, accountId }: PppSavingsPanelProps) {
     }
     return `mailto:${encodeURIComponent(report.recipientEmail)}?subject=${encodeURIComponent(report.email.subject)}&body=${encodeURIComponent(draft)}`;
   }, [draft, report]);
-  const sanitizedEmailHtml = useMemo(() => (report?.email.html ? DOMPurify.sanitize(report.email.html) : ""), [report]);
+  const sanitizedEmailHtml = useMemo(() => {
+    if (!report?.email.html) return "";
+    const cleanHtml = DOMPurify.sanitize(report.email.html);
+    return `<style>body { font-family: sans-serif; color: black; margin: 0; padding: 24px; }</style>${cleanHtml}`;
+  }, [report]);
 
   const pdfHref = report ? `/api/runtime/organizations/${orgSlug}/accounts/${accountId}/ppp-savings/pdf?year=${report.year}` : null;
 
@@ -232,8 +236,8 @@ export function PppSavingsPanel({ orgSlug, accountId }: PppSavingsPanelProps) {
                 )}
               </div>
             </div>
-            <div className="min-h-[24rem] w-full overflow-auto bg-white p-6 text-sm text-black">
-              <div dangerouslySetInnerHTML={{ __html: sanitizedEmailHtml }} />
+            <div className="min-h-[24rem] w-full bg-white text-sm text-black">
+              <iframe srcDoc={sanitizedEmailHtml} sandbox="allow-popups allow-popups-to-escape-sandbox" className="h-full min-h-[24rem] w-full border-none" title="Email preview" />
             </div>
           </div>
         </div>