Breadcrumb
- Sabre Red 360 Software Development Kit Help
- Web Red Apps
- Red App Cookbooks
- External website communication
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.