Peter Lubbers - Pro HTML 5 Programming

136
CHAPTER 5 ■ USING THE COMMUNICATION APIS
Listing 5-10. Using postMessage in an iframe to handshake with a trusted partner page
var framebustTimer;
var timeout = 3000; // 3 second framebust timeout
if (window !== window.top) {
framebustTimer = setTimeout(
function() {
window.top.location = location;
}, timeout);
}
window.addEventListener(“message”, function(e) {
switch(e.origin) {
case trustedFramer:
clearTimeout(framebustTimer);
break;
}
), true);
Summary
In this chapter, you have seen how HTML5 Cross Document Messaging and XMLHttpRequest Level 2
can be used to create compelling applications that can securely communicate cross-origin.
First, we discussed postMessage and the origin security concept—two key elements of HTML5
communication—and then we showed you how the postMessage API can be used to communicate
between iframes, tabs, and windows.
Next, we discussed XMLHttpRequest Level 2—an improved version of XMLHttpRequest. We
showed you in which areas XMLHttpRequest has been improved; most importantly in the
readystatechange events area. We then showed you how you can use XMLHttpRequest to make crossorigin
requests and how to use the new progress events.
Finally, we wrapped up the chapter with a few practical examples. In the next chapter, we’ll
demonstrate how HTML5 WebSockets enables you to stream real-time data to an application with
incredible simplicity and minimal overhead.