Redux-devtools-extension: Getting ERROR: Blocked a frame with origin "http://localhost:3000" from accessing a frame with origin "null".

[jarohmh]

Getting error: VM1651:1123 Uncaught SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a frame with origin "null". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "file". Protocols must match. when opening redux devtools extension.

My configuration:

...
let middleware = applyMiddleware(thunk)
  if (__DEV__) {
    const devTools = window.devToolsExtension ? window.devToolsExtension() : f => f
    middleware = compose(middleware, devTools)
  }

  const store = middleware(createStore)(rootReducer, initialState)
...

We're using KOA2 node server. Everything works fine, but stops when I'm opening devTools extension.

[mikehazell]

Hi there,

I'm getting a similar error with an app that uses the new Firebase 3 api. DevTools was working fine before upgrading Firebase on May 21st.

DevTools version 1.4.1

Uncaught SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a frame with origin "https://myapplicationname.firebaseapp.com".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
(anonymous function) @ main.js:2819
main.js:2812 FIREBASE WARNING: Exception was thrown by user callback. Error: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

[zalmoxisus]

Looks like you're including the app inside an iframe? Could you please provide a simple Plunker/JSBin/CodePen/jsFiddle example?

[mikehazell]

This is really odd. I can't reproduce it in a jsFiddle. Have also tried with a more complex setup closer to my app (which uses Firebase Auth) and can't make it happen. I'll come back if I can narrow down the issue.

[jarohmh]

Hmm, we're using some data in iframe, but it's not part of our app so no redux in iFrames.

[ghost]

I'm getting the same error using firebase as well. Im not creating any iframes, but I do believe that might be how firebase prompts for provider SSO login

[mikehazell]

I did manage to resolve my firebase/Redux DevTools issue.

It turns out I was taking the user object from Firebase's onAuthStateChanged callback and passing that into my action payload. Kind of like this:

firebase.auth().onAuthStateChanged((user) => {
    if (!user) return; // Logged out
    store.dispatch({
        type: 'UPDATE_USER',
        payload: user,       // << Bad - don't do this
    });
});

The fix was to copy just the data I needed from the user object rather than passing the whole object in.

firebase.auth().onAuthStateChanged((user) => {
    if (!user) return; // Logged out
    store.dispatch({
        type: 'UPDATE_USER',
        payload: {
            uid: user.uid,     // << Just the bits we need
            email: user.email,
            displayName: user.displayName,
        },
    });
});

The difference here, is that in the second version we are passing primitive types (strings) where as in the first version we are passing references. The references point to a scope which Redux DevTools is not allowed to access. Hence the warning.

There are probably other Firebase objects that would cause the same issue. firebase.User comes to mind.

Hope that helps someone.

[ghost]

@mikehazell Thanks that was my problem.

[ghost]

a bit unrelated, but @mikehazell mind sharing how you are authenticating and maintaining the firebase token? are you checking using actions on the router or just using the firebase events?

[foffer]

@pilgrimtech this might help https://github.com/douglascorrea/react-hot-redux-firebase-starter/

[cameronroe]

I don't think that's the actual problem. This project uses it too and works perfectly fine.

[Pintouch]

I had the same issue, after updating firebase from 3.0.5 to 3.1.0 the devTool extension stops showing the error message.

[bkrall]

@mikehazell Is passing the whole payload to Redux "bad" just for devtools usage? or bad practice in general? What other issues might this cause?

[mikehazell]

@bkrall I'd say it's probably bad practice in general. Redux is not in control of the whole user object so it could be modified outside of the Redux context (ie: not through an action). If this happens, your application state can get out of sync with your UI which could cause weird bugs and side effects.

[tangentlin]

I think this issue might have something to do with https://github.com/facebook/react-devtools/issues/57

[asad-naeem]

I found the best answer here.
https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame