Cross-browser HTML5 Drag and Drop JSON DataTransfer fails

Question

I came to notice that for some reason it is not possible to transfer data from chrome to firefox or viceversa through a draggable object when the mime is set to application/json .

See demo here: http://jsfiddle.net/n7N9p/4/

(Open that link in both, chrome and firefox and try dragging the JSON draggable from one browser to the other).

With that I have tested dragging the draggable in different scenarios:

1. From CHROME to CHROME via text works .
2. From CHROME to CHROME via application/json works .
3. From CHROME to CHROME INCOGNITO via text works .
4. From CHROME to CHROME INCOGNITO via application/json works .
5. From FIREFOX to FIREFOX via text works .
6. From FIREFOX to FIREFOX via application/json works .
7. From FIREFOX to FIREFOX PRIVATE WINDOW via text works .
8. From FIREFOX to FIREFOX PRIVATE WINDOW via application/json works .
9. From CHROME to FIREFOX via text works .
10. From CHROME to FIREFOX via application/json does not work .
11. From FIREFOX to CHROME via text works .
12. From FIREFOX to CHROME via application/json does not work .

Why does (only) 10 and 12 fail?

Is this a bug or security feature? If it is a security feature, then why is it insecure? How come 3, 4, 7 and 8 are not considered insecure? Why does it always work with the mime set to text ?

Answer 1

Why does (only) 10 and 12 fail?

application/json can be serialized to text if the browser knows the source

How come 3, 4, 7 and 8 are not considered insecure?

The data is transferred from client to client, not client to server

Why does it always work with the mime set to text?

The setData method of the dataTransfer object accepts text and dataURLs

References

• HTML5 Drag and Drop in IE10 PPB2

• Draggable attribute | property

• Example of the setData Method