javascript cross domain communication
TRANSCRIPT
Javascript Cross-Domain CommunicationNIT-Jasper
Outline● Why we need cross-domain communication?● Same origin policy.● Cross-domain methods
○ JS to JS■ Iframe■ postmessage
○ JS to Server side ■ Server side proxy■ jsonp■ HTTP cross domain header - CORS
Why We Need Cross-Domain Communication?
● Third party API○ JS API
■ ex: Facebook SDK○ Server side API
■ ex: Flickr API
Same Origin Policy● Browser restricts how a document/script interact with
one from another origin.○ Security concerns:
■ like CSRF attack.○ Some cross-origin resources are allowed:
■ stylesheets■ script■ frame/iframe(can be disabled by X-Frame-Options)
○ For XMLHttpRequest(Ajax):■ Url which Ajax called must be in the same origin in current
page.
Same Origin PolicyAjax:
Same Origin PolicyAjax:
Same Origin Policy● Origin example:
URL Outcome Reason
http://store.company.com/dir2/other.html
http://store.company.com/dir/inner/another.html same origin
https://store.company.com/secure.html different origin protocol
http://store.company.com:81/dir/etc.html different origin port
http://news.company.com/dir/other.html different origin url
Cross-Domain Methods● JS to JS (Cross window communication):
○ Iframe ○ postmessage
● Following example will use www.A.com and www.B.com
Iframe● You have to control both www.A.com and www.B.com.● Constrains about iframe:
○ A parent window cannot read anything from child iframe with different domain.
○ A parent window can read/write properties of an iframe if they are on the same domain. Even it is inside other iframes that isn’t on the same domain.
○ A parent window can traverse known elements in an iframe.■ windows.Bframe.Aframe.XXX
○ A parent window can determine the url when creating the iframe.
IframeB.com is embemded in A.com.
IframeIf B.com want to talk to A.com.Create a child iframe with url:www.A.com/#data
IframeOuter window A.com can read the location hash of that iframe.windows.Bframe.Aframe.location.hash
To get the inner iframe:● polling for the iframe● resize the iframe when data
changed. Attach an event listenerfor iframe size change.
Iframe● No browser version limit, it works on IE/Chrome/Firefox
of almost every versions.● More like a HACK.● Facebook SDK use it as a final method if postmessage
doesn’t work.
So what is postmessage???
Postmessage● A javascript API.● A method of window object.● Very easy to use.● Browser support:
IE Chrome FireFox Opera Safari
8.0 1.0 6.0 9.5 4.0
Postmessage● You have to control both windowA(www.A.com) and
window B(www.B.com).● Basic Usage:
This window is instance of window A
Cross-Domain Methods● JS to Server:
○ Server side proxy○ jsonp○ HTTP CORS header
● Following example will use www.A.com and www.B.com● Client script on A.com want to acces API in B.com.
Server Side Proxy● A workaround to avoid same origin policy of browser.
Server Side Proxy● A workaround to avoid same origin policy of browser.
Server Side Proxy● Disadvantage:
○ Increase backend server loading.○ a little complicated to implement.
Jsonp● Use script tag
○ Script tag is not restricted by same origin policy.○ Script tag imports an embedded script.○ Server side can return a piece of scripts including
json data.
JsonpExample:
Jsonp● Easy to use for data passing.● jQuery implement jsonp into it ajax method.
○ Need specify datatype as ‘jsonp’
CORS Header● Cross-Origin Resource Sharing(CORS) is a W3C draft
which define rules for browser and server cross-origin communication.
● Simple request: Only use GET, HEAD, POST● Preflighted request: method other than GET, HEAD,
POST
CORS Header● Server side response with CORS header:
○ "Access-Control-Allow-Origin" ■ A white list for domains which are allow to communicate with this
server.■ Access-Control-Allow-Origin: http://www.synolog.com■ Access-Control-Allow-Origin *
CORS Header● Server side response with CORS header:
○ "Access-Control-Allow-Methods"■ Methods are allowed to used in preflighted request.■ Access-Control-Allow-Methods: GET, HEAD, POST, ...
CORS Header● Server side response with CORS header:
○ "Access-Control-Allow-Credentials"■ Determine whether an ajax can do withCredentails request
● a withCredentail=true ajax request will send with cookies
and authorization headers. In other words, cookies will send to a side with different domain.
■ If ajax send request with “withCredentaila=true” and server response access-control-allow-credentials:false, browser will reject this response.
■ Access-Control-Allow-Origin cannot be wildcard(*) when ajax call with withCredentail=true.
CORS HeaderExample response:
ThanksQ & A