Breaking The Cross Domain Barrier
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Breaking The Cross Domain Barrier

on

  • 87,011 views

If you had to rank the best and worst moments of your JavaScript life, you’d probably rank reading “The Good Parts” up towards the top, and deep down at the bottom of the list would be the day ...

If you had to rank the best and worst moments of your JavaScript life, you’d probably rank reading “The Good Parts” up towards the top, and deep down at the bottom of the list would be the day that you found out that you couldn’t make cross-domain requests in the browser. This talk covers the hacks, tips, and tricks to leave the Same Origin Policy in the dust. So grab a cookie, pad your JSON, and learn how to communicate properly.

Statistics

Views

Total Views
87,011
Views on SlideShare
71,563
Embed Views
15,448

Actions

Likes
81
Downloads
554
Comments
6

54 Embeds 15,448

http://alexsexton.com 14145
http://feeds.feedburner.com 633
http://speakerrate.com 110
http://www.slideshare.net 73
http://sozialpapier.com 46
http://onwebdev.blogspot.com 34
http://blog.knowtheory.net 33
http://theoldreader.com 32
http://lanyrd.com 31
http://www.sozialpapier.com 30
http://127.0.0.1 29
http://xss.yandex.net 26
http://www.kolunar.com 25
http://naive.tumblr.com 22
http://www.newsblur.com 19
http://shr386.posterous.com 18
https://inside.stagingbk.net 13
http://snipick.com 12
https://twitter.com 12
http://www.linkedin.com 11
http://octo.alexsexton.com 8
http://ngomik.dev 7
http://talksathome.com 6
http://sitscape.com 6
http://nowlab.isobarkorea.co.kr 6
http://us-w1.rockmelt.com 5
http://posterous.com 5
http://twitter.com 5
http://webcache.googleusercontent.com 4
http://test92839787.blogspot.com 3
http://translate.googleusercontent.com 3
http://localhost 3
https://www.linkedin.com 3
https://twimg0-a.akamaihd.net 3
https://si0.twimg.com 3
http://blog.gabrieleromanato.com 2
http://feedproxy.google.com 2
http://www.netvibes.com 2
http://pinterest.com 2
http://reader.googleusercontent.com 2
http://static.slidesharecdn.com 1
http://jsbin.com 1
http://www.lmodules.com 1
http://alpha.trails.by 1
http://www.verious.com 1
http://iwantaneff.in 1
http://dashboard.bloglines.com 1
http://onwebdev.blogspot.com.es 1
http://dustpan.intranet 1
http://onwebdev.blogspot.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 6 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • @SbastienAccambray Did you find any solution to your problem ?
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice work ! and fun ;-)
    unfortunatly, i don't find the solution of my issue : get parent top frame domain name from a child iframe without any parent side code. It should be possible because some company do that... rrrrr still looking for
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice Work
    Are you sure you want to
    Your message goes here
    Processing…
  • Safari cookies does not work any more :-(
    Are you sure you want to
    Your message goes here
    Processing…
  • appears to be a good collection of the different approaches, will come back when to this when need arises
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Breaking The Cross Domain Barrier Presentation Transcript

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