4

I'm building an files upload API.

Basically, the user will have to POST the files with his/her api_key + signature to my web service. Then my web service replies back with a JSON response. I'm wondering how can this process work asynchronously?

Assuming that the user POST the request in a form setting the target to an iframe. The JSON response will be sent back to the user on his/her iframe with content type set as "text/html". It is set as "text/html" instead of "application/json" because I want to avoid having a "pre" tag injected by the browser around the JSON response. Anyway, how does the user read that JSON response if the iframe and the parent window have different domain? There is going to be a cross domain policy issue.

Dynamically create "script" tag plus JSONP won't work in this case because I need to POST in order to upload. JSONP only works with GET requests.

woran
  • 1,317
  • 2
  • 16
  • 22
  • To answer my own question. I use html5 postmessage to send json from iframe (Domain B) to parent (Domain A). In Domain A, it then eval() to convert message to object. Do you see any problem doing this? i.e. security problems? – woran Jun 19 '11 at 04:19

2 Answers2

1

Take a look at the 'Upload' example here. It uses Cross Domain messaging to pass the message back to the uploading page, and uses easyXDM to support all browsers.

This post explains how it all works!

Sean Kinsey
  • 37,689
  • 7
  • 52
  • 71
0

Because of Same Origin Policy, browsers wont allow JavaScript in the main frame reading/accessing whatever content in iframe from another domain. In this case, the users will have to use easyXDM or create their own proxy -- by proxy here i mean users will have to write some code on their backend that can communicate with your API such that a post request will go directly to your server, and a get response will get from their own proxy.

kchea
  • 16
  • What do you think about using html5 postmessage instead? User can upload files using POST request targeted to an iframe. The web service then responses back with a text/html content type, which has a script tag wraps around a top.postMessage('".$json."', 'http://".$callback_domain."') The user page just need an event listener on the parent window to capture this message. Then he/she can eval() that json string and convert it to object. – woran Jun 21 '11 at 01:18