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

by

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.

  1. 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.

  1. 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...
         }
     },
 } );

  2. 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.

  1. 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.

Leave a Comment