📜  验证 ajax nonce 请求 wordpress - Javascript (1)

📅  最后修改于: 2023-12-03 15:42:32.227000             🧑  作者: Mango

验证 Ajax Nonce 请求 WordPress

在 WordPress 中,使用 Ajax 请求时需要添加一个 security nonce 以确保请求的安全性。该 Nonce 确保请求发送者是具有访问权限的用户,防止 CSRF 攻击。

在本文中,我们将介绍如何在 JavaScript 中验证 Ajax Nonce 请求 WordPress。

步骤
1. 添加 Nonce

在 WordPress 服务器端,要通过 wp_add_inline_script() 函数添加 Nonce 安全性。

wp_enqueue_script('my-ajax-request', '/path/to/ajax.js', array('jquery'));

wp_localize_script('my-ajax-request', 'myAjax', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'security' => wp_create_nonce('my-special-string')
));

上述代码中,'my-ajax-request' 是我们要添加 Nonce 的脚本名称。该脚本可以是单独的 JS 文件,也可以是通过add_action() 函数添加的脚本。

通过 wp_localize_script() 函数,我们将 Nonce 值添加到 myAjax 对象中。'ajax_url' 属性是 WordPress Ajax 处理程序的 URL,'security' 属性是 Nonce 值。

2. 在 JavaScript 中使用 Nonce

在 JavaScript 中,我们可以使用 jQuery 发送 Ajax 请求,并在请求中包含 Nonce 值。

jQuery(document).ready(function($) {
    var data = {
        action: 'my_special_action',
        nonce: myAjax.security
    };

    $.post(myAjax.ajax_url, data, function(response) {
        alert('Response: ' + response);
    });
});

上述代码中,我们使用 jQuery 发送 POST 请求,并将 Nonce 值添加到数据中。

'nonce' 属性是向服务器发送 Nonce 值的方式。使用 'myAjax.security' 属性,我们可以将先前添加到 myAjax 对象中的 Nonce 值添加到 POST 数据中。

3. 在服务器端验证 Nonce

在服务器端,我们需要确保收到请求后检查 Nonce 值是否正确。可以使用 check_ajax_referer() 函数验证 Nonce 值。

add_action('wp_ajax_my_special_action', 'my_special_action_callback');
add_action('wp_ajax_nopriv_my_special_action', 'my_special_action_callback');

function my_special_action_callback() {
    // Check Nonce
    check_ajax_referer('my-special-string', 'nonce');

    // Handle request
    $response = array('message' => 'Hello Ajax!');
    wp_send_json($response);
}

在上述代码中,我们使用 'wp_ajax_my_special_action' 和 'wp_ajax_nopriv_my_special_action' 钩子函数添加了 Ajax 处理程序。'wp_ajax_nopriv_' 钩子函数将在未登录的情况下运行 Ajax。

在 my_special_action_callback() 函数中,我们首先使用 check_ajax_referer() 函数验证 Nonce 值。'my-special-string' 是先前添加 Nonce 的字符串,'nonce' 是从请求中收到的 Nonce 值。

如果验证通过,我们可以在回调函数中编写其它逻辑。在本例中,我们只是回复一个 JSON 字符串。

结论

在本文中,我们介绍了如何在 JavaScript 中验证 Ajax Nonce 请求 WordPress。通过添加 Nonce 值,可以确保 Ajax 请求是来自已经授权的用户,增强安全性。