Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught DOMException: Blocked a frame with origin "http://localhost:9009" from accessing a cross-origin frame. #7215

Closed
kon-rad opened this issue Jun 27, 2019 · 48 comments

Comments

@kon-rad
Copy link

kon-rad commented Jun 27, 2019

Describe the bug
After updated storybook 3 to 5 the 'actions addon' throws CORS error when an action is performed. Figured out that setting the 'depth' option to 2 or less is a work around and no error appears. Posting bug report hoping any better solution may be found.

To Reproduce
Steps to reproduce the behavior:

  1. Initiate any action on storybook 5. CORS error appears in console.

Expected behavior
Actions should be performed.

Screenshots
N/A

Code snippets
I traced the bug to the following line:

      var data = (0, _telejson.stringify)({
        key: KEY,
        event: event
      }, {
        maxDepth: depth
      }); // TODO: investigate http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
      // might replace '*' with document.location ?

      iframeWindow.postMessage(data, '*');
      return Promise.resolve(null);

This configuration fixes the issue. But it would be great to have this resolved and allow for display of action with greater depth of the object.

configureActions({
  depth: 2 // anything higher than 2 causes CORS error in iframe postMessage method
});

System:

  • OS: MacOS
  • Device: Macbook Pro 2018
  • Browser: chrome
  • Framework: react
  • Addons: actions
  • Version: 5.1.9

Additional context
This happened after upgrading from 3 to 5. Default webpack config is used. Babel was also upgraded to 7.

@shilman shilman added this to the 5.1.x milestone Jun 27, 2019
@stale stale bot added the inactive label Jul 18, 2019
@stale stale bot closed this as completed Aug 17, 2019
@dancrumb
Copy link

This is still not resolved; should we re-open this or open a new issue?

@shilman shilman reopened this Oct 26, 2019
@stale stale bot removed the inactive label Oct 26, 2019
@StJohn3D
Copy link

StJohn3D commented Nov 11, 2019

Clicked actions like in the documentation are working in Chrome but not in firefox.
Currently seeing this DOMException in FireFox
SecurityError: Permission denied to access property "toJSON" on cross-origin object

<Button  onClick={action("clicked")}  disabled={boolean('disabled', false)}>
  {text("Children (text)", "Hello World")}
</Button>

Click the button above logs the event details in chrome but not in FireFox.

@shilman shilman modified the milestones: 5.1.x, 5.2.x Nov 11, 2019
@storybookjs storybookjs deleted a comment from stale bot Nov 13, 2019
@storybookjs storybookjs deleted a comment from stale bot Nov 13, 2019
ndelangen added a commit to storybookjs/telejson that referenced this issue Nov 25, 2019
@ndelangen
Copy link
Member

I opened a fix PR in telejson!

@shilman
Copy link
Member

shilman commented Nov 26, 2019

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-beta.8 containing PR #8940 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed Nov 26, 2019
@zeorin
Copy link

zeorin commented Jan 28, 2020

v5.3.0-beta.8 still has the Firefox bug for me. Version v5.3.9 also has the bug.
Version v6.0.0-alpha.1 also has the bug.

@ndelangen
Copy link
Member

@zeorin could you check to see if the telejson dependency is actually updated in node_modules after installing?

@sgtdck
Copy link

sgtdck commented Jan 30, 2020

@ndelangen it is for me:

npm ls telejson
[email protected] /Users/dick/Workspace/planner
└─┬ @storybook/[email protected]
  ├─┬ @storybook/[email protected]
  │ └─┬ @storybook/[email protected]
  │   └── [email protected] 
  └─┬ @storybook/[email protected]
    ├─┬ @storybook/[email protected]
    │ └── [email protected]  deduped
    └─┬ @storybook/[email protected]
      └── [email protected]  deduped

@ndelangen
Copy link
Member

Thank you for checking.

Will put this back on my todo list

@ndelangen ndelangen reopened this Jan 30, 2020
@itsderek23
Copy link

Head slap! Yes - that is it. For clarity, this works just fine:

 npx http-server storybook-static/

@silouanwright
Copy link

@shilman is that known? I ask because that was not always the case before v6, you could easily build an instance, compress it and share it with others. I feel like it's possible that a lot of people in this thread are running into this because it's not being run on a local server for whatever reason.

@shilman
Copy link
Member

shilman commented Nov 19, 2020

@reywright This issue is still open, isn't it? 😉 I think we were looking for a repro and the repro is to open built storybook from a file URL @ndelangen

@anicholls
Copy link

anicholls commented Nov 26, 2020

I am also seeing this when trying to use Storybook Composition. It works fine within the original storybook, but I get the same error (Uncaught DOMException: Blocked a frame with origin from accessing a cross-origin frame.) at the same line whenever trying to load a story from the lower level "composed" storybook in the higher level "composing" storybook. Both storybook instances on 6.1.5, using basically stock webpack configs. If you'd like to verify/reproduce, here is a link to our Chromatic permalink. Anyone should be able to add this as a composed story and see the issue.

Anyone have ideas for a solution or workaround?


EDIT: After further research I've tracked it down to a few specific stories. This error appears when storybook tries to serialize a window object from the "composed" storybook. Now why that is happening in my use case is another story. There seems to be a bug in the docs addon (docgen). For a select few of our stories using components that use Popper.js, the docgen is interpreting a default value as the window object for Popper's placement prop (even though it is typed and assigned as 'top', not window). Still trying to track down why that is happening. Disabling the docs addon resolves the issue.

@webholics
Copy link

I'm also having this issue. Our current workaround which worked is to disable the actions addon.

@Blizard
Copy link

Blizard commented Jan 11, 2021

As @anicholls mentioned edit. Same for me. I fixed this issue when i disabled docs addon all stories.

@anicholls
Copy link

anicholls commented Jan 11, 2021

Another update: I think I've tracked down the problem with the Docs addon and I've opened a separate issue for it here: #13608.

Unfortunately the args (and their defaults) are extracted for all stories regardless of which ones have docs disabled so the only option to get composition to work is to disable the docs addon entirely.

@shilman shilman modified the milestones: 6.2 essentials, 6.2 candidates Mar 4, 2021
@garyhlai
Copy link

I solved this by opening storybook in an incognito window. It's possible that Chrome plugins are messing with the browser.

@shilman shilman removed this from the 6.2 candidates milestone Mar 11, 2021
@ndelangen
Copy link
Member

I think we can close this issue now, #13608 was the fix.

@abbudao
Copy link

abbudao commented Mar 27, 2021

I believe I'm having this same issue on 6.2.0-rc.10. The problem is unique to Firefox (tested on 87, incognito off and on), as all examples worked just fine on Chromium 89.
Screenshot-2021-03-27T05:13:19-03:00
Repro:

  1. Create a fresh project with Create React App and Storybook CLI :
npx create-react-app bug-repro --template typescript && cd bug-repro && npx sb init && sed -i 's/"^6.1.*"/"6.2.0-rc.10"/' package.json && sed -i 's/"typescript": ".*"/"typescript": "4.1.2"/' package.json &&  yarn && yarn run storybook
  1. Open Firefox and click on Header > Logged In component
  2. Click on the Log out button

Let me know if I can be of any help 😉

@nickofthyme
Copy link

nickofthyme commented Jul 29, 2021

I am still seeing this issue having a similar case to @itsderek23.

I recently upgrade storybook from ^5.3.19 to ^6.3.4 with no major changes to our component src code.

What works?

  • Running storybook via storybook-start
  • Building storybook via storybook-build and hosting the build via npx http-server <output>

What does NOT work (i.e. storybook page not rendered)?

  • Opening the output index.html in Chrome directly from file path, also not working in incognito. This worked in 5.3.19
  • Building and deploying storybook to gh-pages. This worked in 5.3.19

Both cases above throw the following errors in the console.

vendors~main.a4359a8c7927629868c8.manager.bundle.js:2 DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
    at file:///Users/elon/storybook-output/main.241a4736bb305c4597a6.manager.bundle.js:1:13628
    at Ii (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1615635)
    at Vj (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1634368)
    at exports.unstable_runWithPriority (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1652922)
    at cg (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1577591)
    at Dj (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1634130)
    at yj (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1625989)
    at file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1577882
    at exports.unstable_runWithPriority (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1652922)
    at cg (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1577591)
Ci @ vendors~main.a4359a8c7927629868c8.manager.bundle.js:2
vendors~main.a4359a8c7927629868c8.manager.bundle.js:2 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
    at file:///Users/elon/storybook-output/main.241a4736bb305c4597a6.manager.bundle.js:1:13628
    at Ii (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1615635)
    at Vj (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1634368)
    at exports.unstable_runWithPriority (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1652922)
    at cg (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1577591)
    at Dj (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1634130)
    at yj (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1625989)
    at file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1577882
    at exports.unstable_runWithPriority (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1652922)
    at cg (file:///Users/elon/storybook-output/vendors~main.a4359a8c7927629868c8.manager.bundle.js:2:1577591)
vendors~main.a4359a8c7927629868c8.manager.bundle.js:2  manager  received storybookjs/knobs/set-options but was unable to determine the source of the event
error @ vendors~main.a4359a8c7927629868c8.manager.bundle.js:2
vendors~main.a4359a8c7927629868c8.manager.bundle.js:2  manager  received storyRendered

I also have the docs addon disabled so I'm not sure how #7215 (comment) is the fix to this issue.

Am I missing something here?

@markov00
Copy link

I'd also like to link a similar case here with GitHub Pages storybook-eol/storybook-deployer#97

@nickofthyme
Copy link

After removing storybook-addon-themes accessing via output/index.html works fine.

@b0o
Copy link

b0o commented Nov 16, 2021

I was having this issue and it turned out one of my Firefox extensions (Surfingkeys) was triggering it to happen. The question is why does this happen?

@nickofthyme
Copy link

In the case of storybook-addon-themes, they are attempting to access the story preview iframe via it's id ('storybook-preview-iframe'). They do this to pass styles to be set on elements within the iframe but a better way is to use globals to pass the context down. Doing this causes no issues when run on a local http server but DOES throw the above error when accessing the statically built site.

I'm not sure if this is the same cause for Surfingkeys.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests