What is nonce and how to use it with Ajax in WordPress? [duplicate]

Question

I am trying to learn, how to use Ajax in WordPress with proper way. This is what I learned:

Step 1: Create Ajax file and register it using wp_enqueue_script.

function wpdocs_theme_name_scripts() {
    wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/ajxfile.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Step 2: Use ajax Like this in ajxfile.js:

$( document ).ready(function() {

$('#id').on('click',function (e){       
    alert("Its Working");
    var up = 1;
    var id = $( "#id" ).data( "user_id" );
    $.ajax({
            type: "POST",
                url: "runcode.php",
                data: {up:up, id:id},
                success:
                    function(result){
                alert("result");
                        }
        });
});

});

STEP 3: adding HTML in page:

  <a href="#" id="id" data-user_id="<?php echo $user_id = get_current_user_id(); ?>" 
  data-post_id="<?php echo $post_id = get_the_ID(); ?>">
         <i class="fa fa-thumbs-up" aria-hidden="true"></i>
  </a>

Every time someone click on the link Its successfully alert "Its working" statement. Now I want to retrieve that data and want to add it in user meta. But its confusing me. And whats that nonce thing is? Can anyone guide me to right direction?

Answer 1

Now I got it! WordPress is just awesome. Also Thank you knif3r, your suggestions help me lot. I am trying to explain it in my words. Please correct me, if I am wrong.

What is nonce?

Nonce is something like security hash to prevent attacks and mistakes. It creates unique identifiers to check if the ajax request is coming from website or not. In WordPress words

A nonce is a "number used once" to help protect URLs and forms from certain types of misuse, malicious or otherwise. WordPress nonces aren't numbers, but are a hash made up of numbers and letters. Nor are they used only once, but have a limited "lifetime" after which they expire.

How to use it?

1. First we need to add our js file properly using wp_enqueue_script(). Something like this:

    function wpdocs_theme_name_scripts() {
        wp_enqueue_script( 'script-name', get_stylesheet_directory_uri().
            '/js/ajxfile.js', array(), '1.0.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
   

We register our ajxfile.js file with the name script-name. Now its loading on all the pages of our wordpress.

2. Now we need to use wp_localize_script() to declare our variables and here we add our nonce to used it in functions.

    function wpdocs_theme_name_scripts() {
        wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . 
            '/js/ajxfile.js', array(), '1.0.0', true );
        wp_localize_script('script-name', 'ajax_var', array(
            'url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('ajax-nonce')
        ));
    }
   

We successfully register and localize our script.

3. Be sure to pass the nonce data in your ajax call in ajxfile.js:

    /* global ajax_var */
    $.ajax( {
        url: ajax_var.url,
        type: 'post',
        data: {
            action: 'custom_script_name',
            nonce: ajax_var.nonce,   // pass the nonce here
            moredata: 'whatever',
        },
        success( data ) {
            if ( data ) {
                // etc...
            }
        },
    } );
   

4. Now we want to bind our function with our script. So I used this

    add_action('wp_ajax_nopriv_custom_script_name', 'custom_php_ajax_function');    
    add_action('wp_ajax_custom_script_name', 'custom_php_ajax_function');
   

We are using wp_ajax_nopriv_ & wp_ajax_ to bind our functions with wordpress hooks. The second hook is fired when a user is logged in and the first one when they are not.

5. Our Function is will be like this

    function custom_php_ajax_function() {
        // Check for nonce security      
        if ( ! wp_verify_nonce( $_POST['nonce'], 'ajax-nonce' ) ) {
            die ( 'Busted!');
        }
    }
   

Our function will check if ajax data is sending nonce hidden data with other parameters. If it doesn't, then it will fire an error. This can really help to prevent ajax attacks. Nonce data is a hidden value and must need to send with other parameters.

How to check if it is working or not?

• Remove 'nonce' => wp_create_nonce('ajax-nonce') from wpdocs_theme_name_scripts() and click on the link. It will show an error.
• Now Remove security check from our function and click on link. It will work.

This shows that our function with security check of nonce will never work if there is no nonce data. Its hidden so no one else can use it. And if no one knows it, then no matter how many time they run that ajax, our function is not going to respond them.

Sorry for my poor English and bad explanation. Just trying to help. Please let me know if I am missing something or done something wrong.