feat(insights): iframe renderer #39767

mariusandra · 2025-10-16T10:46:19Z

Problem

Users would like to securely embed PostHog insights onto their websites, providing both the query and the response.

Changes

Adds "share as template with cached results" and "fetch latest results for shared template" to the sharing modal:

When used, the code just opens the insights:

How did you test this code?

Opened the shared insight in a modal. Tried with different insight types.

github-actions · 2025-10-16T10:51:09Z

Size Change: +132 B (0%)

Total Size: 3.06 MB

ℹ️ View Unchanged

Filename	Size	Change
`frontend/dist/toolbar.js`	3.06 MB	+132 B (0%)

_{compressed-size-action}

posthog-bot · 2025-10-16T15:27:08Z

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

chromium: 0 added, 4 modified, 0 deleted (diff for shard 16)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

…enderer

posthog-bot · 2025-10-16T16:18:06Z

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

chromium: 0 added, 4 modified, 0 deleted (diff for shard 16)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

…enderer

posthog-bot · 2025-10-16T19:22:45Z

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

chromium: 0 added, 4 modified, 0 deleted (diff for shard 16)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

…enderer

posthog-bot · 2025-10-16T19:52:53Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 16)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

graphite-app · 2025-10-16T20:00:02Z

frontend/src/render-query/RenderQueryApp.tsx

+        const handleMessage = (event: MessageEvent): void => {
+            const parsed = parsePayload(event.data, 'postMessage')
+            if (!hasParsedPayloadData(parsed)) {
+                return
+            }
+            setState((previous) => applyParsedPayload(previous, parsed))


The message event handler should validate the origin of incoming messages to prevent cross-site scripting attacks. Currently, any website could send messages to this iframe. Consider adding an origin check:

const handleMessage = (event: MessageEvent): void => { // Verify the message comes from an allowed origin if (event.origin !== targetOrigin) { return; } const parsed = parsePayload(event.data, 'postMessage') if (!hasParsedPayloadData(parsed)) { return } setState((previous) => applyParsedPayload(previous, parsed)) }

This is particularly important for iframes that will be embedded on third-party sites.

Spotted by Graphite Agent

Is this helpful? React 👍 or 👎 to let us know.

greptile-apps

_{20 files reviewed, 5 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2025-10-16T20:01:54Z

frontend/src/lib/components/Sharing/SharingModal.tsx

+    const escapedResults = escapeScriptJson(serializedResults)
+    const escapedQuery = escapeScriptJson(serializedQuery)
+
+    return `<iframe id="${iframeId}" src="${renderQueryUrl}" style="width: 100%; height: 600px; border: 0;" loading="lazy"></iframe>


logic: Potential XSS via unescaped iframeId attribute. The iframeId comes from insightShortId via getRenderQueryIframeId() which sanitizes with regex, but it's inserted directly into HTML. If the sanitization fails or is bypassed, this could allow attribute injection.

Suggested change

return `<iframe id="${iframeId}" src="${renderQueryUrl}" style="width: 100%; height: 600px; border: 0;" loading="lazy"></iframe>

return `<iframe id="${escapeHtmlAttribute(iframeId)}" src="${escapeHtmlAttribute(renderQueryUrl)}" style="width: 100%; height: 600px; border: 0;" loading="lazy"></iframe>

Prompt To Fix With AI

This is a comment left during a code review. Path: frontend/src/lib/components/Sharing/SharingModal.tsx Line: 471:471 Comment: **logic:** Potential XSS via unescaped `iframeId` attribute. The `iframeId` comes from `insightShortId` via `getRenderQueryIframeId()` which sanitizes with regex, but it's inserted directly into HTML. If the sanitization fails or is bypassed, this could allow attribute injection. ```suggestion return `<iframe id="${escapeHtmlAttribute(iframeId)}" src="${escapeHtmlAttribute(renderQueryUrl)}" style="width: 100%; height: 600px; border: 0;" loading="lazy"></iframe> ``` How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-10-16T20:01:55Z

frontend/src/lib/components/Sharing/SharingModal.tsx

+    return `<iframe id="${iframeId}" src="${renderQueryUrl}" style="width: 100%; height: 600px; border: 0;" loading="lazy"></iframe>
+<script>
+  (function () {
+    const iframe = document.getElementById('${iframeId}')


logic: Potential DOM-based XSS via unescaped iframeId in getElementById. While less critical since it's in a user-controlled snippet, the iframe ID should still be properly escaped to prevent breaking out of the string context.

Suggested change

const iframe = document.getElementById('${iframeId}')

const iframe = document.getElementById('${iframeId.replace(/'/g, "\\'")}')

Prompt To Fix With AI

This is a comment left during a code review. Path: frontend/src/lib/components/Sharing/SharingModal.tsx Line: 474:474 Comment: **logic:** Potential DOM-based XSS via unescaped `iframeId` in `getElementById`. While less critical since it's in a user-controlled snippet, the iframe ID should still be properly escaped to prevent breaking out of the string context. ```suggestion const iframe = document.getElementById('${iframeId.replace(/'/g, "\\'")}') ``` How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-10-16T20:01:55Z

posthog/views.py

+@xframe_options_exempt
+def render_query(request: HttpRequest) -> HttpResponse:
+    """Render a lightweight container for third parties to display PostHog visualizations."""
+    from posthog.api.sharing import get_global_themes
+
+    payload = {"query": None, "cachedResults": None, "context": None, "insight": None, "themes": get_global_themes()}
+    return render_template("render_query.html", request, context={"render_query_payload": payload})


logic: Missing authentication check for render_query endpoint. This public endpoint returns global themes without any authentication. While it's intentionally public (due to @xframe_options_exempt), the lack of rate limiting or any access control could be abused.

Consider adding rate limiting or at minimum, documenting why this endpoint is intentionally public and unauthenticated.

Prompt To Fix With AI

This is a comment left during a code review. Path: posthog/views.py Line: 143:149 Comment: **logic:** Missing authentication check for `render_query` endpoint. This public endpoint returns global themes without any authentication. While it's intentionally public (due to `@xframe_options_exempt`), the lack of rate limiting or any access control could be abused. Consider adding rate limiting or at minimum, documenting why this endpoint is intentionally public and unauthenticated. How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-10-16T20:01:56Z

frontend/src/lib/components/Sharing/SharingModal.tsx

+                            templateLink={apiQuerySnippet}
+                            heading="Fetch latest results for shared template"
+                            piiWarning="Use this snippet to call the Query API directly and retrieve the freshest results for this insight."


style: Misleading heading and tooltip. The heading says "Fetch latest results" but the tooltip says "shares the full insight query" - this section doesn't actually fetch results, it only provides code to call the API. The piiWarning is also labeled as describing what the snippet does, not what to be aware of.

Suggested change

templateLink={apiQuerySnippet}

heading="Fetch latest results for shared template"

piiWarning="Use this snippet to call the Query API directly and retrieve the freshest results for this insight."

heading="Call Query API to fetch latest results"

tooltip="Use this snippet to call the Query API directly and retrieve the freshest results for this insight."

piiWarning="This request shares the full insight query, including filters and properties. Review it before sharing."

Prompt To Fix With AI

This is a comment left during a code review. Path: frontend/src/lib/components/Sharing/SharingModal.tsx Line: 435:437 Comment: **style:** Misleading heading and tooltip. The heading says "Fetch latest results" but the tooltip says "shares the full insight query" - this section doesn't actually fetch results, it only provides code to call the API. The `piiWarning` is also labeled as describing what the snippet does, not what to be aware of. ```suggestion heading="Call Query API to fetch latest results" tooltip="Use this snippet to call the Query API directly and retrieve the freshest results for this insight." piiWarning="This request shares the full insight query, including filters and properties. Review it before sharing." ``` How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-10-16T20:01:57Z

frontend/src/scenes/dataThemeLogic.tsx

+                // use the posthog theme unless someone set a specific theme for the team
+                const environmentTheme = themes.find(
+                    (theme) => !currentTeam || theme.id === currentTeam.default_data_theme
+                )


logic: Logic error in theme selection. The condition !currentTeam || theme.id === currentTeam.default_data_theme will match the first theme when currentTeam is null/undefined, regardless of whether it's the correct theme. This doesn't match the original logic which specifically looked for a team's default theme.

Suggested change

// use the posthog theme unless someone set a specific theme for the team

const environmentTheme = themes.find(

(theme) => !currentTeam || theme.id === currentTeam.default_data_theme

)

const environmentTheme = currentTeam

? themes.find((theme) => theme.id === currentTeam.default_data_theme)

: null

Prompt To Fix With AI

This is a comment left during a code review. Path: frontend/src/scenes/dataThemeLogic.tsx Line: 68:71 Comment: **logic:** Logic error in theme selection. The condition `!currentTeam || theme.id === currentTeam.default_data_theme` will match the first theme when `currentTeam` is null/undefined, regardless of whether it's the correct theme. This doesn't match the original logic which specifically looked for a team's default theme. ```suggestion const environmentTheme = currentTeam ? themes.find((theme) => theme.id === currentTeam.default_data_theme) : null ``` How can I resolve this? If you propose a fix, please make it concise.

aspicer · 2025-10-16T21:48:56Z

This code looks good and tested working. Actually think you fixed an issue with exporter.html so that's nice.

My only issue is with the wording of the stuff in the share modal.

The two sections aren't really connected in concept.

The first one I might call
"Share as unsaved insight"
Share a link to an unsaved copy of this insight.

As for "Share as template with cached results" I might want to call it "Static embed with pre-computed data" and have the description say something like "IFrame that embeds this insight with the current data."

Let me know if you have other thoughts!

graphite-app · 2025-10-16T23:44:43Z

frontend/src/scenes/dataThemeLogic.tsx

+                const environmentTheme = themes.find(
+                    (theme) => !currentTeam || theme.id === currentTeam.default_data_theme
+                )


Logic Bug: Incorrect theme selection when currentTeam is null

The find predicate (theme) => !currentTeam || theme.id === currentTeam.default_data_theme will return the first theme in the array when currentTeam is null, instead of falling back to posthogTheme. Since !currentTeam evaluates to true, the predicate returns true for every theme, causing find() to return the first one.

const environmentTheme = currentTeam ? themes.find((theme) => theme.id === currentTeam.default_data_theme) : null

This ensures that when there's no team (render_query case), it falls through to use posthogTheme as intended.

Suggested change

const environmentTheme = themes.find(

(theme) => !currentTeam || theme.id === currentTeam.default_data_theme

)

const environmentTheme = currentTeam

? themes.find((theme) => theme.id === currentTeam.default_data_theme)

: null

Spotted by Graphite Agent

Is this helpful? React 👍 or 👎 to let us know.

This comment came from an experimental review—please leave feedback if it was helpful/unhelpful. Learn more about experimental comments here.

posthog-bot · 2025-10-16T23:48:49Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 16)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

feat(insights): iframe renderer

0017256

mariusandra and others added 4 commits October 16, 2025 16:49

cleanup

134606f

themes

2692d5b

sharing modal

febb12b

Update UI snapshots for chromium (16)

fbec622

mariusandra and others added 4 commits October 16, 2025 18:04

share template

413e486

height

8009bca

Merge remote-tracking branch 'origin/insight-renderer' into insight-r…

bcf79d2

…enderer

Update UI snapshots for chromium (16)

707473c

mariusandra and others added 4 commits October 16, 2025 21:12

update modal

bed262a

cleanup

000dc9d

Merge remote-tracking branch 'origin/insight-renderer' into insight-r…

a1dfc5e

…enderer

Update UI snapshots for chromium (16)

f2f438c

mariusandra and others added 8 commits October 16, 2025 21:24

small tweaks

76a9f15

modal

6f5b658

pii

3b906e6

link

6ca9948

Merge remote-tracking branch 'origin/insight-renderer' into insight-r…

c3f67c5

…enderer

more

877d2a4

test

b515f07

Update UI snapshots for chromium (16)

313578a

Merge branch 'master' into insight-renderer

de5c28f

mariusandra marked this pull request as ready for review October 16, 2025 19:57

mariusandra requested review from aspicer and raquelmsmith October 16, 2025 19:57

graphite-app bot reviewed Oct 16, 2025

View reviewed changes

greptile-apps bot reviewed Oct 16, 2025

View reviewed changes

aspicer approved these changes Oct 16, 2025

View reviewed changes

mmm bop

4a50c93

aspicer enabled auto-merge (squash) October 16, 2025 23:41

graphite-app bot reviewed Oct 16, 2025

View reviewed changes

Update UI snapshots for chromium (16)

efc8f97

	return `<iframe id="${iframeId}" src="${renderQueryUrl}" style="width: 100%; height: 600px; border: 0;" loading="lazy"></iframe>
	return `<iframe id="${escapeHtmlAttribute(iframeId)}" src="${escapeHtmlAttribute(renderQueryUrl)}" style="width: 100%; height: 600px; border: 0;" loading="lazy"></iframe>

	const iframe = document.getElementById('${iframeId}')
	const iframe = document.getElementById('${iframeId.replace(/'/g, "\\'")}')

feat(insights): iframe renderer #39767

Are you sure you want to change the base?

feat(insights): iframe renderer #39767

Conversation

mariusandra commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Changes

How did you test this code?

Uh oh!

github-actions bot commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

posthog-bot commented Oct 16, 2025

📸 UI snapshots have been updated

Uh oh!

posthog-bot commented Oct 16, 2025

📸 UI snapshots have been updated

Uh oh!

posthog-bot commented Oct 16, 2025

📸 UI snapshots have been updated

Uh oh!

posthog-bot commented Oct 16, 2025

📸 UI snapshots have been updated

Uh oh!

graphite-app bot Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

aspicer commented Oct 16, 2025

Uh oh!

graphite-app bot Oct 16, 2025

Choose a reason for hiding this comment

This comment came from an experimental review—please leave feedback if it was helpful/unhelpful. Learn more about experimental comments here.

Uh oh!

posthog-bot commented Oct 16, 2025

📸 UI snapshots have been updated

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mariusandra commented Oct 16, 2025 •

edited

Loading

github-actions bot commented Oct 16, 2025 •

edited

Loading