Uncaught DOMException: Blocked a frame with origin from accessing a cross-origin frame.

[volKate]

Affected design types

• figma
• experimental-figspec
• link
• image
• iframe

Describe the bug
I create storybook doc page using Remixing DocsPage strategy.
When I add Figma, IFrame, Design Doc Blocks I get an error: Uncaught DOMException: Blocked a frame with origin from accessing a cross-origin frame. This doesn't happen to Figspec though. But we are not ready to use it and take risks.
This error blocks our components to be rendered correctly.

To Reproduce

• Set up storybook
• Add storybook-addon-designs
• Create CSF story for input (to see incorrect rendering of active state you can try mui TextField)
• Use doc blocks remixing to add Figma Doc Block
• Run storybook
• click on input
• see error

Expected behavior
No DOMException error (e.g. as for the Figspec Doc Block)

Environment

• OS: MacOS
• Browser: Google Chrome

Versions

Paste the result of npm list @storybook/ui or yarn list --pattern @storybook/ui below.

├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └─┬ @storybook/[email protected]
│     └── UNMET DEPENDENCY @storybook/[email protected] 
└─┬ @storybook/[email protected]
  └─┬ UNMET DEPENDENCY @storybook/[email protected]
    ├─┬ @storybook/[email protected]
    │ └── UNMET DEPENDENCY @storybook/[email protected] 
    └─┬ @storybook/[email protected]
      └── UNMET DEPENDENCY @storybook/[email protected] 

Paste the result of npm list storybook-addon-designs or yarn list --pattern storybook-addon-designs below.

└── [email protected]

[pocka]

Both type: "iframe" and type: "figma" renders sites using <iframe>, other types render without it.

@volKate

click on input

Does your DocsPage work until you interact with the input?

The error seems to be one related to the Same-origin policy.
Since the demo is working, there must be an (unexpected) behavior that accesses the iframe (in this addon or elsewhere).

[volKate]

First of all, thanks for your really quick reply!
Generally, DocsPage continue working even when the error occurs in console, but the error affect the correct rendering of our component in <Primary /> and <Stories /> blocks. If I comment the <Figma /> block, error is gone and rendering is correct.
I've also tried button instead of input, and yes, when you try to interact with the component, the Exception raises

[pocka]

storybookjs/telejson#71

Found out it's a bug in upstream. Opened the issue there so closing this.

---

A quick workaround:

export const Workaround1 = () => (
  <div>
    <iframe src="https://wikipedia.org" />
    <button onClick={() => action('onClick')()}>Button</button>
  </div>
)

// view is a reference for the window (frame?) object
export const Workaround2 = () => (
  <div>
    <iframe src="https://wikipedia.org" />
    <button onClick={ev => action('onClick')({ ...ev, view: null })}>Button</button>
  </div>
)

[henrycity]

Is there any other workaround while waiting for storybookjs/telejson#71 to be fixed? In my case, I just use Figma with addon actions. All the statements after action cannot be reached.

import React from 'react'
import { Meta } from '@storybook/react'
import { action } from '@storybook/addon-actions'

const meta: Meta = {
  title: 'Button',
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/abcdef',
    },
  },
}

export default meta

export const Default = () => {
  return (
    <Button
      onClick={(e) => {
        action('onClick')(e)
        // Statements after this comment cannot be reached
        console.log('not reached')
      }}
    />
  )
}