Downloaded 27 times
Uploaded byChenKuo Chen
Javascript cross domain communication
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.
More Related Content
Similar to Javascript cross domain communication
Javascript cross domain communication
- 1.
- 2. Outline ● Why weneed 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 NeedCross-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.
- 6.
- 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 ● JSto JS (Cross window communication): ○ Iframe ○ postmessage ● Following example will use www.A.com and www.B.com
- 9. Iframe ● You haveto 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 embemdedin A.com.
- 11. Iframe If B.com wantto talk to A.com. Create a child iframe with url: www.A.com/#data
- 12. Iframe Outer window A.comcan 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 browserversion 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 javascriptAPI. ● 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 haveto 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 ● JSto 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 scripttag ○ 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.
- 22. Jsonp ● Easy touse for data passing. ● jQuery implement jsonp into it ajax method. ○ Need specify datatype as ‘jsonp’
- 23. CORS Header ● Cross-OriginResource 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 ● Serverside 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 ● Serverside 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 ● Serverside 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.
- 28.