在表单提交时，通过 php 文件获取 CSRF 并将值传递给请求

Question

如果符合条件，我将奖励这个问题 50 分。

我有一个投票系统，类似于在 SO 上的投票方式。

当用户通过<form> 投票时，我希望提交首先点击“get-csrf.php”以获取 CSRF 密钥，然后将该值传递给请求。

我怎样才能做到这一点？

jQuery 代码：

jQuery('.votetopicform').submit(ajaxSubmit_votetopicform);

function ajaxSubmit_votetopicform(){

var votetopicform = jQuery(this).serialize();

jQuery.ajax({
    type:"POST",
    url: SiteParameters.site_url+"/wp-admin/admin-ajax.php",
    data: votetopicform,
    success:function(data){
        jQuery(".feedback").html(data); // empty div to show returned data
    }
});

return false;
}

在get-csrf.php 中，我有返回所需密钥的语句：

if (!isset($_SESSION['csrf'])) {
    $_SESSION['csrf'] = substr( md5(rand()), 0, 7);
}

return $_SESSION['csrf'];

所以，当用户点击提交时，我想通过我的 jQuery 代码获取 CSRF，然后将其发送到请求并在那里处理。

Answer 1

我建议您这样做的方法是，首先在将表单交付给用户时将令牌放入隐藏的输入字段中。

<? if (!isset($_SESSION['csrf'])) { ?>
    <input type="hidden" name="csrf-token" value="<?= $_SESSION['csrf'] ?>">
<? } ?>

如果在您的情况下这不是一个可行的解决方案，您可以简单地链接请求。

jQuery('.votetopicform').submit(ajaxSubmit_requestcsrftoken);

function ajaxSubmit_requestcsrftoken(){
    jQuery.ajax({
        type:"POST",
        url: SiteParameters.site_url+"/get-csrf.php",
        success:function(data){
            ajaxSubmit_votetopicform(data);
        }
    });
}

您无需在提交表单时直接调用ajaxSubmit_votetopicform，而是调用一个首先请求csrf-token 的函数。服务器将令牌返回给所述函数，该函数调用发送实际提交并将返回的令牌作为参数传递给它的函数。

在您的 ajaxSubmit_votetopicform - 函数中，您现在只需将返回的令牌添加到请求中提交的数据中。

$.serialize() 返回一个 url 编码的字符串，您只需将其添加到字符串的末尾：

function ajaxSubmit_votetopicform(token){
   var votetopicform = jQuery(this).serialize();
   votetopicform += "&csrftoken=" + token; //token is passed as parameter to this fn

   ....
}

所以完整的 JavaScript - 代码如下所示：

//set the submit - event handler to a function, that requests the token first
jQuery('.votetopicform').submit(ajaxSubmit_requestcsrftoken);

function ajaxSubmit_requestcsrftoken(){
    jQuery.ajax({
        type:"POST",
        url: SiteParameters.site_url+"/get-csrf.php",
        success:function(data){
            // after succesfully requesting the CSRF - token, call the function 
            // that should submit the actual form data to your server and pass the token as parameter to it
            // this way you are chaining one request after the other
            ajaxSubmit_votetopicform(data);
        }
    });

    return false; //prevent the form from submitting
}

function ajaxSubmit_votetopicform(token){

    var votetopicform = jQuery(this).serialize();

    //add the token as additional parameter to be sent to the server
    votetopicform += "&csrftoken=" + token;

    jQuery.ajax({
        type:"POST",
        url: SiteParameters.site_url+"/wp-admin/admin-ajax.php",
        data: votetopicform,
        success:function(data){
            jQuery(".feedback").html(data); // empty div to show returned data
        }
    });
}

Answer 2

GNi33 的回答是表单提交的一个很好的解决方案，对于这样的用例，我会推荐他的回答。我提出的解决方案也适用于表单；但是，对于非表单提交更为典型。这个想法是您在 HTTP 请求标头中包含 CSRF 令牌。

jQuery('.votetopicform').submit(ajaxSubmit_votetopicform);

function ajaxSubmit_votetopicform() {
  var votetopicform = jQuery(this).serialize();

  // chain AJAX requests
  jQuery.ajax({
    type: "GET",
    url: SiteParameters.site_url + "/wp-admin/get-csrf.php"
  }).then(function(token) {
    jQuery.ajax({
      type: "POST",
      url: SiteParameters.site_url + "/wp-admin/admin-ajax.php",
      data: votetopicform,
      headers: {
        "_RequestToken": token
      }
    });
  });

  return false;
}