ref(debug): Render the email preview in a sandboxed iframe - #122356
Open
oioki wants to merge 3 commits into
Open
ref(debug): Render the email preview in a sandboxed iframe#122356oioki wants to merge 3 commits into
oioki wants to merge 3 commits into
Conversation
oioki
force-pushed
the
oioki/ref/email-preview-iframe
branch
from
August 25, 2026 16:04
fe1b66a to
e5d5461
Compare
oioki
marked this pull request as ready for review
August 25, 2026 16:13
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit e5d5461. Configure here.
html_content is a whole HTML document. Splicing it into a div discarded everything outside <body>, including the viewport meta the email's own media query depends on, while the one <style> the inliner leaves behind applied to the debug page itself and pulled in a webfont. The reverse leaked too: the email uses generic class names like .btn and .container, which Sentry's own stylesheets also define, so app CSS filled in wherever the email had not set an inline style. The preview was showing something no mail client would render. Render it in an iframe instead, sanitized with WHOLE_DOCUMENT so the shell survives. The frame is sandboxed without allow-scripts, so the document is inert; allow-same-origin is only there to read scrollHeight for sizing. Also corrects html_content's type. It was declared TrustedHTML, but the endpoint serializes a plain string. Co-Authored-By: Claude <noreply@anthropic.com>
oioki
force-pushed
the
oioki/ref/email-preview-iframe
branch
from
August 25, 2026 16:28
e5d5461 to
ba73d97
Compare
Address review feedback: attach the iframe load handler with addEventListener and remove it on cleanup, and guard against the load event firing after unmount so a late ResizeObserver isn't created on a detached node.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

The email preview rendered a whole HTML document inline via
dangerouslySetInnerHTML, so the app's CSS and the email's leaked into each other — the app's fonts bled into the email, and the email's styles bled onto the debug page. The result didn't match what any mail client would show.Render it in a sandboxed iframe instead, so the email is isolated as its own document. Sanitized with DOMPurify (
WHOLE_DOCUMENT: true);sandboxwithoutallow-scriptskeeps it inert.Also removes the
dangerouslySetInnerHTMLsink and correctshtml_content's type (it's a plain string, notTrustedHTML).The old inline render let the app's CSS leak into the email (hence the Rubik heading); the iframe isolates it, so it now renders in the email's own fonts — much closer to how it'd actually look in an inbox, see:
Before (Rubik)
https://sentry.sentry.io/debug/notifications/activity-set-regression/
After
How it actually looks in the email client (similar font to After)