[Bug] Uncaught DOMException in a page with a cross-origin iframe

[pocka]

Describe the bug

https://github.com/pocka/storybook-addon-designs/issues/108

telejson tries to call toJSON on a cross-origin object then a browser throws an Uncaught DOMException.

This mostly happens when you set action from @storybook/addon-actions to callbacks that pass native Events as a payload, and the page (frame) includes a cross-origin iframe. See the above issue for the context.

Steps to reproduce the behavior

1. Setup Storybook for React with Actions Addon
2. Write a story

   import { action } from "@storybook/addon-actions"
   
   export default { title: "Test/CrossOriginObject" }
   
   export const Sample = () => (
     <div>
       <iframe src="https://wikipedia.org" />
       <button onClick={action('onClick')}>Button</button>
     </div>
   )
   

3. Click the "Button"
4. See the error in the browser console

Expected behavior

No errors. Serializing to something like HTMLIFrameElement or <CrossOriginObject> would be enough IMO.

Screenshots and/or logs

Error messages.

Chrome

Uncaught DOMException: Blocked a frame with origin "http://localhost:6006" from accessing a cross-origin frame.
    at JSON.stringify (<anonymous>)
    at stringify (http://localhost:6006/vendors~main.iframe.bundle.js:122922:15)
    at PostmsgTransport.send (http://localhost:6006/vendors~main.iframe.bundle.js:13343:77)
    at handler (http://localhost:6006/vendors~main.iframe.bundle.js:13665:28)
    at Channel.emit (http://localhost:6006/vendors~main.iframe.bundle.js:13675:9)
    at actionHandler (http://localhost:6006/vendors~main.iframe.bundle.js:5519:13)
    at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.iframe.bundle.js:86213:14)
    at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors~main.iframe.bundle.js:86262:16)
    at invokeGuardedCallback (http://localhost:6006/vendors~main.iframe.bundle.js:86317:31)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:6006/vendors~main.iframe.bundle.js:86331:25)

Firefox (stack trace omitted)

Uncaught DOMException: Permission denied to access property "toJSON" on cross-origin object

Environment

• OS: macOS
• Node.js version: v14.11.0
• NPM version: Yarn v1.22.10
• Browser (if applicable): Google Chrome, Mozilla Firefox
• Browser version (if applicable): 91.0.4472.106, 90.0b8
• Device (if applicable): -

Additional context

A workaround for the Actions Addon with events in an environment with <iframe> is to remove the reference for the window object.

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>
)

[nrakochy]

Any ideas of where the bug might be here? Trying out storybook-addon-designs and seeing this error on the SSO redirect in the add-on