From 97087baf09a4340c59e8cb894691e2c7fdf82278 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 5 Jul 2026 10:26:23 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A1=EF=B8=8F=20Sentinel:=20[HIGH]=20Fi?=
 =?UTF-8?q?x=20XSS=20vulnerability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced dangerouslySetInnerHTML with a sandboxed iframe using srcDoc for rendering dynamic email previews to prevent Cross-Site Scripting (XSS).

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

diff --git a/.jules/sentinel.md b/.jules/sentinel.md
new file mode 100644
index 0000000..19a3e73
--- /dev/null
+++ b/.jules/sentinel.md
@@ -0,0 +1,4 @@
+## 2024-05-18 - Replacing dangerouslySetInnerHTML with Sandboxed Iframes
+**Vulnerability:** XSS vulnerability in dynamically generated email preview rendered using dangerouslySetInnerHTML, even with DOMPurify.
+**Learning:** When displaying dynamic or user-generated HTML in React, dangerouslySetInnerHTML should be avoided entirely in favor of an isolated browsing context. Applying external CSS classes (like Tailwind) to an iframe does not style the inner document; styles must be injected inline via a <style> tag within the srcDoc.
+**Prevention:** Always use a sandboxed iframe (<iframe sandbox="allow-popups allow-popups-to-escape-sandbox" srcDoc={html}>) instead of dangerouslySetInnerHTML when previewing rich text content.
diff --git a/components/accounts/ppp-savings-panel.tsx b/components/accounts/ppp-savings-panel.tsx
index e6d961b..da329f6 100644
--- a/components/accounts/ppp-savings-panel.tsx
+++ b/components/accounts/ppp-savings-panel.tsx
@@ -232,8 +232,13 @@ 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="flex min-h-[24rem] w-full flex-col overflow-auto bg-white p-6 text-sm text-black">
+              <iframe
+                title="Email preview"
+                sandbox="allow-popups allow-popups-to-escape-sandbox"
+                srcDoc={`<style>body { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; line-height: 1.25rem; margin: 0; padding: 0; color: #000; background: transparent; }</style>${sanitizedEmailHtml}`}
+                className="h-full min-h-[24rem] w-full flex-1 border-0"
+              />
             </div>
           </div>
         </div>