How to use postmessage to solve cross domain communication issues. How to use the postmessage protocol inside backbone models.

1. Stay Out Please
Itai Koren | July 2013
Framework Frontend Team @LivePerson

2. Who am I?
Itai Koren
Tech-savvy Engineer @LivePerson
A Programmer
itaik@liveperson.com

3. Who am I?
“Programmer - an
organism that turns
coffee into software.” -
Author Unknown

4. Who am I?
~10 x Cups === feature

5. Who am I?
LivePerson Framework
Frontend Team

6. Today’s Web Applications
Today’s web
applications/platforms are
more than just websites

7. Today’s Web Applications
Javascript SDK’s/API’s

8. Today’s Web Applications

9. Today’s Web Applications

10. Today’s Web Applications

11. Today’s Web Applications

12. Today’s Web Applications
Widgets

13. Today’s Web Applications

14. Today’s Web Applications

15. Today’s Web Applications
“Learning JavaScript used to
mean you weren't a serious
software developer.
Today, not learning Javascript
means the same thing.” -
Jens Ohlig

16. Stay Out Please
XMLHttpRequest
api.lpprod.net
Backbone
jQuery as transport

17. Stay Out Please
S O Ptay ut leaseame rigin olicy

18. Same Origin Policy
• Important security concept within modern browsers
• Originally released with Netscape Navigator 2 (March 1996)
• Permits script tags, images, css from any site (origin)
• Permits XHR only from the same site (origin)
• Prevents access to most methods and properties across different sites
(origins)

19. Same Origin Policy
So which solution can we use?

20. Today’s Web Applications
“A good programmer is
someone who always looks
both ways before crossing a
one-way street.” - Doug
Linder

21. Same Origin Policy
We can always use JSONP
WOT?

22. JSONP
• Stands for JSON with Padding
• Script tags are exception to the Same Origin Policy
• Just loading a script with JSON data cannot help us (will be lost in the
global context)
• The padding allows us to wrap the result with a global callback
• The response will be evaluated by the JavaScript interpreter and invoked

23. JSONP
So, we can always use JSONP
BUT…

24. Why not use JSONP?
• Only valid for GET requests
• Limited payload size
• Not flexible (no headers etc.)
• Insecure
• Causes IE to leak memory (most implementations)

25. Same Origin Policy
What about CORS?

26. CORS
• Stands for Cross Origin Resource Sharing
• A W3C spec that allows cross-domain communication from the browser
• Defines a way to determine whether or not to allow the cross-origin
request
• Works by adding new HTTP headers

27. CORS
So what about CORS?

28. Why not use CORS?
• Only IE9+ support it natively (IE8 only via XDomainRequest)
• Requires “preflights” for requests other than GET or POST (with certain
MIME types) and for JSON.

29. Same Origin Policy
So, we will probably have to
use proxy
WAIT!!!

30. Stay Out Please
S O Ptay riginal leaseame rigin olicy

31. lpAjax to the rescue
• Developed in LivePerson
• Self contained (Vanilla JS)
• Easy to use
• Used by entire LivePerson clients as a transport layer
• Supports three main transport types: XHR, JSONP
AND
postMessage

32. Browser to server communications
url.com
api.liveperson.com
api.liveperson.com/pm.html
lpAjax postmessage client
pm.html
Postmessage server
xhr

33. lpAjax postMessage
• It works!!!
• Almost as fast as JSONP
• Can work with REST API’S
• Very small latency for first API call (iframe creation)
• Small latency for serialization of data for use with postMessage
• Beware: 401 Response Codes & failed requests issues

34. Browser Support
• Firefox >= 3
• Safari >= 4
• Chrome
• Opera >= 9
• IE >= 8

35. lpAjax postMessage
And there is even a
shim/polyfill for IE7
window.name… (limited to
2MB only )

36. lpAjax postMessage
Cool
I am convinced
BUT, how can I use it with
Backbone

37. Backbone with lpAjax postMessage
• Backbone utilizes jQuery as a transport
• jQuery allows us to manipulate ajax transports at multiple levels
• $.ajaxPrefilters - Handle custom options/modify existing options before
request is processed by $.ajax()
• $.ajaxTransport - Creates an object that handles the actual transmission
of Ajax data and used by $.ajax() to issue requests
• Converters – to manipulate and parse the data returned from the
response

38. Our custom ajaxPrefilter
// Register jQuery Ajax Prefilter that detects cross-domain requests and set the request data-type to "postmessage".
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
// Get our current origin
var originBrowser = window.location;
// Get the API url origin
var originApi = document.createElement("a");
originApi.href = options.url;
// Skip Same Origin API URL's
if (originApi.hostname == originBrowser.hostname &&
originApi.port == originBrowser.port &&
originApi.protocol == originBrowser.protocol) {
return;
}
// If the domains aren't the same and this isn't a jsonp request, force the data-type of the request to "postmessage".
if ("jsonp" !== options.dataType.toLowerCase()) {
// Redirect to our “postmessage” temporary transport type
return "postmessage";
}
});

39. Our ajaxTransport Implementation
// Create the postmessage transport handler (which will proxy the request to lpAjax) and register it for handling postmessage
// (the '+' forces overriding any existing implementations for a transport).
$.ajaxTransport("+postmessage", function (options, originalOptions, jqXHR) {
// Remove the temporary transport dataType
options.dataTypes.shift();
return {
send:function (requestHeaders, done) {
// Build the request object based on what jQuery created for us so far
var req = $.extend({}, lpTag.taglets.lpAjax_request);
req.headers = requestHeaders;
req.method = originalOptions.type;
req.data = originalOptions.data;
req.url = options.url;
// Implement the success and error handlers
req.success = function (data) {
handlePostMessageResponse(data, done);
};
req.error = function (data) {
handlePostMessageResponse(data, done);
};
// Issue the request using lpAjax postMessage.
lpAjax.postmessage.issueCall(req);
},
abort:function () {}
};
}));

40. Implement the response handler
// Create the response handler for lpAjax to call
var handlePostMessageResponse = function (data, done) {
// Do any parsing on the response if needed - Here I do nothing for simplicity
// Now call the jQuery callback to return the response to jQuery handling
done(
data.code, // status,
data.status, // nativeStatusText,
data.body, // responses,
data.headers // headers
);
};

41. Backbone with lpAjax postMessage
“If you can’t explain it simply,
you don’t understand it well
enough.” -Leonardo Da Vinci

42. Q&A
itaik@liveperson.com
Want to work on cool stuff like this?
Questions?

43. Thank You