How to receive postmessage inside Facebook in-app browser?

Question

I'm trying to send postmessage from the opened window to opener in facebook app browser, but the "opener window" never receives messages. What can be the cause of the problem?

Receiver side:

window.addEventListener('message', function (e) {
    window.console.log("on message: " + e.data); 
}, false)

Sender side:

window.opener.postMessage('any Message', document.location.origin);

It a cross origin policy error? Normally, scripts on different pages are allowed to access each other if and only if the pages they originate from share the same protocol, port number, and host (also known as the "same-origin policy"). — kevzettler
@kevzettler not necessarily, the postMessage for iframes is specifically if they are on separate origins — B''H Bi'ezras -- Boruch Hashem

B''H Bi'ezras -- Boruch Hashem B''H Bi'ezras -- Boruch Hashem · Accepted Answer · 2020-01-21T02:31:21

It's hard to tell without seeing more of your code, but as this Opening facebook connect window via javascript? answer states, if you're trying to access the oAuth page, it's not possible.

Show us where you get the variable window.opener, that might add some context.

If you opened it from window.open(/page/), it appears that it is specifically blocked: How do I get around window.opener cross-domain security as mentioned in that question:

NOTE

Social signups do not work for google, FB, etc within an iframe. I believe they disallow them for security reasons.

Also from window.opener is null after redirect

window.opener is removed whenever you navigate to a different host (for security reasons), there is no way around it. The only option should be doing the payment in a frame if it is possible. The top document needs to stay on the same host.

But as mentioned in the second answer quoted, instead of using window.opener on the opened page, do everything from the origninal page, and (IF you have access to the source of the popup), make an onmessage on the other page, like mentioned in the accepted answer there, that the correct way to do it is only in reverse:

Do it the other way around. Track the state of the child popup window from the main (opener) window, and you could easily know when the child window has been navigated back to you domain, so you could "talk" to it again. But don't close the child window by itself. Let the opener window obtain the result from the child window and then close it.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Example

For example, in your started page, do something like:

var popup = window.open(/*some URL*/);
popup.postMessage("hi");
addEventListener("message", function(e) {
    console.log(e);
    e.source.postMessage("Hi there"); //official workaround for window.opener on other page
})

then in your "/some URL/" source code page, do something like:

addEventListener("message", function(e) {
    console.log(e);
    e.source.postMessage("hi back");
});

and just play around with that strategy, but it appears window.opener is out of the picture. Just try console.logging it, it just say null.

How to receive postmessage inside Facebook in-app browser?

1 Answers