跨浏览器 HTML5 拖放 JSON 数据传输失败

Posted 2023-05-08

【中文标题】跨浏览器 HTML5 拖放 JSON 数据传输失败

【英文标题】：Cross-browser HTML5 Drag and Drop JSON DataTransfer fails

【发布时间】：2013-10-22 03:32:09

【问题描述】：

我注意到由于某种原因，当 mime 设置为 application/json 时，无法通过可拖动对象将数据从 chrome 传输到 firefox 或反之亦然。

在此处查看演示：http://jsfiddle.net/n7N9p/4/

（在 chrome 和 firefox 中打开该链接，然后尝试将可拖动的 JSON 从一个浏览器拖到另一个浏览器）。

我已经测试了在不同场景中拖动可拖动对象：

通过 text works 从 CHROME 到 CHROME。 通过 application/json works 从 CHROME 到 CHROME。 通过 text works 从 CHROME 到 CHROME INCOGNITO。 通过 application/json works 从 CHROME 到 CHROME INCOGNITO。 通过 text works 从 FIREFOX 到 FIREFOX。 从 FIREFOX 到 FIREFOX，通过 application/json works。 通过 text works 从 FIREFOX 到 FIREFOX PRIVATE WINDOW。 通过 application/json 从 FIREFOX 到 FIREFOX PRIVATE WINDOW works。 通过 text works 从 CHROME 到 FIREFOX。 通过 application/json 从 CHROME 到 FIREFOX 不起作用。 通过 text works 从 FIREFOX 到 CHROME。 通过 application/json 从 FIREFOX 到 CHROME 不起作用。

为什么（仅）10 和 12 失败？

这是错误还是安全功能？如果它是一项安全功能，那么为什么它不安全？为什么 3、4、7 和 8 不被认为是不安全的？为什么它总是与设置为 text 的 mime 一起工作？

【问题讨论】：

另见：* ***.com/questions/tagged/json

【参考方案1】：

为什么（仅）10 和 12 失败？

如果浏览器知道来源，application/json可以序列化为文本

为什么 3、4、7 和 8 不被认为是不安全的？

数据是从客户端传输到客户端，而不是客户端到服务器

为什么它总是与设置为文本的 mime 一起工作？

dataTransfer 对象的setData 方法接受文本和数据URL

参考文献

html5 Drag and Drop in IE10 PPB2

Draggable attribute | property

Example of the setData Method