Cross Domain Access Policy solution using Cross Origin Resource sharing


Published on

Cross Domain Access Policy solution using Cross Origin Resource sharing

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Cross Domain Access Policy solution using Cross Origin Resource sharing

  1. 1. Breaking The Cross Domain Barrier <ul><li>Alex Sexton </li></ul>
  2. 2. A Story... <ul><li>AJAX is so nifty! </li></ul><ul><li>We can do anything! </li></ul><ul><li>FML :( </li></ul>
  3. 3. Same Origin Policy <ul><li>Applies to XMLHTTPRequests </li></ul><ul><li>Stops hackers from getting our data! </li></ul>
  4. 4. Same Origin Policy It’s actually an important rule. You wouldn’t want to have this happen:
  5. 5. Same Origin Policy It’s actually an important rule. You wouldn’t want to have this happen:
  6. 6. YEA BUT WHAT IF... <ul><li>I own both sites and I just want to make them talk? </li></ul><ul><li>The site I want information from says it’s okay? </li></ul><ul><li>I don’t give a shit?! </li></ul>
  7. 7. The Solution <ul><li>Post Message. </li></ul>
  8. 8. THE END. <ul><li>kthnxbai. </li></ul>
  9. 9. <RecordScratch.wav> <ul><li>Browser Vendors have realized that there is a need for cross domain messaging. </li></ul><ul><li>IE6 ruins your life again and again. </li></ul><ul><li>There is not a single solution that solves every problem in every browser :( </li></ul>
  10. 10. Some Options <ul><li>postMessage </li></ul><ul><li>JSONP </li></ul><ul><li>CORS </li></ul><ul><li>document.domain mods </li></ul><ul><li> Transport </li></ul><ul><li>Server-Side Proxy </li></ul><ul><li>CRAZY IFRAME STUFF </li></ul><ul><li>MOAR </li></ul>
  11. 11. Post Message <ul><li>Just pass messages between window objects! </li></ul><ul><li>It’s safe(ish) because both pages have to know about it. </li></ul>
  12. 12. Post Message <ul><li>Handle the message event in the otherWindow </li></ul>
  13. 13. Post Message <ul><li>Passing events along from one window to the other </li></ul><ul><li>Initializing the state of a new window </li></ul><ul><li>Synchronizing two pages </li></ul><ul><li>Most things, but it’s not always practical </li></ul>What’s it good for?
  14. 14. Post Message Works In... <ul><li>FF3+ </li></ul><ul><li>IE8+ </li></ul><ul><li>Chrome 1+ </li></ul><ul><li>Safari 4+ </li></ul><ul><li>Kind of in Opera for a while but it’s a little different but good enough probably so we’ll count it </li></ul>
  15. 15. JSONP <ul><li>JavaScript Object Notation with Padding. (dumb I know) </li></ul>
  16. 16. JSONEN JavaScript Object Notation Except Not **Formerly JSONP
  17. 17. JSON <ul><li>A standard (mostly) created by the Crock. </li></ul><ul><li>A subset of JavaScript with some extra rules </li></ul><ul><li>Non-Executable - just for data </li></ul>
  18. 18. JSONP <ul><li>JavaScript... </li></ul>
  19. 19. JSONP - Why it’s special <ul><li>The ‘P’ </li></ul><ul><li><script> tags are not subject to the Same Origin Policy (A total security flaw that will never change) </li></ul>
  20. 20. How JSONP Works <ul><li>Step 1: You create a callback function that accepts some data </li></ul>
  21. 21. How JSONP Works <ul><li>Step 2: Include a script with a hint of what your function is called. </li></ul>hint-hint
  22. 22. How JSONP Works <ul><li>Step 3: Output a script that calls the function and passes in the necessary data. </li></ul>
  23. 23. JSONP Is Good For... <ul><li>Data Passing </li></ul><ul><li>RESTful APIs </li></ul><ul><li>1-(way/time)-ish cross domain communication </li></ul><ul><li>Hacking </li></ul>
  24. 24. CORS | Tap the Rockies <ul><li>Cross-Origin Resource Sharing (CORS) is a W3C Working Draft that defines how the browser and server must communicate when accessing sources across origins. </li></ul>
  25. 25. CORS - HOW?
  26. 26. CORS - HOW? <ul><li>Use it or lose it </li></ul>
  27. 27. CORS - From the Server... <ul><li>CORS sends along an extra header: </li></ul><ul><li>Your server must send back another, saying it’s ok: </li></ul>
  28. 28. CORS - Compatibility <ul><li>IE 8+ (most of it, at least) </li></ul><ul><li>FF 3.5+ </li></ul><ul><li>Safari 4+ </li></ul><ul><li>Chrome </li></ul>Unrelated Graph
  29. 29. CORS - What’s it Good For? <ul><li>Not working on 40% of the internet </li></ul><ul><li>Creating an extra http request (usually only once) </li></ul><ul><li>Custom grouping options </li></ul><ul><li>Finer grain control over what’s accessible Access-Control-Allow-Credentials: true </li></ul><ul><li>Straight Up. Cross Domain XHR (yay!) </li></ul>
  30. 30. Document.domain Hackz <ul><li>Good for allowing Cross Sub domain window access </li></ul><ul><li>Now the subdomain has the same permissions for access </li></ul><ul><li>Can be very useful even if you don’t own the site, because subdomains can be cnamed to totally different webservers </li></ul><ul><li>Works in all relevant browsers </li></ul>
  31. 31. HI! I’m Jerry the Window!
  32. 32. <ul><li>Superhacky but safer than jsonp! </li></ul><ul><li>Works everywhere relevant </li></ul>**This is obviously a little simplified Added to Dojo 2 years ago:
  33. 33. Server Side Proxies <ul><li>Pretty simple concept, only slightly more difficult to implement </li></ul>mySite yourSite myServer Works everywhere XHR does
  34. 34. Crazy iFrame Hacks <ul><li>A parent window can’t read just about anything from a child window (iframe) that is on a different domain. </li></ul><ul><li>A parent window can traverse any known elements in an iframe though. </li></ul><ul><li>A parent window can set properties on the iframe. </li></ul>FACTS
  35. 35. Crazy iFrame Hacks <ul><li>A window can read and write properties of an iframe if it’s on the same domain - EVEN IF it’s inside of another iframe that isn’t on the same domain! </li></ul>
  36. 36. Crazy iFrame Hacks <ul><li>If B wants to talk to A </li></ul> Change the url hash on the innermost iframe to the message /#secret
  37. 37. Crazy iFrame Hacks <ul><li>If B wants to talk to A </li></ul> Have the top level frame read the message on the hash /#secret
  38. 38. Crazy iFrame Hacks <ul><li>Poll for hashchange the entire time </li></ul><ul><li>Set up iframes to destroy themselves after each message and just wait for the load event </li></ul><ul><li>Resize the iframe on change, then attach an event handler on the resize event that checks for new data </li></ul>How to know when to receive data Fast (where it works)
  39. 39. Crazy iFrame Hacks <ul><li>Works at varying levels of success via some slightly different methods in all relevant browsers </li></ul><ul><li>Unfortunately often our best choice for something that works everywhere </li></ul>
  40. 40. Best of both worlds? <ul><li>EasyXDM </li></ul>A library that will use postMessage first and then a series of different techniques based on which browser you use, but with normalized syntax.
  41. 41. Best of Both Worlds? <ul><li>flXHR / Flash + your own fallback </li></ul>
  42. 42. What about cookies? <ul><li>Cookies are insanely easy to steal , err.. I mean share, across domains with these techniques. </li></ul><ul><li>With the exception of Safari, cookies are passed from the server along with script includes and iframe injection. (You might need some P3P headers in IE) </li></ul>
  43. 43. What about cookies in Safari? <ul><li>Safari doesn’t send cookies along in scripts and iframes, so there’s nothing to send to the parent. </li></ul><ul><li>Unless you ask nicely... </li></ul>
  44. 44. What about cookies in Safari? If we post to an iframe it will thank us by sending cookies
  45. 45. Why Cookies? <ul><li>If I had a network of sites that I wanted to track you across, it would be easy for me maintain a central cookie and check for it on every site that you enter that contains my code. (<cough>advertisers</cough>) </li></ul> Other Sites Holds your unique cookie
  46. 46. Lessons <ul><li>With great cross domain communication techniques come great cross domain security holes </li></ul><ul><li>Safe and FUN cross-domain communication is possible </li></ul><ul><li>Paul Irish hates cold-cuts , seriously </li></ul>
  47. 47. Thanks! <ul><li>Alex Sexton </li></ul><ul><li>AlexSexton [at] gmail [dot] com </li></ul><ul><li>@SlexAxton </li></ul><ul><li> </li></ul><ul><li>Special Thanks to : yayQuery Peeps, BazaarVoice, Aaron Dixon, Shawn Smith, EasyXDM, flXHR, Mozilla MDC </li></ul>