How to Close a Tab You Don’t Open It

In this article we learn how to close external tab with different origin from your app through understand three concepts:

1- What is the meaning of Cross-window communication

2- What is the problem in two window with different origin talking each other

3- The solution in Cross-window messaging

1- What is the meaning of Cross-window communication

The “Same Origin” (same site) policy limits access of windows and frames to each other.

The idea is that if a user has two pages open: one from john-smith.com, and another one is gmail.com, then they wouldn’t want a script from john-smith.com to read our mail from gmail.com. So, the purpose of the “Same Origin” policy is to protect users from information theft.

Two URLs are said to have the “same origin” if they have the same protocol, domain and port.

The “Same Origin” policy states that:
if we have a reference to another window, e.g. a popup created by window.open or a window inside <iframe>, and that window comes from the same origin, then we have full access to that window.
Otherwise, if it comes from another origin, then we can’t access the content of that window: variables, document, anything. The only exception is location: we can change it (thus redirecting the user). But we cannot read location (so we can’t see where the user is now, no information leak).

2-What is the problem in two window with different origin talking each other

The problem I faced in our app during checkout process, we want to open 3d secure window and track its url change with this scenario:

Click on a button in your app http://www.site.com to open a form with a different domain http://www.form.com in a new tab, after clicking on submit button in the form, then redirected to another different domain http://www.success.com in the same tab, here appears the problem:

we want to close this tab http://www.success.com, how we can do this?!
There are two traditional solutions but not working:

• window.open( )

As we see in console we can not access location of http://www.form.com because it has different domain of our site, so we can not track change in url to http://www.success.com and close this window.

• iframe

Also iframe gives the same result as window.open.

3-The solution in Cross-window messaging

The postMessage interface allows windows to talk to each other no matter which origin they are from.
So, it’s a way around the “Same Origin” policy. It allows a window from http://www.site.com to talk to http://www.success.com and exchange information, but only if they both agree and call corresponding JavaScript functions. That makes it safe for users.

The postMessage interface has two parts:

• postMessage
  The window that wants to send a message, calls postMessage method of the receiving window. In other words, if we want to send the message to site, we should call site.postMessage(data, targetOrigin)
  Arguments:
  - data →The data to send.
  - targetOrigin → Specifies the origin for the target window, so that only a window from the given origin will get the message.
  Specifying targetOrigin ensures that the window only receives the data if it’s still at the right site. Important when the data is sensitive.

From this window http://www.parent.com we can postMessage to http://www.child.com

• onmessage
  To receive a message, the target window should have a handler on the message event. It triggers when postMessage is called (and targetOrigin check is successful).
  The event object has special properties:
  - Data →The data from postMessage.
  - Origin →The origin of the sender.

Here’s an example:

The solution comes from this idea, we receive a success message from http://www.success.com in onmessage event and close this window from our app http://www.site.com

but how we can implement this solution:

• Create child component and insert it in react router to enable routing to it, in this component we can open 3d secure page using “react-iframe” package.

• Install “react-window-opener” package to open child page with 3d secure window in new tab

Conclusion

communication between two window with different domain can be easily through postMessage and onmessage event.

Thank You For Reading, I Hope You Find It Useful