SlideShare uma empresa Scribd logo
1 de 43
Baixar para ler offline
Stay Out Please
Itai Koren | July 2013
Framework Frontend Team @LivePerson
Who am I?
Itai Koren
Tech-savvy Engineer @LivePerson
A Programmer
itaik@liveperson.com
Who am I?
“Programmer - an
organism that turns
coffee into software.” -
Author Unknown
Who am I?
~10 x Cups === feature
Who am I?
LivePerson Framework
Frontend Team
Today’s Web Applications
Today’s web
applications/platforms are
more than just websites
Today’s Web Applications
Javascript SDK’s/API’s
Today’s Web Applications
Today’s Web Applications
Today’s Web Applications
Today’s Web Applications
Today’s Web Applications
Widgets
Today’s Web Applications
Today’s Web Applications
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
Stay Out Please
XMLHttpRequest
api.lpprod.net
Backbone
jQuery as transport
Stay Out Please
S O Ptay ut leaseame rigin olicy
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)
Same Origin Policy
So which solution can we use?
Today’s Web Applications
“A good programmer is
someone who always looks
both ways before crossing a
one-way street.” - Doug
Linder
Same Origin Policy
We can always use JSONP
WOT?
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
JSONP
So, we can always use JSONP
BUT…
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)
Same Origin Policy
What about CORS?
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
CORS
So what about CORS?
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.
Same Origin Policy
So, we will probably have to
use proxy
WAIT!!!
Stay Out Please
S O Ptay riginal leaseame rigin olicy
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
Browser to server communications
url.com
api.liveperson.com
api.liveperson.com/pm.html
lpAjax postmessage client
pm.html
Postmessage server
xhr
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
Browser Support
• Firefox >= 3
• Safari >= 4
• Chrome
• Opera >= 9
• IE >= 8
lpAjax postMessage
And there is even a
shim/polyfill for IE7
window.name… (limited to
2MB only )
lpAjax postMessage
Cool
I am convinced
BUT, how can I use it with
Backbone
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
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";
}
});
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 () {}
};
}));
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
);
};
Backbone with lpAjax postMessage
“If you can’t explain it simply,
you don’t understand it well
enough.” -Leonardo Da Vinci
Q&A
itaik@liveperson.com
Want to work on cool stuff like this?
Questions?
Thank You

Mais conteúdo relacionado

Mais procurados

Real World Fun with ActiveResource
Real World Fun with ActiveResourceReal World Fun with ActiveResource
Real World Fun with ActiveResourceRob C
 
Ancient To Modern: Upgrading nearly a decade of Plone in public radio
Ancient To Modern: Upgrading nearly a decade of Plone in public radioAncient To Modern: Upgrading nearly a decade of Plone in public radio
Ancient To Modern: Upgrading nearly a decade of Plone in public radioCristopher Ewing
 
Consuming REST services with ActiveResource
Consuming REST services with ActiveResourceConsuming REST services with ActiveResource
Consuming REST services with ActiveResourceWolfram Arnold
 
I18nize Scala programs à la gettext
I18nize Scala programs à la gettextI18nize Scala programs à la gettext
I18nize Scala programs à la gettextNgoc Dao
 
Building an API with Django and Django REST Framework
Building an API with Django and Django REST FrameworkBuilding an API with Django and Django REST Framework
Building an API with Django and Django REST FrameworkChristopher Foresman
 
REST and ASP.NET Web API (Milan)
REST and ASP.NET Web API (Milan)REST and ASP.NET Web API (Milan)
REST and ASP.NET Web API (Milan)Jef Claes
 
Skinny Framework Progress Situation
Skinny Framework Progress SituationSkinny Framework Progress Situation
Skinny Framework Progress SituationKazuhiro Sera
 
REST Easy - Building RESTful Services in Zend Framework
REST Easy - Building RESTful Services in Zend FrameworkREST Easy - Building RESTful Services in Zend Framework
REST Easy - Building RESTful Services in Zend FrameworkChris Weldon
 
Flickr Architecture Presentation
Flickr Architecture PresentationFlickr Architecture Presentation
Flickr Architecture Presentationeraz
 
REST Easy with AngularJS - ng-grid CRUD EXAMPLE
REST Easy with AngularJS - ng-grid CRUD EXAMPLEREST Easy with AngularJS - ng-grid CRUD EXAMPLE
REST Easy with AngularJS - ng-grid CRUD EXAMPLEreneechemel
 
Introduction to RESTful Webservices in JAVA
Introduction to RESTful Webservices  in JAVA Introduction to RESTful Webservices  in JAVA
Introduction to RESTful Webservices in JAVA psrpatnaik
 
RESTFul development with Apache sling
RESTFul development with Apache slingRESTFul development with Apache sling
RESTFul development with Apache slingSergii Fesenko
 
Automating Your Daily Tasks with Scripting - RubyConf 2015 Taiwan
Automating Your Daily Tasks with Scripting - RubyConf 2015 TaiwanAutomating Your Daily Tasks with Scripting - RubyConf 2015 Taiwan
Automating Your Daily Tasks with Scripting - RubyConf 2015 TaiwanAdler Hsieh
 
Dynamic content generation
Dynamic content generationDynamic content generation
Dynamic content generationEleonora Ciceri
 
Jinx - Malware 2.0
Jinx - Malware 2.0Jinx - Malware 2.0
Jinx - Malware 2.0Itzik Kotler
 
Django rest framework
Django rest frameworkDjango rest framework
Django rest frameworkBlank Chen
 
Developing OpenResty Framework
Developing OpenResty FrameworkDeveloping OpenResty Framework
Developing OpenResty FrameworkOpenRestyCon
 
Designing REST services with Spring MVC
Designing REST services with Spring MVCDesigning REST services with Spring MVC
Designing REST services with Spring MVCSerhii Kartashov
 

Mais procurados (20)

Real World Fun with ActiveResource
Real World Fun with ActiveResourceReal World Fun with ActiveResource
Real World Fun with ActiveResource
 
Ancient To Modern: Upgrading nearly a decade of Plone in public radio
Ancient To Modern: Upgrading nearly a decade of Plone in public radioAncient To Modern: Upgrading nearly a decade of Plone in public radio
Ancient To Modern: Upgrading nearly a decade of Plone in public radio
 
Consuming REST services with ActiveResource
Consuming REST services with ActiveResourceConsuming REST services with ActiveResource
Consuming REST services with ActiveResource
 
I18nize Scala programs à la gettext
I18nize Scala programs à la gettextI18nize Scala programs à la gettext
I18nize Scala programs à la gettext
 
Building an API with Django and Django REST Framework
Building an API with Django and Django REST FrameworkBuilding an API with Django and Django REST Framework
Building an API with Django and Django REST Framework
 
REST and ASP.NET Web API (Milan)
REST and ASP.NET Web API (Milan)REST and ASP.NET Web API (Milan)
REST and ASP.NET Web API (Milan)
 
Skinny Framework Progress Situation
Skinny Framework Progress SituationSkinny Framework Progress Situation
Skinny Framework Progress Situation
 
REST Easy - Building RESTful Services in Zend Framework
REST Easy - Building RESTful Services in Zend FrameworkREST Easy - Building RESTful Services in Zend Framework
REST Easy - Building RESTful Services in Zend Framework
 
Flickr Architecture Presentation
Flickr Architecture PresentationFlickr Architecture Presentation
Flickr Architecture Presentation
 
REST Easy with AngularJS - ng-grid CRUD EXAMPLE
REST Easy with AngularJS - ng-grid CRUD EXAMPLEREST Easy with AngularJS - ng-grid CRUD EXAMPLE
REST Easy with AngularJS - ng-grid CRUD EXAMPLE
 
Introduction to RESTful Webservices in JAVA
Introduction to RESTful Webservices  in JAVA Introduction to RESTful Webservices  in JAVA
Introduction to RESTful Webservices in JAVA
 
RESTFul development with Apache sling
RESTFul development with Apache slingRESTFul development with Apache sling
RESTFul development with Apache sling
 
Automating Your Daily Tasks with Scripting - RubyConf 2015 Taiwan
Automating Your Daily Tasks with Scripting - RubyConf 2015 TaiwanAutomating Your Daily Tasks with Scripting - RubyConf 2015 Taiwan
Automating Your Daily Tasks with Scripting - RubyConf 2015 Taiwan
 
Rest with Spring
Rest with SpringRest with Spring
Rest with Spring
 
Dynamic content generation
Dynamic content generationDynamic content generation
Dynamic content generation
 
Jinx - Malware 2.0
Jinx - Malware 2.0Jinx - Malware 2.0
Jinx - Malware 2.0
 
Django rest framework
Django rest frameworkDjango rest framework
Django rest framework
 
Angularjs & REST
Angularjs & RESTAngularjs & REST
Angularjs & REST
 
Developing OpenResty Framework
Developing OpenResty FrameworkDeveloping OpenResty Framework
Developing OpenResty Framework
 
Designing REST services with Spring MVC
Designing REST services with Spring MVCDesigning REST services with Spring MVC
Designing REST services with Spring MVC
 

Destaque

Most dangerous searchterm_us
Most dangerous searchterm_usMost dangerous searchterm_us
Most dangerous searchterm_usAngeline KH
 
IT103Microsoft Windows XP/OS Chap08
IT103Microsoft Windows XP/OS Chap08IT103Microsoft Windows XP/OS Chap08
IT103Microsoft Windows XP/OS Chap08blusmurfydot1
 
IT103Microsoft Windows XP/OS Chap11
IT103Microsoft Windows XP/OS Chap11IT103Microsoft Windows XP/OS Chap11
IT103Microsoft Windows XP/OS Chap11blusmurfydot1
 
IT103Microsoft Windows XP/OS Chap13
IT103Microsoft Windows XP/OS Chap13IT103Microsoft Windows XP/OS Chap13
IT103Microsoft Windows XP/OS Chap13blusmurfydot1
 
DTA 2011 REV B
DTA 2011 REV BDTA 2011 REV B
DTA 2011 REV Btynanderek
 
IT103Microsoft Windows XP/OS Chap14
IT103Microsoft Windows XP/OS Chap14IT103Microsoft Windows XP/OS Chap14
IT103Microsoft Windows XP/OS Chap14blusmurfydot1
 
Aparato circulatorio
Aparato circulatorioAparato circulatorio
Aparato circulatorioEuler Ruiz
 
La energia y la relacion con el desarrollo tecnologico
La energia y la relacion con el desarrollo tecnologicoLa energia y la relacion con el desarrollo tecnologico
La energia y la relacion con el desarrollo tecnologicoEuler Ruiz
 
IT109 Microsoft Windows 7 Operating Systems Unit 07 lesson 10
IT109 Microsoft Windows 7 Operating Systems Unit 07 lesson 10IT109 Microsoft Windows 7 Operating Systems Unit 07 lesson 10
IT109 Microsoft Windows 7 Operating Systems Unit 07 lesson 10blusmurfydot1
 
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 07
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 07IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 07
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 07blusmurfydot1
 
Assistive technology
Assistive technologyAssistive technology
Assistive technologykturne10
 
El pensamiento positivo y la mente humana
El pensamiento positivo y la mente humanaEl pensamiento positivo y la mente humana
El pensamiento positivo y la mente humanaEuler Ruiz
 
La computadora
La computadoraLa computadora
La computadorasilovera
 
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 08
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 08IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 08
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 08blusmurfydot1
 
Zonas erroneas y la salud mental
Zonas erroneas y la salud mentalZonas erroneas y la salud mental
Zonas erroneas y la salud mentalEuler Ruiz
 
Building Advanced Web UI in The Enterprise World
Building Advanced Web UI in The Enterprise WorldBuilding Advanced Web UI in The Enterprise World
Building Advanced Web UI in The Enterprise Worldefim13
 
Parking hormigon prefabricado
Parking hormigon prefabricadoParking hormigon prefabricado
Parking hormigon prefabricadoCAMPUS11
 
Itt operating systems unit 05 lesson 06
Itt operating systems unit 05 lesson 06Itt operating systems unit 05 lesson 06
Itt operating systems unit 05 lesson 06blusmurfydot1
 

Destaque (20)

Most dangerous searchterm_us
Most dangerous searchterm_usMost dangerous searchterm_us
Most dangerous searchterm_us
 
IT103Microsoft Windows XP/OS Chap08
IT103Microsoft Windows XP/OS Chap08IT103Microsoft Windows XP/OS Chap08
IT103Microsoft Windows XP/OS Chap08
 
IT103Microsoft Windows XP/OS Chap11
IT103Microsoft Windows XP/OS Chap11IT103Microsoft Windows XP/OS Chap11
IT103Microsoft Windows XP/OS Chap11
 
IT103Microsoft Windows XP/OS Chap13
IT103Microsoft Windows XP/OS Chap13IT103Microsoft Windows XP/OS Chap13
IT103Microsoft Windows XP/OS Chap13
 
DTA 2011 REV B
DTA 2011 REV BDTA 2011 REV B
DTA 2011 REV B
 
IT103Microsoft Windows XP/OS Chap14
IT103Microsoft Windows XP/OS Chap14IT103Microsoft Windows XP/OS Chap14
IT103Microsoft Windows XP/OS Chap14
 
Aparato circulatorio
Aparato circulatorioAparato circulatorio
Aparato circulatorio
 
La energia y la relacion con el desarrollo tecnologico
La energia y la relacion con el desarrollo tecnologicoLa energia y la relacion con el desarrollo tecnologico
La energia y la relacion con el desarrollo tecnologico
 
Organizadores
OrganizadoresOrganizadores
Organizadores
 
IT109 Microsoft Windows 7 Operating Systems Unit 07 lesson 10
IT109 Microsoft Windows 7 Operating Systems Unit 07 lesson 10IT109 Microsoft Windows 7 Operating Systems Unit 07 lesson 10
IT109 Microsoft Windows 7 Operating Systems Unit 07 lesson 10
 
Javascript for Wep Apps
Javascript for Wep AppsJavascript for Wep Apps
Javascript for Wep Apps
 
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 07
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 07IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 07
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 07
 
Assistive technology
Assistive technologyAssistive technology
Assistive technology
 
El pensamiento positivo y la mente humana
El pensamiento positivo y la mente humanaEl pensamiento positivo y la mente humana
El pensamiento positivo y la mente humana
 
La computadora
La computadoraLa computadora
La computadora
 
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 08
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 08IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 08
IT109 Microsoft Windows 7 Operating Systems Unit 06 lesson 08
 
Zonas erroneas y la salud mental
Zonas erroneas y la salud mentalZonas erroneas y la salud mental
Zonas erroneas y la salud mental
 
Building Advanced Web UI in The Enterprise World
Building Advanced Web UI in The Enterprise WorldBuilding Advanced Web UI in The Enterprise World
Building Advanced Web UI in The Enterprise World
 
Parking hormigon prefabricado
Parking hormigon prefabricadoParking hormigon prefabricado
Parking hormigon prefabricado
 
Itt operating systems unit 05 lesson 06
Itt operating systems unit 05 lesson 06Itt operating systems unit 05 lesson 06
Itt operating systems unit 05 lesson 06
 

Semelhante a Stay Out Please

Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web applicationOliver N
 
Developing Rich Internet Applications with Perl and JavaScript
Developing Rich Internet Applications with Perl and JavaScriptDeveloping Rich Internet Applications with Perl and JavaScript
Developing Rich Internet Applications with Perl and JavaScriptnohuhu
 
AJAX
AJAXAJAX
AJAXARJUN
 
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...chbornet
 
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Ran Mizrahi
 
Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Ran Mizrahi
 
Arabidopsis Information Portal, Developer Workshop 2014, Introduction
Arabidopsis Information Portal, Developer Workshop 2014, IntroductionArabidopsis Information Portal, Developer Workshop 2014, Introduction
Arabidopsis Information Portal, Developer Workshop 2014, IntroductionJasonRafeMiller
 
PLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring SurfPLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring SurfAlfresco Software
 
PLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring SurfPLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring SurfAlfresco Software
 
Building APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformBuilding APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformAntonio Peric-Mazar
 
Angular jS Introduction by Google
Angular jS Introduction by GoogleAngular jS Introduction by Google
Angular jS Introduction by GoogleASG
 
RESTful API-centric Universe
RESTful API-centric UniverseRESTful API-centric Universe
RESTful API-centric UniverseTihomir Opačić
 

Semelhante a Stay Out Please (20)

Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web application
 
PHP - Introduction to PHP AJAX
PHP -  Introduction to PHP AJAXPHP -  Introduction to PHP AJAX
PHP - Introduction to PHP AJAX
 
Developing Rich Internet Applications with Perl and JavaScript
Developing Rich Internet Applications with Perl and JavaScriptDeveloping Rich Internet Applications with Perl and JavaScript
Developing Rich Internet Applications with Perl and JavaScript
 
AJAX
AJAXAJAX
AJAX
 
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
 
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)
 
Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
 
Ajax
AjaxAjax
Ajax
 
Arabidopsis Information Portal, Developer Workshop 2014, Introduction
Arabidopsis Information Portal, Developer Workshop 2014, IntroductionArabidopsis Information Portal, Developer Workshop 2014, Introduction
Arabidopsis Information Portal, Developer Workshop 2014, Introduction
 
PLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring SurfPLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring Surf
 
PLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring SurfPLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring Surf
 
Building Client-Side Attacks with HTML5 Features
Building Client-Side Attacks with HTML5 FeaturesBuilding Client-Side Attacks with HTML5 Features
Building Client-Side Attacks with HTML5 Features
 
Building APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformBuilding APIs in an easy way using API Platform
Building APIs in an easy way using API Platform
 
ITT Flisol 2013
ITT Flisol 2013ITT Flisol 2013
ITT Flisol 2013
 
Varun-CV-J
Varun-CV-JVarun-CV-J
Varun-CV-J
 
Angular jS Introduction by Google
Angular jS Introduction by GoogleAngular jS Introduction by Google
Angular jS Introduction by Google
 
Intro to CakePHP
Intro to CakePHPIntro to CakePHP
Intro to CakePHP
 
Firefox OS Weekend
Firefox OS WeekendFirefox OS Weekend
Firefox OS Weekend
 
REST easy with API Platform
REST easy with API PlatformREST easy with API Platform
REST easy with API Platform
 
RESTful API-centric Universe
RESTful API-centric UniverseRESTful API-centric Universe
RESTful API-centric Universe
 

Último

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 

Último (20)

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 

Stay Out Please

  • 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
  • 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
  • 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
  • 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?

Notas do Editor

  1. Ido
  2. IE<=8 leaks 4kb each request
  3. IE<=8 leaks 4kb each request
  4. IE<=8 leaks 4kb each request
  5. Creates each domain iframe only onceThere are browsers which already support postMessage with objects (with no need for serialization)401 response code will cause the browser to pop up an authentication (can be fixed by overriding the default WWW-Authenticate: Basic realm=“xxx”header) 8 consecutive failed requests from the same iframe will abort the iframe usage
  6. Creates each domain iframe only onceThere are browsers which already support postMessage with objects (with no need for serialization)401 response code will cause the browser to pop up an authentication (can be fixed by overriding the default WWW-Authenticate: Basic realm=“xxx”header) 8 consecutive failed requests from the same iframe will abort the iframe usage
  7. Creates each domain iframe only onceThere are browsers which already support postMessage with objects (with no need for serialization)401 response code will cause the browser to pop up an authentication (can be fixed by overriding the default WWW-Authenticate: Basic realm=“xxx”header) 8 consecutive failed requests from the same iframe will abort the iframe usage
  8. Creates each domain iframe only onceThere are browsers which already support postMessage with objects (with no need for serialization)401 response code will cause the browser to pop up an authentication (can be fixed by overriding the default WWW-Authenticate: Basic realm=“xxx”header) 8 consecutive failed requests from the same iframe will abort the iframe usage
  9. Creates each domain iframe only onceThere are browsers which already support postMessage with objects (with no need for serialization)401 response code will cause the browser to pop up an authentication (can be fixed by overriding the default WWW-Authenticate: Basic realm=“xxx”header) 8 consecutive failed requests from the same iframe will abort the iframe usage