Cross-Site Ajax Challenges and Techniques for Building Rich Web 2. 0 Mashups Joseph Smarr Plaxo, Inc. joseph@plaxo. com
The promise of mashups • Create new experiences by combining components from different authors – Each site focuses on what it does best – Can wire up components in a novel way • Google maps + Craigslist = Housing. Maps • Rich interaction often requires talking back and forth between components – House’s address lat / long map it 2
Talking between web components • Normal situation: all on the same web site – Communicate across frames / iframes / popups – Talk to server using AJAX (XMLHttp. Request) • Problem: doesn’t work when components live at different domains (mashup situation) – Same-origin policy • Can include Java. Script / images from another domain • Can’t talk to frame / iframe popup or send an XHR • Prevents snooping on secret web pages (e. g. intranet) 3
Domain B • CAN include image / Java. Script / CSS from Domain B • CAN send XMLHttp. Request to Domain A • CAN talk to other frames / iframes / popups on Domain A Image • CAN'T send XMLHttp. Request to Domain B • CAN'T talk to other frames / iframes / popups on Domain B XHR • CAN talk to other pages on Domain A • CAN’T talk to any page on Domain A CSS Java. Script XML / Web Page • So, how do mashups communicate? 4
How do mashups communicate? • Often, they don’t (Google maps 1. 0) – Single Java. Script all processing done locally • Plotting lat/long or fetching image tiles is deterministic – Can’t get any additional data (e. g. geo-coding) • Server-side proxy (Housing. Maps, Flickr) – Talk to your server it talks to the foreign site – Problem: bottleneck; barrier to mass deployment 5
Server-side proxy Server Domain A Domain B Web Page Domain A 6
How do mashups communicate? • Often, they don’t (Google maps 1. 0) – Single Java. Script all processing done locally • Plotting lat/long or fetching image tiles is deterministic – Can’t get any additional data (e. g. geo-coding) • Server-side proxy (Housing. Maps, Flickr) – Talk to your server it talks to the foreign site – Problem: bottleneck; barrier to mass deployment • Use flash for cross-domain communication – Can use crossdomain. xml to allow foreign sites – Yahoo maps uses this to do geo-coding 7
Flash proxy Server Domain B crossdomain. xml Web Page Domain A Flash 8
How do mashups communicate? • JSON-P (Script injection + callback) – Dynamically load Java. Script file with data • Use DHTML to inject a <script> tag in the document • Data is returned in JSON (Java. Script data format) – Clever trick: specify callback function on URL • foreign-site. com/json-api. js? callback=my. Func • Loads my. Func({ data: “hello” }); round-trip! – Works well in practice, but some drawbacks • Limited control vs. XHR (just loads or doesn’t) • API provider can return malicious code (e. g. steal cookies) 9
JSON-P Server Domain B JSON + callback Web Page Domain A <script> 10
Using JSON-P in OO web apps • Problem: callback function has to be global – Complex code maintains state / instances – Would like to handle callback with instance function on instantiated object • Solution: bind the callback dynamically – Create a globally-unique function name • Usually global prefix + auto-incremented counter – Use a closure to call your function in object-scope – Send the global function name as callback it calls your scoped function 11
Dynamically binding a global callback var cb. Name = 'cb' + JSON. callback. Counter++; var cb. Func = function(json. Data) { my. Func. call(my. Obj, json. Data); // call bound callback }; JSON. callbacks[cb. Name] = cb. Func; var global. Callback. Name = ‘JSON. callbacks. ’ + cb. Name // url: '/json-api. js? callback=' + global. Callback. Name; • Used by dojo (Script. Src. IO), Google Maps 2. 5, Plaxo, etc. 12
Summary of cross-site techniques so far • No cross-site communication – Include partner’s JS file once (can’t talk again) • Server-side proxy – Talk on the backend (bottleneck, barrier to adoption) • Flash proxy – Talk through cross-domain flash (requires flash) • JSON-P – Talk through script-injection with callback (less control, partner could be malicious) 13
What about updating another web page? • Proxies / JSON-P let you access foreign data – But still can’t touch a foreign frame/iframe/popup • Many potential mashups would like to interact with existing web pages – Auto-fill a form with your contact info – Highlight relevant search results / text snippets • How can two sites that want to cooperate get around the same-origin policy? 14
15
What does the partner site have to do? • Add the button to your page <a onclick="show. Plaxo. ABChooser('textarea', '/cb. html'); return false" href="#"> <img src="http: //www. plaxo. com/images/abc/buttons /add_button. gif" alt="Add from my address book" /></a> – Specify the ID of your e-mail <textarea> – Specify the location of your hidden callback page • Add a small callback page on your site <html><head><script type="text/javascript" src="https: //www. plaxo. com/ab_chooser/abc_comm. jsdyn"> </script></head><body></html> • Full instructions and demo: http: //www. plaxo. com/api 16
What does Plaxo have to do? • Remember: Plaxo filled in a textarea on zazzle! – Need to get around same-origin policy – Without server-side proxy (JS/HTML only) • JSON-P won’t solve this problem – Widget popup is hosted by Plaxo and goes thru several steps – Zazzle doesn’t know when to request the contact data • Solution: “The Java. Script Wormhole” – Add hidden callback page on zazzle that includes Plaxo script – Plaxo popup loads callback in an iframe when done – Script is dynamically generated, and includes selected data – IFrame is also on zazzle (and has the data), so it can tell parent. opener to fill in the textfield 17
zazzle. com/email_this plaxo. com/ab_chooser Iframe: zazzle. com/cb. html Script: plaxo. com/ab_chooser/abc_comm. jsdyn 18
Who’s using the Plaxo widget? • See more at http: //www. plaxo. com/api/gallery • Using the widget? Let us know! 19
Generalizing the Java. Script Wormhole • Site has a generic callback page to give you access – Site tells you the location of their callback page – Callback page loads your domain’s Java. Script • Java. Script is dynamically generated to include your data • Can pass script url with query args to callback page – /cb. html? http: //foreign-site. com/json-api. js? name=val – Access query string on cb page with location. search • Site can restrict callback page to trusted hosts – Only load script if it’s on a trusted domain – Could further restrict to certain URL prefixes, etc. 20
<html><head><title>Generalized Java. Script Wormhole</title> <script type="text/javascript"> var trusted. Domains = [ "http: //www. plaxo. com/api/", "http: //www. google. com/" ]; function is. Trusted. Domain(url) { for (var i = 0; i < trusted. Domains. length; i++) if (url. index. Of(trusted. Domains[i]) == 0) return true; return false; } function do. Wormhole() { var url = location. search. substr(1); // chop off ? if (is. Trusted. Domain(url)) { var script = document. create. Element('script'); script. type = "text/javascript"; script. src = url; document. get. Elements. By. Tag. Name("head")[0]. append. Child(script); } else alert("ignoring untrusted url: " + url); } </script></head><body onload="do. Wormhole()"></body></html> 21
Where do we go from here? • Ajax is a “hack” on top of an old platform • The platform can evolve 22
Where do we go from here? • Ajax is a “hack” on top of an old platform • The platform is evolving 23
Where do we go from here? • Ajax is a “hack” on top of an old platform • The platform is evolving • What platform do we want to build? 24
Should we open cross-domain XHR? • After all, we can already include foreign Java. Script, image, and CSS files – So why not XML too? (“just another resource file”) • HTML looks like XML (esp. XHTML) – Hard to make sure you really meant to serve that page as XML data (cf. js / img / css) • Personal / private info more often in XML / HTML – But increasingly a problem with JS too (JSON) • Cookies / creds sent with XHR request – Can’t easily distinguish direct vs. XHR access 25
Trust relationships between sites • Random site accessing this file vs. trusted partner – Flash does this with crossdomain. xml – Web services do this with certs / IP whitelists – Java. Script wormhole does it (sort of) • Should a trust relationship exist for mashups? – Want to minimize barriers to adoption / innovation – When sharing user info, should have prior agreement? – How formal / technical should this trust be? 26
Proposals for better cross-site tools • Context. Agnostic. Xml. Http. Request (Chris Holland) – Alternative to normal Xml. Http. Request for cross-site – Don’t send/receive any cookie or HTTP auth info – Server must specify X-Allow-Foreign-Hosts in response • JSONRequest (Douglas Crockford) – New browser object for cross-site JSON (like XHR) – Allows GET / POST / cancel of JSON request / response – No cookies / auth info sent or received – Requires special headers in request / response 28
In conclusion… • Cross-site communication is tricky but important – Key enabling technology for building rich mashups – Raises legitimate security issues that can’t be ignored • Today: Use server-side proxy or JSON-P – Proxy introduces bottleneck, but provides full access – JSON-P is more scalable, but limited to JSON APIs – Java. Script Wormhole lets you touch foreign pages • Keep the discussion of better tools / protocols going! – This problem is here to stay – Browser developers are listening! 29
For further reading… • Cross-site limitations – http: //getahead. ltd. uk/ajax/cross-domain-xhr – http: //msdn. microsoft. com/library/default. asp? url=/workshop/a uthor/om/xframe_scripting_security. asp • Flash. XMLHttp. Request – http: //blog. monstuff. com/Flash. XMLHttp. Request • Context. Agnostic. XMLHttp. Request – http: //chrisholland. blogspot. com/2005/03/contextagnosticxmlht tprequest-informal. html • JSONRequest – http: //json. org/JSONRequest. html 30
Скачать презентацию Cross-Site Ajax Challenges and Techniques for Building Rich
da200c055b9a1ce4cc826a8ebeb3d75d.ppt