🛡️ Sentinel: [HIGH] Fix XSS vulnerability in email preview

.jules/sentinel.md

@@ -0,0 +1,5 @@
+## 2024-07-02 - Replace dangerouslySetInnerHTML with Iframe
+
+**Vulnerability:** Used `dangerouslySetInnerHTML` for rendering email HTML previews, even with DOMPurify.
+**Learning:** `dangerouslySetInnerHTML` can still be a risk if DOMPurify fails to catch an edge-case bypass. Iframes provide a robust, defense-in-depth sandbox context that completely blocks script execution when `allow-scripts` is omitted from the `sandbox` attribute. Also learned that Tailwind classes on the iframe element do not apply to the `srcDoc` content, requiring an inline `<style>` tag in the `srcDoc` itself.
+**Prevention:** For untrusted or dynamic HTML, prefer `<iframe srcDoc="..." sandbox="...">` over `dangerouslySetInnerHTML`.

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="min-h-[24rem] w-full overflow-hidden bg-white">
+              <iframe
+                title="Email Preview"
+                srcDoc={`<style>body { margin: 0; padding: 1.5rem; font-family: sans-serif; font-size: 0.875rem; color: black; background-color: white; }</style>${sanitizedEmailHtml}`}
+                sandbox="allow-popups allow-popups-to-escape-sandbox"
+                className="h-full min-h-[24rem] w-full border-none"
+              />
             </div>
           </div>
         </div>