Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Render logger throws SecurityError on a cross-origin iframe, corrupting React's scheduler

Offen
  • Stimmt etwas nicht?
#522 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
68/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
devtools, frontend

Rechercherichtung

Beginne bei der DOM-Traversierung des render logger und reproduziere das Problem mit einem cross-origin iframe, beispielsweise dem Spotify Web Playback SDK iframe, in einer React 19-Entwicklungsumgebung. Verfolge den SecurityError und den darauf folgenden scheduler error und überprüfe anschließend, dass controlled inputs auch nach dem Mounten des iframes weiterhin committet werden. Als erledigt gilt die Aufgabe, wenn der cross-origin frame sicher übersprungen wird und der Repro keine input commits mehr unterbricht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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-devtools 0.10.7
  • @tanstack/devtools-vite 0.8.0
  • React 19, TanStack Start, Vite 8, dev mode only (devtools are import.meta.env.DEV-gated)

Reproduction

  1. Mount <TanStackDevtools> in the root route, gated on import.meta.env.DEV.
  2. 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.
  3. Load any page under that tree in dev.
  4. 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.

Vorherrschende Sprache
TypeScript
Sterne
500
Forks
100
Ø Merge
6 T. 4 Std.
Gemergte PRs (30 T.)
5

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/devtools

Alle Issues in TanStack/devtools

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.