آموزش اعتبارسنجی درخواست های ایجکس از طریق نانس(Nonce)

معمولا در هنگام پیاده سازی قالب یا پلاگین وردپرس بهتر است تا آنجایی که امکان دارد و مقتضیات پروژه ایجاب می کند درخواست های کاربران را از طریق ایجکس(Ajax) به پنل مدیریتی وردپرس ارسال کنید تا بدین ترتیب تجربه کاربری خوشایندی را برای آنها فراهم کرده باشید.

اما مهم است که در کنار تجربه کاربری به مسائل امنیتی هم توجه داشته باشید و درخواست های کاربران را قبل از اعمال هرگونه تغییری بررسی و اعتبارسنجی نمائید، خوشبختانه وردپرس برای اینکار نانس(Nonce) را معرفی کرده است، برای آشنایی بیشتر با نانس پیشنهاد می کنیم ابتدا مقاله آموزشی امنیت وردپرس: نانس(Nonce) دیواری محکم در مقابل حملات CSRF را مطالعه فرمائید.

حال در ادامه به بررسی مرحله به مرحله اعتبار سنجی نانس می پردازیم:

گام اول: تولید نانس

در ابتدای کار لازم است رشته نانس را به کمک تابع wp_create_nonce ایجاد کنیم، برای آنکه بتوانیم از طریق jQuery به نانس دسترسی داشته باشیم لازم است این داده ها را در جایی ذخیره و نگهداری کنیم، برای اینکار می توانید از روش های زیر استفاده نمائید که در مقاله دسترسی به داده های PHP در جاوا اسکریپت با wp_localize_script آنها را بررسی کرده ایم:

  1. ویژگی *-data تگ های HTML
  2. استفاده از wp_localize_script

ما در این آموزش از روش دوم استفاده خواهیم کرد، پس کدهای زیر را در فایل functions.php قرار دهید.

function my_theme_scripts()
{
    wp_enqueue_script( 'my-scripts-js', get_template_directory_uri() . '/js/scripts.js',
        array('jquery'), '0.1.0', true );

    /* Localize Script Data */
     $ajax_data = array(
        'ajax_url'   => admin_url( 'admin-ajax.php' ),
        'wp_nonce' => wp_create_nonce( 'my_contact_nonce' ),
     );

    /* Send Data as JS var via Localize Script */
    wp_localize_script( 'my-scripts-js', 'ajax_data_loc', $ajax_data );      	
}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

 

چند نکته در رابطه با کدهای بالا:

  1. با تابع wp_enqueue_script فایل scripts.js که در گام بعدی پیاده سازی خواهد شد و حاوی کدهای جی کوئری است را به وردپرس معرفی می کنیم، این فایل را در دایرکتوری js قالب وب سایت ایجاد می کنیم. لازم به ذکر است که در مقاله روش صحیح و اصولی استفاده از jQuery در وردپرس درباره wp_enqueue_script صحبت شده است.
  2. با تابع admin_url مسیر فایل admin-ajax.php که توسط وردپرس و برای مدیریت درخواست های ایجکس استفاده می شود را بدست می آوریم، این فایل در دایرکتوری wp-admin قرار دارد.
  3. تابع wp_localize_script رشته نانس و مسیر فایل admin-ajax.php را ذخیره می کند، مقادیر این آرایه از طریق ajax_data_loc (آرگومان دوم) در فایل scripts.js در دسترس خواهد بود.
  4. مقدار مربوط به آرگومان اول تابع wp_localize_script باید با مقدار آرگومان اول تابع wp_enqueue_script یکسان باشد.

گام دوم: ارسال نانس با جی کوئری

در این مرحله کدهای زیر به فایل scripts.js اضافه می کنیم، همانطور که ملاحظه کردید این فایل در گام قبلی به وردپرس معرفی شده است.

( function ( $ ) {
    $( document ).on( 'click', '#send-message', function ( e ) {
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: ajax_data_loc.ajax_url,
            data: {
                action: 'st_contact_form_ajax',
                nonce: ajax_data_loc.wp_nonce,
                data: $( '#contact-form' ).serialize()
            },
            success: function ( response ) {
               $( '#result' ).html( response );
            }
        });
    });
})( jQuery );

 

چند نکته در رابطه با کدهای بالا:

  1. با استفاده از ajax_data_loc به رشته نانس و مسیر فایل admin-ajax.php دسترسی پیدا کردیم.
  2. st_contact_form_ajax نام اکشنی است که در سمت سرور به درخواست های ایجکس پاسخ می دهد، این اکشن را در مرحله بعد ایجاد خواهیم کرد.
  3. nonce و data مقادیری هستند که در اکشن st_contact_form_ajax و از طریق آرایه سراسری POST_$ در دسترس خواهند بود.

گام سوم : دریافت نانس و اعتبارسنجی در سمت سرور

در آخرین مرحله اکشن st_contact_form_ajax را پیاده سازی می کنیم، برای این منظور کدهای زیر را در ادامه موارد قبلی به functions.php اضافه کنید.

function st_ajax_handle() {
    if ( ! wp_verify_nonce( $_POST['nonce'] , 'my_contact_nonce' ) ) {
          wp_send_json(
            array(
                'status' => 'error',
                'message' => 'Error happened in nonce'
            ));
	 die();	
    }
     
    // Your code ...
         
}
add_action( 'wp_ajax_st_contact_form_ajax', 'st_ajax_handle' );
add_action( 'wp_ajax_nopriv_st_contact_form_ajax', 'st_ajax_handle' );

 

چند نکته در رابطه با کدهای بالا:

  1. رشته نانس دریافتی در سمت سرور را به کمک تابع wp_verify_nonce اعتبارسنجی می کنیم، آرگومان اول این تابع رشته نانس است که با استفاده از POST_$ به آن دسترسی پیدا کردیم، مقدار آرگومان دوم (my_contact_nonce) همان نامی است که در گام اول هنگام ایجاد نانس در تابع wp_create_nonce مشخص شده است.
  2. در صورتی که نانس معتبر نباشد ادامه کدها اجرا نخواهد شد.
  3. توجه داشته باشید که در ارگومان اول تابع add_action رشته های _wp_ajax و _wp_ajax_nopriv ثابت هستند و فقط به انتهای آنها نام دلخواه اکشن را اضافه می کنیم، این نام از طریق پارامتر action در فایل scripts.js ارسال می شود.
  4. همچنین می توانید به جای wp_verify_nonce از تابع check_ajax_referer استفاده کنید.

جمع بندی

اگر توسعه دهنده قالب یا افزونه وردپرس هستید حتما در فرآیند توسعه خود جایی برای Nonce در نظر بگیرید، درست است که در دنیای دیجیتال امروز امنیت صد درصدی شعاری بیش نیست، اما پیاده سازی همین موارد به ظاهر ساده و ریز و درشت است که از بروز اتفاقات ناگوار جلوگیری می کند.

توجه داشته باشید که این پست آموزشی بیشتر از جنس معرفی بود، اگر به دنبال یک مثال واقعی از پیاده سازی نانس هستید سری به مقاله آموزش استفاده از ایجکس(jQuery Ajax) در وردپرس(مثال استان و شهر) بزنید.

نظرات و سوالات کاربران
  1. سلام خروجی برنامه بالا رو کجا میشه دید ؟؟
    همچنین یه ایراد هم داره public function st_ajax_handle() {

    پابلیک باید حذف بشه

    1. درود بر شما، خروجی نهایی رو خودتون باید طبق آموزش پیاده سازی کنید، ممنون از دقت نظر شما، کد اصلاح شد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *