Render logger throws SecurityError on a cross-origin iframe, corrupting React's scheduler
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 68/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- react, typescript
Research direction
Start at the render logger's DOM traversal and reproduce the issue with a cross-origin iframe, such as the Spotify Web Playback SDK iframe, in a React 19 dev environment. Trace the SecurityError and the following scheduler error, then verify that controlled inputs still commit after the iframe is mounted. Done means the cross-origin frame is skipped safely and the repro no longer breaks input commits.
Written by the indexing model from the issue text.
Description
Summary
When a page mounts a cross-origin iframe, the devtools' render logger walks into it and throws a SecurityError. That leaves React's fiber scheduler in a bad state, and from then on controlled inputs stop committing anywhere on the page for the rest of that page load.
The visible symptom is not a devtools error — it's that typing into any <input> in the app silently does nothing. That makes it expensive to diagnose: the app looks fine, and the failure appears to be in whatever component you happen to be working on.
Versions
@tanstack/react-devtools0.10.7@tanstack/devtools-vite0.8.0- React 19, TanStack Start, Vite 8, dev mode only (devtools are
import.meta.env.DEV-gated)
Reproduction
- Mount
<TanStackDevtools>in the root route, gated onimport.meta.env.DEV. - Anywhere in the authenticated tree, mount a component that injects a cross-origin iframe. In our case it is the Spotify Web Playback SDK (
https://sdk.scdn.co/spotify-player.js), which creates its own iframe. - Load any page under that tree in dev.
- Type into any controlled input.
Observed console output, in order:
SecurityError: Failed to read a named property from 'Window': Blocked a frame with
origin "http://127.0.0.1:3939" from accessing a cross-origin frame.
then
Error: Should not already be working.
After the second error, controlled-input commits fail for the remainder of the page load — including inputs entirely unrelated to the iframe, such as a login form on a different route.
Workaround
Blocking the third-party script prevents the iframe from being created, and everything behaves normally:
await page.route('**sdk.scdn.co/**', (r) => r.abort())
Not mounting the iframe-owning component in dev also works. Both are avoidance rather than fixes.
Suggested fix
Guard the render logger's DOM traversal so a cross-origin frame is skipped rather than entered — accessing a frame's contentWindow properties should be wrapped, or iframe elements whose origin differs should be excluded from the walk. A third-party embed (payment, video, audio SDK, maps) is common enough that any app with one plus these devtools will hit this.
Happy to test a patch against the repro above.
- Dominant language
- TypeScript
- Stars
- 499
- Forks
- 100
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 4
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from TanStack/devtools
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 4/5 3-5 days Newbie friendliness 45/100
-
Difficulty 3/5 1-2 days Newbie friendliness 74/100
All issues in TanStack/devtools
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
copse-dev/agent-pane#2953 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#610 ·
-
bug clawsweeper:linked-pr-open clawsweeper:needs-live-repro clawsweeper:no-new-fix-pr impact:message-loss issue-rating: 🐚 platinum hermit P2 regression
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·