You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
exportconstWorkaround1=()=>(<div><iframesrc="https://wikipedia.org"/><buttononClick={()=>action('onClick')()}>Button</button></div>)// view is a reference for the window (frame?) objectexportconstWorkaround2=()=>(<div><iframesrc="https://wikipedia.org"/><buttononClick={ev=>action('onClick')({ ...ev,view: null})}>Button</button></div>)
The text was updated successfully, but these errors were encountered:
Describe the bug
storybookjs/addon-designs#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
Expected behavior
No errors. Serializing to something like
HTMLIFrameElement
or<CrossOriginObject>
would be enough IMO.Screenshots and/or logs
Error messages.
Chrome
Firefox (stack trace omitted)
Environment
Additional context
A workaround for the Actions Addon with events in an environment with
<iframe>
is to remove the reference for thewindow
object.The text was updated successfully, but these errors were encountered: