Post form data created by an ajax call to a remote

Question

I would like to perform a two stage post. The first is an AJAX post to my own service that creates form data such as "email=blah&dude=car" etc.

In the callback for the AJAX call I need to repost that data to a remote site, in a normal post.

I was thinking something like:

var formData = "some form data";
$.ajax({
    type: 'POST',
    url: '/myservice', 
    data: formData,
    success: function(data, status) {
             xmlhttp=new XMLHttpRequest(); 
                        xmlhttp.open("POST","http://remotepage.com",true); 
                        xmlhttp.send(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //display error message     },
    dataType: "text",
});

However, the httpRequest will fail due to XSS prevention on remotepage.com. How can I easily repost the processed form data to the remote URL?

Answer 1

You realize that due to same origin policy restrictions sending an AJAX request to http://remotepage.com (xmlhttp.open("POST","http://remotepage.com",true);) wouldn't work unless your site is hosted on http://remotepage.com.

So to achieve this you would need to setup a server side script on your domain which would act as bridge between your domain and the remote domain and you would then send an AJAX request to your script. Also because you are using jquery it would seem more natural to use it in the success callback as well:

var formData = "some form data";
$.ajax({
    type: 'POST',
    url: '/myservice', 
    data: formData,
    success: function(data, status) {
        $.post('/some_bridge_script', formData);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //display error message     },
    dataType: "text",
});

If the remote domain supports JSONP you could directly send the request to it but it is only limited to GET requests.

Answer 2

You need to send a background GET request to remotepage.com asking for the form for the resource you want to modify/create. This will allow remotepage to set authenticity tokens in your cookie store. Keep this form hidden, populate it with data that was successfully posted to myservice, and post the hidden form. This way remotepage.com will have a chance to check that you are trusted.

EDIT: added code samples

Here's a bit of sample code on what I'm envisioning:

var formData = "some form data";
$.post({
  url: '/myservice', 
  data: formData,
  success: postToRemote,
  dataType: "JSON",
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    // display error message
  },
});

So instead of returning text, myservice should return a json object containing the processed data you talk about in your comment below. The callback will request the form you want from remotepage. Once its done loading, the block in the anonymous function() will be executed, which populates the form, then submits it.

function postToRemote(data, status) {
  $("#empty_container_for_form").load("http://remotepage.com/get_hidden_form", function() {
    $("#hidden_form input#attribute_1").val(data.attribute1);
    $("#hidden_form input#attribute_2").val(data.attribute2);
    $.post({
      url: "http://remotepage.com",
      data: $("#hiddenForm").serialize()
    });
  });
}

Also, make sure the form is hidden using css:

#empty_container_for_form { display: none; }