Redux-devtools-extension: Blocked Frame When Using Stripe

[smcguinness]

Stripe injects an iFrame for cross-browser compatibility, and when redux-devtools is running, actions cause an exception to be thrown. I haven't found a workaround for this. Any suggestions? Obviously, I don't have access to change how Stripe is working.

Uncaught DOMException: Blocked a frame with origin "http://local.site.com:8000" from accessing a cross-origin frame.
at derez (:2:5152)
at derez (:2:5787)
at derez (:2:5787)
at derez (:2:5787)
at derez (:2:5787)
at derez (:2:5787)
at derez (:2:5787)
at derez (:2:5787)
at derez (:2:5787)
at derez (:2:5787)
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
derez @ VM103677:2
decycle @ VM103677:2
e.stringify @ VM103677:1
tryCatchStringify @ VM103677:1
stringify @ VM103677:1
toContentScript @ VM103677:1
relay @ VM103677:1
(anonymous) @ VM103677:2
invokeFunc @ VM103677:2
leadingEdge @ VM103677:2
debounced @ VM103677:2
handleChange @ VM103677:1
dispatch @ createStore.js?fe4c:186
dispatch @ VM103677:2
(anonymous) @ thirdPartyTracking.js?41ec:15
(anonymous) @ index.js?f248:14
dispatch @ VM103677:2
openPopover @ container-partnerFinder.jsx?fecd:143
onClick @ list-item-partnerFinder.jsx?e18e:215
EnhancedButton._this.handleClick @ EnhancedButton.js?7315:142
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js?dc41:70
executeDispatch @ EventPluginUtils.js?5d8c:85
executeDispatchesInOrder @ EventPluginUtils.js?5d8c:108
executeDispatchesAndRelease @ EventPluginHub.js?0f32:43
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js?0f32:54
forEachAccumulated @ forEachAccumulated.js?e2c3:24
processEventQueue @ EventPluginHub.js?0f32:257
runEventQueueInBatch @ ReactEventEmitterMixin.js?91f8:17
handleTopLevel @ ReactEventEmitterMixin.js?91f8:28
handleTopLevelImpl @ ReactEventListener.js?944f:72
perform @ Transaction.js?f15f:140
batchedUpdates @ ReactDefaultBatchingStrategy.js?e9be:62
batchedUpdates @ ReactUpdates.js?8e6b:97
dispatchEvent @ ReactEventListener.js?944f:147

[zalmoxisus]

Unfortunately, Stripe is not available for our country yet to register. Does it happen with any iframes with other domains than the parent? Could you provide a generic example to reproduce?

[zalmoxisus]

Any updates on this? According to the stack trace, it throws here and the only part which can cause the crossframe issue could be using instanceof. However, the extension doesn't do anything (don't call that function to serialize the data) unless it's added as a store enhancer.

As far as I see, Stripe in't using Redux DevTools so I have no clue how it could happen unless you can show a demo.

[prattl]

I don't have any additional information, but I can confirm I'm experiencing the same issue. I am using other scripts which inject iframes without error. I can remove the error by:

1. Disabling the redux-devtools browser extension, or
2. Remove the Stripe javascript. The offending line is:
   <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

[zalmoxisus]

@prattl thanks for the information. Could you please provide some steps to reproduce it? I tried to include <script type="text/javascript" src="https://js.stripe.com/v2/"></script> but there's still no exception.

[smcguinness]

@zalmoxisus It is definitely intermittent, which makes it all that much worse to reproduce. I'm going to spin up a clean test project and see if I can get it to reproduce.

[duvillierA]

Hi,

Had same issue with stripe.

Had figure out that the trouble was an object mutated with inside a react component as property. So not really related to stripe

I created a mapper function and it has fixed the problem.

@smcguinness look at this issue

[AFortune]

I have had the same issue with the facebook javascript sdk. I was totally stumped by it until I removed devtools.

[AFortune]

@duvillierA Could you post an example of what you are talking about. I don't think I am mutating any props but it is hard to be sure.

[ThadeuLuz]

I had this exact same error, but caused by Reedy Chrome extension.

I'd suggest disabling every google chrome extension and seeing if the problem persists.

[maxefi]

@zalmoxisus, currently facing this exact problem.
store configuration:

import { routerMiddleware } from 'react-router-redux';
import browserHistory from 'react-router/lib/browserHistory';
import { applyMiddleware, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const configureStore = () => (
    composeEnhancers(applyMiddleware(
        routerMiddleware(browserHistory),
        thunk
    ))(createStore)(rootReducer)
);

export default configureStore;

stripe is also there in index.html:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

how to reproduce:
in my current application the issue fires when I'm trying to open/close a ModalDialog, for example (whet happens in reducer when the corrensponding action fires):

[MiscTypes.SET_ADD_CREDIT_CARD_MODAL_OPENED]: (state, action) => (
        state.setIn(['modals', 'addCreditCard'], true).setIn(['modals', 'any'], true)
),

currently the only way I've found to fix this is to disable dev-tools (which I definitely don't want to do) or remove stripe (which I cannot do by specification).

[keeth]

Found the root cause after a few minutes in the Chrome debugger.

Stripe JS adds the property document.__privateStripeMetricsController0 which is a reference to its cross-domain iframe.

Accessing any sub-property of this window object triggers the error, try this typing this in the console on a page that includes the stripe JS:

> document.__privateStripeMetricsController0.foo
Uncaught DOMException: Blocked a frame with origin "http://localhost:3005" from accessing a cross-origin frame.
    at <anonymous>:1:44

It appears that Redux Dev Tools attempts to serialize all payloads, so if you pass (say) a mouse or touch event as an action payload, which contains a nested reference to Document, RDT will attempt to serialize it. In particular it calls out to a library called jsan which attempts to access .toJSON on the above property, triggering the error.. something as simple as this can trigger it, since a mouse event is passed to the action creator:

<button onClick={someAction}>watch me explode</button>

A quick fix would be to wrap jsan.stringify it a try/catch block.

https://github.com/zalmoxisus/redux-devtools-extension/blob/master/src/app/api/index.js#L18

[keeth]

I attempted the try/catch solution but it ended up showing me 'UNDEFINED' actions in redux dev tools. So instead I use a replacer and try to detect and skip window objects, replacing them with '[WINDOW]'. Using object instanceof Window did not correctly detect the stripe iframe, so I used the test object.window === object instead.

PR #422

[AFortune]

I have noticed that it happens to me when I copy the synthetic event object that react creates. If I pull out the needed data and then pass that into my functions that helps most of the time. @maxefi What does your action call look like?

[ezzatron]

This is also happening for me with Facebook or Google sign in integration. Not sure which one right now, sorry.

[reintroducing]

Also seeing this and also using Stripe. Any chance that @keeth's PR can be merged to fix this (if it does)?

[newvar]

likely the same issue with Facebook integration (using react-facebook-login component, but doesn't matter actually)

1. i dispatch some actions during facebook auth process
2. my action includes a SyntheticMouseEvent in payload (triggered from facebook auth button)
3. devtools makes attempt to serialize (stringify) the event as part of action
4. the event has a link to facebook connection iframe (fb_xdm_frame_https) action.payload._targetInst._currentElement._owner._hostContainerInfo._ownerDocument.fb_xdm_frame_https
5. the serialization ruins due to CORS blocking access to facebook iframe (fb_xdm_frame_https) (Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.)

[reintroducing]

@zalmoxisus Thanks for merging that. When does a new chrome extension with these changes get put out? Is it automatic or do you need to trigger it? I apologize for the ignorance, I'm not familiar with how chrome extensions work in regards to GitHub merges but I'm using the extension.