Breaking The Cross Domain Barrier

Breaking The Cross Domain Barrier
Alex Sexton

A Story...
AJAX is so nifty!
We can do anything!
FML :(

Same Origin Policy
Applies to XMLHTTPRequests
Stops hackers from getting our data!

Same Origin Policy It’s actually an important rule. You wouldn’t want to have this happen:

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?!

The Solution
Post Message.

THE END.
kthnxbai.

<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 :(

Some Options
postMessage
JSONP
CORS
document.domain mods
window.name Transport
Server-Side Proxy
CRAZY IFRAME STUFF
MOAR

Post Message
Just pass messages between window objects!
It’s safe(ish) because both pages have to know about it.

Post Message
Handle the message event in the otherWindow

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?

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

JSONP
JavaScript Object Notation with Padding. (dumb I know)

JSONEN JavaScript Object Notation Except Not **Formerly JSONP

JSON
A standard (mostly) created by the Crock.
A subset of JavaScript with some extra rules
Non-Executable - just for data

JSONP
JavaScript...

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)

How JSONP Works
Step 1: You create a callback function that accepts some data

How JSONP Works
Step 2: Include a script with a hint of what your function is called.
hint-hint

How JSONP Works
Step 3: Output a script that calls the function and passes in the necessary data.

JSONP Is Good For...
Data Passing
RESTful APIs
1-(way/time)-ish cross domain communication
Hacking

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.

CORS - HOW?

CORS - HOW?
Use it or lose it

CORS - From the Server...
CORS sends along an extra header:
Your server must send back another, saying it’s ok:

CORS - Compatibility
IE 8+ (most of it, at least)
FF 3.5+
Safari 4+
Chrome
Unrelated Graph

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!)

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

Window.name HI! I’m Jerry the Window!

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

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

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

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

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

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

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)

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

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/

Best of Both Worlds?
flXHR / Flash + your own fallback
http://flxhr.flensed.com/

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)

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...

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/

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

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

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

http://alexsexton.com	13275
http://speakerrate.com	90
http://feeds.feedburner.com	82
http://www.slideshare.net	73
http://blog.knowtheory.net	28
http://127.0.0.1	25
http://onwebdev.blogspot.com	24
http://naive.tumblr.com	22
http://shr386.posterous.com	18
http://octo.alexsexton.com	8
http://xss.yandex.net	7
http://talksathome.com	6
http://sitscape.com	6
http://twitter.com	5
http://www.newsblur.com	5
http://posterous.com	5
http://us-w1.rockmelt.com	5
http://webcache.googleusercontent.com	4
http://lanyrd.com	3
http://test92839787.blogspot.com	3
http://translate.googleusercontent.com	2
http://reader.googleusercontent.com	2
https://vpn.liveperson.com	1
https://twitter.com	1
http://static.slidesharecdn.com	1
http://www.lmodules.com	1
http://dustpan.intranet	1
http://alpha.trails.by	1

Breaking The Cross Domain Barrier

by Alex Sexton on Jun 05, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

28 Embeds 13,704

Statistics

Breaking The Cross Domain Barrier — Presentation Transcript