Core: Disable interactions debugger on composed stories to avoid cross-origin error #31685

ghengeveld · 2025-06-06T09:00:22Z

What I did

Gracefully handle cross-origin errors when accessing a composed Storybook with interactions, by catching the error and disabling debugger controls.

The instrumenter attempts to retain its state when reloading the preview iframe by storing its state on the parent window. This is not allowed on composed Storybooks due to the same-origin policy. In most cases this is not a problem because the iframe will only be reloaded if the story can't be remounted within 3 'ticks' (see StoryRender.teardown()). If this scenario does happen, the instrumenter will lose its state. This is an edge case we can't easily resolve, because the state we're trying to preserve relies on object references and therefore can't be serialized (e.g. for sessionStorage or postMessage/channel).

Because we cannot predict when the iframe needs a full reload, I've decided to assume the worst and disable the debugger controls for composed Storybooks altogether.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Fixes cross-origin security issues in Storybook's interactions panel when accessing composed stories by gracefully handling parent window state access restrictions.

Added safe window state access methods in code/core/src/instrumenter/instrumenter.ts to handle cross-origin limitations
Modified Window interface in code/core/src/instrumenter/typings.d.ts to properly declare global state variables
Implements fallback to local-only state when cross-origin access fails, maintaining forward-only debugging capability
Gracefully handles cases where iframe reloads occur in composed stories
Preserves interaction functionality while limiting some debugging features (like backwards stepping) in cross-origin scenarios

greptile-apps

_{2 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

code/core/src/instrumenter/typings.d.ts

nx-cloud · 2025-06-06T09:06:51Z

View your CI Pipeline Execution ↗ for commit fd2e026.

Command	Status	Duration	Result
`nx run-many -t check -c production --parallel=7`	✅ Succeeded	1s	View ↗
`nx run-many -t build -c production --parallel=3`	✅ Succeeded	2s	View ↗

☁️ Nx Cloud last updated this comment at 2025-06-07 07:22:28 UTC

…load

…ctions

storybook-app-bot · 2025-06-06T12:53:22Z

Package Benchmarks

^{Commit: fd2e026, ran on 7 June 2025 at 07:28:08 UTC}

The following packages have significant changes to their size or dependencies:

`storybook`

	Before	After	Difference
Dependency count	49	49	0
Self size	31.40 MB	31.38 MB	🎉 -22 KB 🎉
Dependency size	17.41 MB	17.41 MB	0 B
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	50	50	0
Self size	1 KB	1 KB	0 B
Dependency size	48.81 MB	48.79 MB	🎉 -22 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	324	324	0
Self size	244 KB	244 KB	0 B
Dependency size	97.79 MB	97.81 MB	🚨 +18 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	267	267	0
Self size	31 KB	31 KB	0 B
Dependency size	82.19 MB	82.21 MB	🚨 +22 KB 🚨
Bundle Size Analyzer	Link	Link

shannonmoeller · 2025-06-10T19:59:18Z

Why disable it instead of fixing it? The data could be passed from the child to the parent with window.postMessage(message, '*'). Storybook could even be extended to allow configuration of the parent/child origin relationships to make it more secure than just '*'.

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

shannonmoeller · 2025-06-10T20:01:43Z

code/core/src/instrumenter/instrumenter.ts


+  loadParentWindowState = () => {
+    try {
+      this.state = global.window?.parent?.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ || {};


This should be changed to use window.postMessage() to enable safe cross-origin communication.

shannonmoeller · 2025-06-10T20:06:53Z

I have done similar things to fix issues syncing toolbar state across composed storybook instances. I have this in the preview.tsx file of the parent instance of my component library:

// Propagates global updates to composed storybook instances
window.addEventListener('message', (event)  => {
  const message = JSON.parse(event.data?.trim?.() || '{}');

  if (message.key !== 'storybook-channel') return;
  if (message.event?.type !== 'updateGlobals') return;

  window.top?.document.querySelectorAll('iframe').forEach((iframe) => {
    if (iframe.contentWindow === window) return;

    iframe.contentWindow?.postMessage(event.data, '*');
  });
});

ghengeveld · 2025-06-11T07:15:19Z

@shannonmoeller Unfortunately we can't use postMessage because as far as I know, its serialization method will lose object references. Instrumenter state contains a property callRefsByResult which is a Map<any, CallRef> where the key is the return value of an instrumented function call. This can be anything, including a DOM node reference or other non-serializable data. If this data would get serialized, we'd lose the reference to the original object (e.g. DOM node). callRefsByResult is required in order to track values back to their originating call. We might be able to work around it by rearchitecting how retained state works (i.e. the rows that you see below the current "breakpoint" line when debugging), but that's a much bigger lift.

ndelangen · 2025-06-11T14:06:15Z

code/core/src/instrumenter/instrumenter.test.ts

+        get __STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__() {
+          throw new Error('Blocked');
+        },
+        set __STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__(_: unknown) {},


Long term, would be great to stop having to do this somehow.

Accessing global.window.parent should never be done.
Surely this can be done using the channel?

Till then this looks like an improvement to me.

…tions-state Core: Disable interactions debugger on composed stories to avoid cross-origin error (cherry picked from commit 909f244)

Prevent error when accessing composed story with interactions

8ba943f

ghengeveld added bug ci:normal labels Jun 6, 2025

greptile-apps bot reviewed Jun 6, 2025

View reviewed changes

code/core/src/instrumenter/typings.d.ts Outdated Show resolved Hide resolved

Disable interaction controls when parent instrumenter state fails to …

7c7a58a

…load

ghengeveld changed the title ~~Core: Prevent cross-origin error when accessing composed story with interactions~~ Core: Disable interactions debugger on composed stories to avoid cross-origin error Jun 6, 2025

ghengeveld added 2 commits June 6, 2025 14:37

Show warning in interactions panel when viewing composed story intera…

bdad370

…ctions

Remove duplicate declaration

fd2e026

ghengeveld requested review from ndelangen and valentinpalkovic June 6, 2025 13:25

ghengeveld added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Jun 7, 2025

shannonmoeller reviewed Jun 10, 2025

View reviewed changes

ndelangen approved these changes Jun 11, 2025

View reviewed changes

ghengeveld merged commit 909f244 into next Jun 11, 2025
61 checks passed

ghengeveld deleted the handle-cross-origin-interations-state branch June 11, 2025 20:24

This was referenced Jun 11, 2025

Release: Patch 9.0.9 #31738

Merged

Release: Prerelease 9.1.0-alpha.7 #31748

Merged

JReinhold pushed a commit that referenced this pull request Jun 12, 2025

Merge pull request #31685 from storybookjs/handle-cross-origin-intera…

b662427

…tions-state Core: Disable interactions debugger on composed stories to avoid cross-origin error (cherry picked from commit 909f244)

github-actions bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Jun 12, 2025

github-actions bot mentioned this pull request Aug 13, 2025

[master] Michijs Dependabot changes michijs/michijs-storybook-template#68

Closed

ndelangen removed the patch:yes Bugfix & documentation PR that need to be picked to main branch label Oct 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Core: Disable interactions debugger on composed stories to avoid cross-origin error #31685

Core: Disable interactions debugger on composed stories to avoid cross-origin error #31685

Uh oh!

ghengeveld commented Jun 6, 2025 •

edited

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

Uh oh!

nx-cloud bot commented Jun 6, 2025 •

edited

Loading

Uh oh!

storybook-app-bot bot commented Jun 6, 2025 •

edited

Loading

Uh oh!

shannonmoeller commented Jun 10, 2025 •

edited

Loading

Uh oh!

shannonmoeller Jun 10, 2025

Uh oh!

shannonmoeller commented Jun 10, 2025 •

edited

Loading

Uh oh!

ghengeveld commented Jun 11, 2025 •

edited

Loading

Uh oh!

ndelangen Jun 11, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Core: Disable interactions debugger on composed stories to avoid cross-origin error #31685

Core: Disable interactions debugger on composed stories to avoid cross-origin error #31685

Uh oh!

Conversation

ghengeveld commented Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nx-cloud bot commented Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

storybook-app-bot bot commented Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

storybook

sb

@storybook/cli

@storybook/codemod

Uh oh!

shannonmoeller commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shannonmoeller Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

shannonmoeller commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ghengeveld commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ndelangen Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ghengeveld commented Jun 6, 2025 •

edited

Loading

nx-cloud bot commented Jun 6, 2025 •

edited

Loading

storybook-app-bot bot commented Jun 6, 2025 •

edited

Loading

`storybook`

`sb`

`@storybook/cli`

`@storybook/codemod`

shannonmoeller commented Jun 10, 2025 •

edited

Loading

shannonmoeller commented Jun 10, 2025 •

edited

Loading

ghengeveld commented Jun 11, 2025 •

edited

Loading