13

I am writing an HTML5 application that is gathering data from a few different sources using JSONP. Anything I'm doing with a GET works perfectly. I'm now trying to POST data, and I've run into an interesting snag. I need to POST data from my application to another, where my application is running from a local machine. I am trying to write a cross-platform capable mobile application (think Pulse/Flipboard), so the code will always be running from a local source. My thought process was as follows:

All of the browsers I'm targeting are webkit based (iPad, Playbook, Android), so I'm wondering if there are any creaks in the same origin policy code that I can sneak through? Maybe something using iframe or postMessage?

Community
  • 1
  • 1
Justin Beckwith
  • 7,686
  • 1
  • 33
  • 55
  • "This causes the request to fail (XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin)" - It is allowed in the current browsers, so the question is out of date. – inf3rno May 27 '14 at 16:37
  • Could you elaborate on the third bullet in detail? I think I have the same problem as you but I don't understand how to use this other server. – savram Jun 20 '18 at 18:15

2 Answers2

10

As it would turn out, the easiest way to do this is to post to the target url inside of an iframe. Same origin policy on most browsers allows you to perform an HTTP POST from one domain to another unrelated domain. I solved the problem by adding an iframe to my page, initially set to a local bootstrapping page. Since that page was loaded from the same domain, I am able to control it via script. I used that to post the form to my target site, and polled the results to determine if my call was successful. It's not elegant, but it works.

Justin Beckwith
  • 7,686
  • 1
  • 33
  • 55
1

This Javascript library can almost certainly help you:

http://easyxdm.net/

easyXDM is a Javascript library that enables you as a developer to easily work around the limitation set in place by the Same Origin Policy, in turn making it easy to communicate and expose javascript API’s across domain boundaries.

..

At the core easyXDM provides a transport stack capable of passing string based messages between two windows, a consumer (the main document) and a provider (a document included using an iframe). It does this by using one of several available techniques, always selecting the most efficient one for the current browser. For all implementations the transport stack offers bi-directionality, reliability, queueing and sender-verification.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 1
    Thanks for the link! This does look pretty cool, but it doesn't specifically match what I was looking for. It looks like for modern webkit based browsers, which I am using since I'm targeting mobile platforms, their answer to window communication is the HTML5 postMessage method. This only works if both sides of the app are posting and receiving messages. – Justin Beckwith Mar 01 '11 at 16:02