Peter Lubbers - Pro HTML 5 Programming

CHAPTER 5 ■ USING THE COMMUNICATION APIS
In this example, we show how a portal might embed widgets from third parties in iframes. Our
example shows a single widget from chat.example.net. The portal page and widget then communicate
using postMessage. In this case, the iframe represents a chat widget that wants to notify the user by
blinking the title text. This is a common UI technique found in applications that receive events in the
background. However, because the widget is isolated in an iframe served from a different origin than the
parent page, changing the title would be a security violation. Instead, the widget uses postMessage to
request that the parent page perform the notification on its behalf.
The example portal also sends messages to the iframe to inform the widget that the user has
changed his or her status. Using postMessage in this way allows a portal such as this to coordinate with
widgets across the combined application. Of course, because the target origin is checked when the
message is sent, and the event origin is checked when it is received, there is no chance that data leaks
out accidentally or is spoofed.
■ Note In this example application, the chat widget is not connected to a live chat system, and notifications are
driven by the application’s users clicking Send Notification. A working chat application could use Web Sockets,
as described in Chapter 6.
For the sake of illustration, we created a few simple HTML pages: postMessagePortal.html and
postMessageWidget.html. The following steps highlight the important parts of building the portal page
and the chat widget page. The sample code for the following examples is located in the
code/communication folder.
Building the Portal Page
First, add the chat widget iframe hosted at the different origin:
Next, add an event listener messageHandler to listen for message events coming from the chat
widget. As shown in the following example code, the widget will ask the portal to notify the user, which
can be done by flashing the title. To make sure the message comes from the chat widget, the message’s
origin is verified; if it does not come from http://chat.example.net:9999, the portal page simply ignores
it.
var targetOrigin = "http://chat.example.net:9999";
function messageHandler(e) {
if (e.origin == targetOrigin) {
notify(e.data);
} else {
// ignore messages from other origins
}
}
121