Skip to content

[Bug]: loading storybook in an iframe throws an error #31791

Open
@shannonmoeller

Description

@shannonmoeller

Describe the bug

When loading Storybook in an iframe, including the StackBlitz preview pane as well as composed storybook instances, there is either no content or an error message. The error appears to be related to accessing window.navigator across domains.

As far as I can tell this started happening from 9.0.8 onwards. 9.0.5 was known to be working. Given both this issue and #31650, it would be nice to see some end-to-end tests created to catch issues like this.

Reproduction link

https://stackblitz.com/edit/github-kag56wwd

Reproduction steps

  1. Open parent storybook (https://stackblitz.com/edit/github-kag56wwd)
  2. Observe white blank page.
  3. Open child storybook (https://stackblitz.com/edit/github-rr9tk7hc)
  4. Observe white blank page.

System

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^9.1.0-alpha.5 => 9.1.0-alpha.6 
    @storybook/addon-onboarding: ^9.1.0-alpha.5 => 9.1.0-alpha.6 
    @storybook/react-vite: ^9.1.0-alpha.5 => 9.1.0-alpha.6 
    storybook: ^9.1.0-alpha.5 => 9.1.0-alpha.6

Additional context

Error message:

globals-runtime.js:15020 Uncaught SecurityError: Failed to read a named property 'navigator' from 'Window': Blocked a frame with origin "https://githubkag56wwd-fwip-stw1j59r--6006--2e6e5e13.local-credentialless.webcontainer.io" from accessing a cross-origin frame.
    at globals-runtime.js:15020:12
    at globals-runtime.js:13:36
    at globals-runtime.js:37597:1

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions