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

[kon-rad]

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.

[dancrumb]

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

[StJohn3D]

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.

[ndelangen]

I opened a fix PR in telejson!

[shilman]

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.

[zeorin]

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]

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

[sgtdck]

@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]

Thank you for checking.

Will put this back on my todo list

[ndelangen]

Could you please upgrade to the latest version and tell me if this is still a problem, and if it is give me a reproduction repo? 👏

[StJohn3D]

@ndelangen this looks related to my issue #8768 which already includes steps to reproduce.

[estevaolucas]

I some the same issue happening for me, on my server (locally it was fine), but I didn't need to update the storybook to fix it.

It was just a matter of setting the appropriate Content Security Policy header, changing X-Frame-Options: "DENY" to X-Frame-Options: "SAMEORIGIN".

[ndelangen]

@StJohn3D I think all of the core addons have stopped doing this in 6.0.0 beta

[sami616]

Im seeing this issue with the SB6 rc

[rey-wright]

I'm seeing this issue as well.

[rey-wright]

One important note of context for me: I'm trying to access the storybook production build directly by opening the index.html file. ^5.3.19 is the last version I tested where I was very easily able to do this. Any versions thereafter I've sort of had issues and get this cross-origin issue. If I run a server and load storybook, it works. Ideally storybook works "statically" without a server as well, but in any case this is how I'm triggering this issue. I don't know if this is the same ticket or another ticket but I'm happy to create an additional issue if it is.

[michaelbayday]

I am also seeing this issue right now with 6.0.2

[ndelangen]

@michaelbayday could you supply a reproduction repo perhaps?

[michaelbayday]

Let me see if I can get a boiler plate going or what I have in my repo

[hinok]

Edit

This issue doesn't occur always, soooo strange so please be sure to check it several times.

---

I have the same problem locally.
I created a codesandbox that demonstrates this problem:

CodeSandbox
https://codesandbox.io/s/mystifying-mendeleev-zoxtz?file=/src/stories/button.story.tsx

Fullscreen
https://zoxtz.sse.codesandbox.io/?path=/story/button--button-story

Reported error after clicking on button

Uncaught DOMException: Blocked a frame with origin "https://zoxtz.sse.codesandbox.io" from accessing a cross-origin frame.
    at JSON.stringify (<anonymous>)
    at stringify (https://zoxtz.sse.codesandbox.io/vendors~main.b4ad10535b4fddcf135c.bundle.js:69661:15)
    at PostmsgTransport.send (https://zoxtz.sse.codesandbox.io/vendors~main.b4ad10535b4fddcf135c.bundle.js:2172:42)
    at handler (https://zoxtz.sse.codesandbox.io/vendors~main.b4ad10535b4fddcf135c.bundle.js:2505:28)
    at Channel.emit (https://zoxtz.sse.codesandbox.io/vendors~main.b4ad10535b4fddcf135c.bundle.js:2515:9)
    at actionHandler (https://zoxtz.sse.codesandbox.io/vendors~main.b4ad10535b4fddcf135c.bundle.js:512:13)
    at HTMLUnknownElement.callCallback (https://zoxtz.sse.codesandbox.io/vendors~main.b4ad10535b4fddcf135c.bundle.js:36255:14)
    at Object.invokeGuardedCallbackDev (https://zoxtz.sse.codesandbox.io/vendors~main.b4ad10535b4fddcf135c.bundle.js:36304:16)
    at invokeGuardedCallback (https://zoxtz.sse.codesandbox.io/vendors~main.b4ad10535b4fddcf135c.bundle.js:36359:31)
    at invokeGuardedCallbackAndCatchFirstError (https://zoxtz.sse.codesandbox.io/vendors~main.b4ad10535b4fddcf135c.bundle.js:36373:25)

[ndelangen]

confirmed.. It seems the stringification of the event fails

[inspiratweb]

Same problem here in 6.0.21

[brycesnyder]

I'm getting this when attempting to build my local by running yarn build-storybook and then opening the index.html within the storybook-static repo... Just upgraded to 6.0.21

[sami616]

Is this issue related to sb core or a specific add on?

[michaelbayday]

are others using JSON.stringify in their stories?

On Sep 9, 2020, at 10:53 PM, Sami Resua [e-mail] wrote:


Is this issue related to sb core or a specific add on?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[sami616]

are others using JSON.stringify in their stories?
…
On Sep 9, 2020, at 10:53 PM, Sami Resua @.*> wrote:  Is this issue related to sb core or a specific add on? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Not me.

[ldeveber]

I'm seeing this in 6.0.26. In my case, once I delete my one .mdx story, it builds and works fine. When I have a mix of js and mdx stories is when I see this error. I should also note that running yarn storybook works fine, its just when building the docs I see this error.

[asherccohen]

Hi everyone. Is this an issue in [email protected]? I am getting cors errors fetching stories.json.
I am serving storybook instances locally (npx serve) and I cannot get my main Storybook to fetch stories from other instances running.

[ndelangen]

Does npx serve serve with CORS headers enabled?

[shilman]

Can you try npx http-server? we've had problems with serve

[ndelangen]

I'm trying to reproduce this error again with the repro on codesandbox by @hinok

But I'm able to use that link now, where before I was indeed seeing the problem, it seems to work now:

[hinok]

@ndelangen I checked it and it still throws the error 😞

[itsderek23]

I'm seeing this with the Storybook Design System when trying to access index.html after running yarn run build-storybook. The non-static version (yarn storybook start) runs fine.

The project is running storybook 6.1.0-rc.3.

[shilman]

@itsderek23 I don't think it works with file URLs. you need to run a web server like npx http-server. works fine when served: https://storybook-design-system.netlify.app/

[itsderek23]

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

 npx http-server storybook-static/

[reywright]

@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]

@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]

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?

[webholics]

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