External website communication

IExternalCommunicationService allows Web Red Apps to open a new window (or tab) and then post and receive messages from it. It uses the window.postMessage() method.

Red App

From within Web Red App we use IExternalCommunicationService.openWindow(url, targetOrigin, listener) to open a new window and send messages. targetOrigin is the origin of URL, listener send as the third parameter will only work with messages send from targetOrigin. listener parameter has to be a function that accepts one parameter of MessageEvent type with void return type.

const listener = (event) => {
    console.log(event);
    this.$('.response').val(JSON.stringify(event.data))
};

this.externalReference = getService(IExternalCommunicationService).openWindow("https://redapp-examples.cert.sabre.com/crosswindow/", "*", listener);

send as target origin allows this listener to work with every message that will be posted to/from SR360. This is *not secure approach and in production, code it should be set to the actual origin.

openWindow returns a function that then can be used to post data to opened website.

const payload: string = this.$('.payload-field').find('.payload').val();

this.externalReference(JSON.parse(payload));

External website

External website that has been opened using IExternalCommunicationService.openWindow method can acquire SR360 window using window.opener method. Then, thanks to this reference, messages can be sent to SR360 and handled using listener defined in Web Red App.

To listen to Redapp messages external website should implement it’s own listener using window.addEventListener('message', (event) ⇒ void) method.

window.opener.postMessage(JSON.parse(jsonString), "*");

window.addEventListener("message", event => {
    console.log(event);
    document.getElementById("incomingMessageBox").innerHTML = JSON.stringify(event.data);
});

Example

You can see com.sabre.redapp.example3.web.crosswindow sample for a showcase of cross-origin communication between Red App and external website.