-1

Similar question here

I'm creating two react apps, one on port 3000 and the other one on port 3001, both in localhost. The project on localhost:3000 is an signin api, similar to google oauth. The app on localhost:3001 needs to open an popup to allow user to login on localhost:3000 and finally return the user account to localhost:3001.

localhost:3001 relevant code:

let browser = window.self;
browser.onSuccess = function (res) {
    // Do something
}
browser.open("http://localhost:3000/singin", "Sign in", opts);

localhost:3000 relevant code:

// Set document domain to same domain of window.opener
document.domain = "localhost:3001";
// Call onSuccess function
window.opener.onSuccess(user);

The function exists, but when its called it throws the following error: SecurityError: Permission denied to access property "onSuccess" on cross-origin object.

Belive it or not, yesterday it was working just fine after set document.domain equals to localhost:3001.

What I tried:

  • Add this header on index.html of localhost:3000:
<meta http-equiv="Access-Control-Allow-Origin" content="localhost:3001/">
  • Add a protocol (like "http://") to "document.domain".
  • Allow firewall access to both ports (I was desperate ok?)

Edit

Code for localhost:3001 here. Files in src/localhost3000 are from localhost:3001 project.

Please

I DON'T want to use postMessage.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Alexandre Aragão
  • 413
  • 3
  • 17

1 Answers1

1

According to window.opener docs, I don't think it is possible

If the opener is not on the same origin as the current page, functionality of the opener object is limited. For example, variables and functions on the window object are not accessible. However, navigation of the opener window is possible, which means that the opened page can open an URL in the original tab or window. In some cases, this makes phishing attacks possible, where a trusted page that is opened in the original window is replaced by a phishing page by the newly opened page.

If you own both domains, it's pretty easy and simple to connect both with postMessage.

uke
  • 893
  • 4
  • 10
  • By reading the documentation, I would agree with you. But as I said, it was working fine yesterday, and according to [this question](https://stackoverflow.com/questions/39456825/when-page-is-opened-with-window-open-how-can-the-opened-page-allow-the-opener-t) adding document.domain should work, the author answered the question itself. Now I'm very confused – Alexandre Aragão Dec 08 '20 at 19:19
  • Seems [document.domain](https://developer.mozilla.org/en-US/docs/Web/API/Window/opener) it's a deprecated feature, it might be why it used to work. Also the autor mention IE11, no newest browser. – uke Dec 08 '20 at 19:22
  • Yep, I can't explain why was working before. But I can tell that only worked after I set document.domain. After a little more of research, I decide to use postMessage. Thank you @uke. You're the best. – Alexandre Aragão Dec 08 '20 at 21:35