403 error When i send ajax request on Wordpress website

Question

i have to create a specifif form ta register data into the database and send a mail without refreshing the page

so i create a script.js file :

    (function ($) {
    $(document).ready(function () {

        jQuery('form[name="form_result"]').on('submit', function() {
            var form_data = jQuery(this).serializeArray();
            console.log('hello');
            form_data.push({"name" : "security", "value" : ajax_nonce });
            console.log(form_data);
            // Here is the ajax petition
            jQuery.ajax({
                url : ajax_url,
                type : 'post',
                data : form_data,
                success : function( response ) {
                    // You can craft something here to handle the message return
                    alert(response);
                },
                fail : function( err ) {
                    alert("there was an error: " + err );
                }
            });
            // This return prevents the submit event to refresh the page.
            return false;
        });    
      });
})(jQuery);

in my function.php file i declare has follow :

function javascript_variables(){ ?>
    <script type="text/javascript">
        var ajax_url = '<?php echo admin_url( "admin-ajax.php" ); ?>';
        var ajax_nonce = '<?php echo wp_create_nonce( "secure_nonce_name" ); ?>';
    </script><?php
}
add_action ( 'wp_head', 'javascript_variables' );


//AJAX REQUEST
function twentytwentychild_asset() {
    // ...
    wp_enqueue_script('jquery');

    // Charger notre script
    wp_enqueue_script(
        'twentytwentychild',
        get_stylesheet_directory_uri(). '/assets/js/script.js', 
        array('jquery'),
        '1.0', true
    );

    // Envoyer une variable de PHP à JS proprement
    wp_localize_script('twentytwentychild', 'ajaxurl', admin_url('admin-ajax.php'));
}
add_action('wp_enqueue_scripts', 'twentytwentychild_asset');


add_action('wp_ajax_send_form', 'send_form'); // This is for authenticated users
add_action('wp_ajax_nopriv_send_form', 'send_form');

function send_form(){
    // This is a secure process to validate if this request comes from a valid source.
    check_ajax_referer( 'secure-nonce-name', 'security' );
 
    /**
     * First we make some validations, 
     * I think you are able to put better validations and sanitizations. =)
     */
     
    if ( empty( $_POST["name"] ) ) {
        echo "Insert your name please";
        wp_die();
    }
 
    if ( ! filter_var( $_POST["email"], FILTER_VALIDATE_EMAIL ) ) {
        echo 'Insert your email please';
        wp_die();
    }
 
    if ( empty( $_POST["fcPhone"] ) ) {
        echo "Insert your phone please";
        wp_die();
    }

    $to = 'test@gmail.com';

    $subject = 'Un potentiel consultant viens de faire une simulation!';

    $body  = 'From: ' . $_POST['name'] . '\n';
    $body .= 'Email: ' . $_POST['email'] . '\n';
    $body .= 'Message: ' . $_POST['fcPhone'] . '\n';

    $headers = array('Content-Type: text/html; charset=UTF-8');

    wp_mail( $to, $subject, $body, $headers );

    echo 'Done!';
    wp_die();
     
}

and my template page it's a simple form :

<form action="" method="post" name="form_result">
    <div id="simulation_form">
        <div style="margin-bottom: 2rem; display: flex;">
            <div class="vc_col-sm-4">
                <div class="simulation_form_q">Votre name:*</div>
                <div class="simulation_form_r">
                    <input type="text" id="name" name="name" required>
                </div>
            </div>
            <div class="vc_col-sm-8">
                <div class="simulation_form_q">Votre email:*</div>
                <div class="simulation_form_r">
                    <input type="email" name="email" id="email" required>
                </div>
            </div>
            <div class="vc_col-sm-8">
                <div class="simulation_form_q">Votre numero de telephone:*</div>
                <div class="simulation_form_r">
                    <input type="text" name="fcPhone" id="telephone" required>
                </div>
            </div>
        </div>

        <input type="hidden" name="action" value="send_form" style="display: none; visibility: hidden; opacity: 0;"/>
        <div class="simulation_form_btn">
            <input type="submit" value="calculez vos revenus">
        </div>
    </div>
</form>

but when i send the Ajax request i have 403 error forbidden I don't know why i clear the cache and the cookie i use console log to debug the ajax request and it send all the data yet i have still that 403 ERROR and i don't know how to solve it

Answer 1

Short answer — how can you solve the problem: When you call check_ajax_referer(), use secure_nonce_name as the first parameter, i.e. check_ajax_referer( 'secure_nonce_name', 'security' ).

A Longer Answer

The first parameter (which is the nonce action) for check_ajax_referer() needs to match the first parameter for wp_create_nonce(), but in your code, they are secure-nonce-name and secure_nonce_name respectively, hence that would result in the error 403 which basically means "invalid nonce".

So make sure the names are equal or that the nonce action is correct, e.g. use secure_nonce_name with both the above functions:

// In the script in javascript_variables():
var ajax_nonce = '<?php echo wp_create_nonce( "secure_nonce_name" ); ?>';

// Then in the AJAX callback (send_form()):
check_ajax_referer( 'secure_nonce_name', 'security' );

Additional Notes

• You should consider using the REST API which, unlike the admin-ajax.php, gives a better, human-friendly message when an error is encountered while processing the request.

Answer 2

check_ajax_referer( 'secure-nonce-name', 'security' );

Try this instead above code

check_ajax_referer( $_POST['security'], 'secure_nonce_name' );