This document discusses methods for enabling cross-domain communication in JavaScript. It begins by explaining the need for cross-domain communication to access third-party APIs and the browser's same-origin policy security restriction. It then describes several approaches for implementing cross-domain communication including using iframes, the postMessage API for cross-window messaging, server-side proxies, JSONP, and the CORS HTTP header for enabling cross-origin requests directly in JavaScript.

1. Javascript Cross-Domain
Communication
NIT-Jasper

2. 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

3. Why We Need Cross-Domain
Communication?
● Third party API
○ JS API
■ ex: Facebook SDK
○ Server side API
■ ex: Flickr API

4. 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.

5. Same Origin Policy
Ajax:

6. Same Origin Policy
Ajax:

7. 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

8. Cross-Domain Methods
● JS to JS (Cross window communication):
○ Iframe
○ postmessage
● Following example will use www.A.com and www.B.com

9. 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.

10. Iframe
B.com is embemded in A.com.

11. Iframe
If B.com want to talk to A.com.
Create a child iframe with url:
www.A.com/#data

12. Iframe
Outer 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 listener
for iframe size change.

13. 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???

14. 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

15. 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

16. 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.

17. Server Side Proxy
● A workaround to avoid same origin policy of browser.

18. Server Side Proxy
● A workaround to avoid same origin policy of browser.

19. Server Side Proxy
● Disadvantage:
○ Increase backend server loading.
○ a little complicated to implement.

20. 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.

21. Jsonp
Example:

22. Jsonp
● Easy to use for data passing.
● jQuery implement jsonp into it ajax method.
○ Need specify datatype as ‘jsonp’

23. 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

24. 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 *

25. 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, ...

26. 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.

27. CORS Header
Example response:

28. Thanks
Q & A