将ajax调用创建的表单数据发布到远程URL

时间:2011-03-07 23:29:39

标签: javascript ajax http forms xss

我想执行两个阶段的帖子。第一个是我自己服务的AJAX帖子,用于创建表单数据,例如“email = blah& dude = car”等。

在AJAX调用的回调中,我需要将该数据重新发布到正常帖子中的远程站点。

我在想这样的事情:

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",
});

但是,由于remotepage.com上的XSS预防,httpRequest将失败。如何轻松地将处理后的表单数据重新发布到远程URL?

2 个答案:

答案 0 :(得分:1)

您意识到由于same origin policy restrictionshttp://remotepage.com xmlhttp.open("POST","http://remotepage.com",true);发送了一个AJAX请求,除非您的网站托管在http://remotepage.com上,否则无效。

因此,要实现此目的,您需要在您的域上设置服务器端脚本,该脚本将充当您的域和远程域之间的桥梁,然后您将向您的脚本发送AJAX请求。另外因为你使用jquery,在成功回调中使用它似乎更自然:

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",
});

如果远程域支持JSONP,您可以直接向其发送请求,但它仅限于GET请求。

答案 1 :(得分:0)

您需要向remotepage.com发送后台GET请求,询问您要修改/创建的资源的表单。这将允许remotepage在您的cookie商店中设置真实性令牌。隐藏此表单,使用已成功发布到myservice的数据填充该表单,并发布隐藏的表单。这样,remotepage.com就有机会检查您是否值得信任。

编辑:添加代码示例

以下是我想象的示例代码:

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

因此,myservice不是返回文本,而是返回一个json对象,其中包含您在下面的评论中谈到的已处理数据。回调将从远程页面请求您想要的表单。一旦完成加载,将执行匿名函数()中的块,填充表单,然后提交它。

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()
    });
  });
}

另外,请确保使用css隐藏表单:

#empty_container_for_form { display: none; }