pisi/Reel — Issue #83: Cross-browser drag events binding gets sandboxed
Author: pisi
Created: 2011-12-09 22:18:37+00:00
State: open

There appears to be a problem, when trying to embed Reel images into a thirdparty site using an `iframe` (applies to regular `frame`s too). Here's to sum up everything what's known about this issue.

Expressions of this error depend on a specific browser and range from (silent) security warnings to failing binding in FF completely and issues related to this matter are being reported all over (for example #80). It all comes to dragging. The routine is this:

1. pressing down the mouse button causes `mousedown` event to happen on the local target
2. dragging the mouse triggers many `mousemove`s along the way
3. releasing the mouse concludes the drag with `mouseup` event

This works very well. Until it has to deal with cross-domain __frames__.

You see, the thing with frames is that events don't bubble up from frame to frame and they terminate at the document. When having Reel in an `iframe` you basically have one frame (iframe) inside another frame (which would be the window). When step __2__ crosses the `iframe`'s boundaries, `mousemove` events, which now fire inside a different "frame" no longer trigger events bound to the `iframe`. Likewise releasing the mouse button outside of the `iframe` won't trigger the `mouseup` handler and unbind the dragging events, which would result in a compulsory dragging once the mouse is moved over the image again (even without mouse button pressed down). To deal with this, Reel double-binds the same set of dragging events (`"mousemove"` & `"mouseup"`) with the `window.top.document`, which would most likely be the parent frame of your `iframe`:

$.unique(pool.add(window.top.document))

The above works just fine for `iframe` inside pages both hosted on the same domain. But the key word for this issue is __cross-domain__. If you'd like to host Reel images and offer embedding them into pages, you'll be putting Reel `iframe` from your domain into a page on a completely different domain and the [Same Origin Policy](http://en.wikipedia.org/wiki/Same_origin_policy) will come into play. And it has a strong opinion on binding events (well, accessing in general) to cross-domain documents. As far as I got was to access the other frame with `window.top`, but that doesn't accept event bindings. `window.top.document` would be much better, but that is a no no triggering different responses depending on a browser.

* Webkit refuses access to the document, while still making the `stage_pool`.
* Firefox refuses and stops resulting in a half-initialized Reel.

I don't want to give up, but I seem to be out of shots here facing the [Same Origin Policy](http://en.wikipedia.org/wiki/Same_origin_policy). So calling for help:

__Is there anybody knowing how to bind to `iframe`'s parent frame's mouse events cross-domain? Or is it entirely impossible?__

Mastering this would be crucial to make full embedding possible and to fully support setups like [jsfiddle.net](http://jsfiddle.net/).