Скачать презентацию Cross-Site Ajax Challenges and Techniques for Building Rich Скачать презентацию Cross-Site Ajax Challenges and Techniques for Building Rich

da200c055b9a1ce4cc826a8ebeb3d75d.ppt

  • Количество слайдов: 29

Cross-Site Ajax Challenges and Techniques for Building Rich Web 2. 0 Mashups Joseph Smarr Cross-Site Ajax Challenges and Techniques for Building Rich Web 2. 0 Mashups Joseph Smarr Plaxo, Inc. [email protected] com

The promise of mashups • Create new experiences by combining components from different authors 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 – 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 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 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 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 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 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. How do mashups communicate? • JSON-P (Script injection + callback) – Dynamically load Java. Script file with data • Use DHTML to inject a • Full instructions and demo: http: //www. plaxo. com/api 16

What does Plaxo have to do? • Remember: Plaxo filled in a textarea on 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 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 • 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 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

var trusted. Domains = [ "http: //www. plaxo." src="https://present5.com/presentation/da200c055b9a1ce4cc826a8ebeb3d75d/image-21.jpg" alt="Generalized Java. Script Wormhole 21

Where do we go from here? • Ajax is a “hack” on top of 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 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 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. 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 – 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) – 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 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. 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