New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Getting ERROR: Blocked a frame with origin "http://localhost:3000" from accessing a frame with origin "null". #123
Comments
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
|
Looks like you're including the app inside an iframe? Could you please provide a simple Plunker/JSBin/CodePen/jsFiddle example? |
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. |
Hmm, we're using some data in iframe, but it's not part of our app so no redux in iFrames. |
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 |
I did manage to resolve my firebase/Redux DevTools issue. It turns out I was taking the 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. Hope that helps someone. |
@mikehazell Thanks that was my problem. |
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? |
@pilgrimtech this might help https://github.com/douglascorrea/react-hot-redux-firebase-starter/ |
I don't think that's the actual problem. This project uses it too and works perfectly fine. |
I had the same issue, after updating firebase from 3.0.5 to 3.1.0 the devTool extension stops showing the error message. |
@mikehazell Is passing the whole payload to Redux "bad" just for devtools usage? or bad practice in general? What other issues might this cause? |
@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. |
I think this issue might have something to do with facebook/react-devtools#57 |
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:
We're using KOA2 node server. Everything works fine, but stops when I'm opening devTools extension.
The text was updated successfully, but these errors were encountered: