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

kon-rad · 2019-06-27T01:54:25Z

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:

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.

The text was updated successfully, but these errors were encountered:

dancrumb · 2019-10-25T20:46:38Z

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

StJohn3D · 2019-11-11T21:36:55Z

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.

… occurs, we catch it and can proceed storybookjs/storybook#7215

ndelangen · 2019-11-25T10:36:12Z

I opened a fix PR in telejson!

shilman · 2019-11-26T01:10:32Z

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 · 2020-01-28T16:32:56Z

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 · 2020-01-28T18:01:29Z

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

sgtdck · 2020-01-30T04:28:22Z

@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 · 2020-01-30T08:50:49Z

Thank you for checking.

Will put this back on my todo list

itsderek23 · 2020-11-18T18:48:54Z

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

 npx http-server storybook-static/

silouanwright · 2020-11-18T20:42:31Z

@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 · 2020-11-19T01:06:35Z

@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 · 2020-11-26T00:04:40Z

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 · 2020-12-10T09:46:28Z

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

Blizard · 2021-01-11T09:30:05Z

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

anicholls · 2021-01-11T21:09:17Z

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.

garyhlai · 2021-03-10T11:09:26Z

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

ndelangen · 2021-03-17T13:22:48Z

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

abbudao · 2021-03-27T11:35:47Z

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.

Repro:

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

Open Firefox and click on Header > Logged In component
Click on the Log out button

Let me know if I can be of any help 😉

nickofthyme · 2021-07-29T21:33:49Z

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 · 2021-07-30T10:02:11Z

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

nickofthyme · 2021-07-30T19:00:20Z

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

b0o · 2021-11-16T09:05:12Z

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 · 2021-11-16T14:38:09Z

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.

shilman added addon: actions question / support labels Jun 27, 2019

shilman added this to the 5.1.x milestone Jun 27, 2019

stale bot added the inactive label Jul 18, 2019

stale bot closed this as completed Aug 17, 2019

shilman reopened this Oct 26, 2019

stale bot removed the inactive label Oct 26, 2019

shilman added bug high priority and removed question / support labels Nov 11, 2019

shilman assigned ndelangen Nov 11, 2019

shilman modified the milestones: 5.1.x, 5.2.x Nov 11, 2019

storybookjs deleted a comment from stale bot Nov 13, 2019

ndelangen added a commit to storybookjs/telejson that referenced this issue Nov 25, 2019

Wrap a try-catch around the replacer, so that if a cross-origin error…

0cbd656

… occurs, we catch it and can proceed storybookjs/storybook#7215

ndelangen mentioned this issue Nov 25, 2019

FIX cross-origin error storybookjs/telejson#31

Merged

ndelangen mentioned this issue Nov 25, 2019

Core: Upgrade telejson to fix cross-origin frame error #8940

Merged

ndelangen modified the milestones: 5.2.x, 5.3.0 Nov 25, 2019

shilman closed this as completed Nov 26, 2019

ndelangen reopened this Jan 30, 2020

shilman removed the needs reproduction label Nov 19, 2020

itsderek23 mentioned this issue Nov 21, 2020

Does this work with html storybooks? chrisvxd/story2sketch#47

Open

shilman modified the milestones: 6.1 essentials, 6.2 essentials Nov 24, 2020

shilman added P0 composition and removed P2 labels Dec 11, 2020

anicholls mentioned this issue Dec 31, 2020

Update Storybook to solve Docs addon breaking Storybook Composition for certain prop default values Workday/canvas-kit#933

Closed

anicholls mentioned this issue Jan 11, 2021

Docs addon eval breaking Storybook Composition for certain prop default values #13608

Open

shilman modified the milestones: 6.2 essentials, 6.2 candidates Mar 4, 2021

shilman removed this from the 6.2 candidates milestone Mar 11, 2021

ndelangen closed this as completed Mar 17, 2021

camtheperson mentioned this issue Apr 6, 2021

DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. percy/percy-storybook#285

Closed

tomof mentioned this issue May 17, 2023

コンポーネントキャプチャ一覧を作成 kufu/smarthr-design-system#658

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kon-rad commented Jun 27, 2019

dancrumb commented Oct 25, 2019

StJohn3D commented Nov 11, 2019 •

edited

Loading

ndelangen commented Nov 25, 2019

shilman commented Nov 26, 2019

zeorin commented Jan 28, 2020

ndelangen commented Jan 28, 2020

sgtdck commented Jan 30, 2020

ndelangen commented Jan 30, 2020

itsderek23 commented Nov 18, 2020

silouanwright commented Nov 18, 2020

shilman commented Nov 19, 2020

anicholls commented Nov 26, 2020 •

edited

Loading

webholics commented Dec 10, 2020

Blizard commented Jan 11, 2021 •

edited

Loading

anicholls commented Jan 11, 2021 •

edited

Loading

garyhlai commented Mar 10, 2021

ndelangen commented Mar 17, 2021

abbudao commented Mar 27, 2021 •

edited

Loading

nickofthyme commented Jul 29, 2021 •

edited

Loading

markov00 commented Jul 30, 2021

nickofthyme commented Jul 30, 2021

b0o commented Nov 16, 2021 •

edited

Loading

nickofthyme commented Nov 16, 2021

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

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

Comments

kon-rad commented Jun 27, 2019

dancrumb commented Oct 25, 2019

StJohn3D commented Nov 11, 2019 • edited Loading

ndelangen commented Nov 25, 2019

shilman commented Nov 26, 2019

zeorin commented Jan 28, 2020

ndelangen commented Jan 28, 2020

sgtdck commented Jan 30, 2020

ndelangen commented Jan 30, 2020

itsderek23 commented Nov 18, 2020

silouanwright commented Nov 18, 2020

shilman commented Nov 19, 2020

anicholls commented Nov 26, 2020 • edited Loading

webholics commented Dec 10, 2020

Blizard commented Jan 11, 2021 • edited Loading

anicholls commented Jan 11, 2021 • edited Loading

garyhlai commented Mar 10, 2021

ndelangen commented Mar 17, 2021

abbudao commented Mar 27, 2021 • edited Loading

nickofthyme commented Jul 29, 2021 • edited Loading

What works?

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

markov00 commented Jul 30, 2021

nickofthyme commented Jul 30, 2021

b0o commented Nov 16, 2021 • edited Loading

nickofthyme commented Nov 16, 2021

StJohn3D commented Nov 11, 2019 •

edited

Loading

anicholls commented Nov 26, 2020 •

edited

Loading

Blizard commented Jan 11, 2021 •

edited

Loading

anicholls commented Jan 11, 2021 •

edited

Loading

abbudao commented Mar 27, 2021 •

edited

Loading

nickofthyme commented Jul 29, 2021 •

edited

Loading

b0o commented Nov 16, 2021 •

edited

Loading