TanStack / TanStack/devtools

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

Abierto
#522 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
TypeScript
Estrellas
499
Forks
100
Merge medio
1 d 17 h
PR fusionados (30 d)
4

Descripción

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.

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza en el recorrido del DOM del render logger y reproduce el problema con un cross-origin iframe, como el Spotify Web Playback SDK iframe, en un entorno de desarrollo de React 19. Sigue el SecurityError y el scheduler error posterior, y verifica después que los controlled inputs sigan haciendo commit tras montar el iframe. Se considera terminado cuando el cross-origin frame se omite de forma segura y el repro ya no interrumpe los input commits.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react, typescript
Área
devtools, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Activo
Claridad
Bastante claro
Aptitud para principiantes
68/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.