stay out please

Download Stay Out Please

Post on 15-Jan-2015




0 download

Embed Size (px)


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 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. Todays Web Applications Todays web applications/platforms are more than just websites 7. Todays Web Applications Javascript SDKs/APIs 8. Todays Web Applications 9. Todays Web Applications 10. Todays Web Applications 11. Todays Web Applications 12. Todays Web Applications Widgets 13. Todays Web Applications 14. Todays Web Applications 15. Todays 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 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. Todays 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 lpAjax postmessage client pm.html Postmessage server xhr 33. lpAjax postMessage It works!!! Almost as fast as JSONP Can work with REST APIS 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 (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.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 cant explain it simply, you dont understand it well enough. -Leonardo Da Vinci 42. Q&A Want to work on cool stuff like this? Questions? 43. Thank You


View more >