Blocked a frame with origin ... from accessing a cross-origin frame.
josejaguirre opened this issue · comments
Hello, I think the library is great for managing twitter login, but I have a problem, when I want to use the component to make the login, I get the following error Error: Blocked a frame with origin" http: // localhost: 3000 " from accessing to cross-origin frame. In my specific case I am using my localhost` to be able to use proof of concept, and I enabled the cors, but I can not make it work. Is there any indication on this? or I'm doing something wrong when using the library
Hi,
This should be working. Also in example folder you can find an example with Node.js/Express.js application and React application. Both are hosted on localhost, but on two separate ports. Also i've created tutorial that explains similar setup.
You shouldn't have any issues.
I currently manage a project in which everyone has work with their own server (backend and frontend), the part of the backend worked excellent for me, but when using the react component, I see that a window.open is created, to be able to open the twitter registration window, when entering the polling that window has problems with the cors permissions, so that part is the one that has stopped me, both on the backend server (api), as in the client enable the cors permission as you have it in the tutorial and I could not pass the setInterval cycle, some recommendation ?? , thanks for answering
Sorry for late response, but you should not have any other configuration for cors in frontend. Pay attention that you have correctly set up cors on backend.
Hello, I get the same issue, and my cors in the backend are correctly set... however the problem seems to come from the frontend that can not be able to get data from a popup without the same origine (like twitter.com). Did you found a workaround ?
Hi @Veldars,
I haven't manage to reproduce this issue. Do you use latest version of library? What is the value for credentials prop that you are using?
I just need more information about the issue.
Ok, thanks for your quick answer.
Yes I download the last version of the library.
I tried with every possible value for credentials, but the error is still there.
But for me I don't understant how it could work. I had read the code of your library and after some internet research, The parent window of a popup cannot access to anything from the popup if the origine of the popup is not the same that the parent window.
So if you try to get data like popup.location.hostname the browser will throw an error if the origin is not the same. I haven't found any solution for this kind of problème.
If you need it, here is my call of the TwitterLogin.
<TwitterLogin loginUrl={`${Conf.BaseURL}auth/twitter`}
onFailure={this.onFailed} onSuccess={this.onSuccess}
requestTokenUrl={`${Conf.BaseURL}auth/twitter/reverse`}/>
I have removed the credential parameter because you do not use it in your examples.
Thanks
I modified the component to use the callback offered by tweet, since it was impossible to obtain the token directly to authenticate
Thanks, I did it too, but I'd like to understand how it could work without modification...
I think it's because of some change that twitter made in its way of authenticating
One question how do you end on different domain? Because, popup should go back to application. So I am creating popup from http://localhost:3000 and after authentication in popup will be opened http://localhost:3000/#callback? This is same host. What is your configuration for callback URL on Twitter application?
@josejaguirre, I'm experiencing the same issue, could you please elaborate a little bit on a workaround for it?
@sherlaimov hi! sure.
I used the process where the application redirects to a twitter login and then returns to the application using the callback I hope it serves you.
I was using node for that, i used https://github.com/drudge/passport-twitter-token library.
The steps you took were the following:
1.- Node Backend Use the library and create custom url for get request token from twitter link (https://api.twitter.com/oauth/request_token)
2.- React Component Edit getRequestToken from TwitterLogin and use the custom link and get the oauth_token prop
3.- React Component Redirect https://api.twitter.com/oauth/authenticate?oauth_token=${oauth_token}
4.- Twitter Setup Twitter app callback to return to your application
5.- Node Backend Setup authorization middleware using callback url.
@josejaguirre thank you for you response, I also use NodeJS, in fact I tried following through @ivanvs's tutorial on implementing Twitter Authorization with React, however, I'm using KoaJS and had to use the oAuth module to authorize my 'node-fetch' requests - all seem to be working just fine, except for the frontend/react part.
Can you please explain what kind of customized link should be used in getRequestToken? I'm fetching the following requestTokenUrl link http://localhost:8080/auth/twitter/reverse in getRequestToken and it does return an oauth_token which is passed to a popup with location of https://api.twitter.com/oauth/authenticate?oauth_token=${data.oauth_token}&force_login=${this.props.forceLogin}.
My react app is running on port 3000, could the port difference be the reason causing the CORS issue?
@ivanvs you are right, it is working now, thank you. It's clearly my gap in knowledge of what CORS really is.
Hey Guys i write a react componet to login to OPENID but have a error :
Failed to load https://sso.csoc.net/openid/authorize?response_type=code&client_id=948084&redirect_uri=https%3A%2F%2Flocalhost%3A4000%2Fopenid%2Fcallback&scope=openid%20auth_web%20openid%20profile%20email&state=qmICanszt40y7HQphWsmd7zg:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
client React : https://localhot:3000
Expres server : https://localhot:4000 connect to server authentication
How i can fix by pass CORS ?
i try set header :
const customHeader = {};
customHeader['Access-Control-Allow-Origin'] = '';
customHeader['Origin'] = '';
customHeader['Accept'] = 'application/json';
customHeader['Content-Type'] = 'application/json';
Hey Guys i write a react componet to login to OPENID but have a error :
Failed to load https://sso.csoc.net/openid/authorize?response_type=code&client_id=948084&redirect_uri=https%3A%2F%2Flocalhost%3A4000%2Fopenid%2Fcallback&scope=openid%20auth_web%20openid%20profile%20email&state=qmICanszt40y7HQphWsmd7zg:Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
client React : https://localhot:3000
Expres server : https://localhot:4000 connect to server authentication
How i can fix by pass CORS ?i try set header :
const customHeader = {};
customHeader['Access-Control-Allow-Origin'] = ''; customHeader['Origin'] = '';
customHeader['Accept'] = 'application/json';
customHeader['Content-Type'] = 'application/json';
same issue +1