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