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

Question

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

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

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

我怎样才能实现这个目标？

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 ，我有返回所需 key 的语句:

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

return $_SESSION['csrf'];

因此，当用户单击“提交”时，我想通过 jQuery 代码获取 CSRF，然后将其发送到请求并在那里进行处理。

Answer 1

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

<? 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 的函数。服务器将 token 返回给所述函数，该函数调用发送实际提交的函数并将返回的 token 作为参数传递给它。

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

如$.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
        }
    });
}