如何处理跨域 iframe 文件上传 json 响应？答案

【问题标题】：How to handle cross domain iframe file upload json response?如何处理跨域 iframe 文件上传 json 响应？
【发布时间】：2011-09-17 14:32:58
【问题描述】：

我正在构建一个文件上传 API。

基本上，用户必须将带有他/她的 api_key + 签名的文件发布到我的网络服务。然后我的 Web 服务返回一个 JSON 响应。我想知道这个过程如何异步工作？

假设用户以将目标设置为 iframe 的形式发布请求。 JSON 响应将在他/她的 iframe 上发送回用户，内容类型设置为“text/html”。它被设置为“text/html”而不是“application/json”，因为我想避免浏览器在 JSON 响应周围注入“pre”标签。无论如何，如果 iframe 和父窗口具有不同的域，用户如何读取该 JSON 响应？会有一个跨域策略问题。

在这种情况下，动态创建“脚本”标签和 JSONP 将不起作用，因为我需要 POST 才能上传。 JSONP 仅适用于 GET 请求。

【问题讨论】：

回答我自己的问题。我使用 html5 postmessage 将 json 从 iframe（域 B）发送到父级（域 A）。在域 A 中，它然后 eval() 将消息转换为对象。你觉得这样做有什么问题吗？即安全问题？

标签： json iframe upload cross-domain

【解决方案1】：

查看“上传”示例here。它使用跨域消息将消息传递回上传页面，并使用easyXDM支持所有浏览器。

This post 解释了它是如何工作的！

【讨论】：

【解决方案2】：

由于同源策略，浏览器不允许主框架中的 JavaScript 从另一个域读取/访问 iframe 中的任何内容。在这种情况下，用户将不得不使用 easyXDM 或创建自己的代理——这里的代理是指用户必须在他们的后端编写一些可以与您的 API 通信的代码，以便发布请求将直接发送到您的服务器, 并且 get 响应将从他们自己的代理获得。

【讨论】：

您如何看待使用 html5 postmessage 代替？用户可以使用针对 iframe 的 POST 请求上传文件。然后，Web 服务以 text/html 内容类型返回响应，该内容类型包含一个脚本标记，围绕 top.postMessage('".$json."', 'http://".$callback_domain."') 用户页面只需要父窗口上的事件侦听器来捕获此消息。然后他/她可以 eval() 该 json 字符串并将其转换为对象。