Ytukyg

I'm building a plugin for WordPress which has to do a big pile of ajax requests to a custom WP API endpoint. The requests cannot be processed asynchronous, which makes it neccessary to use a Worker thread to prevent the browser from hanging during the process. So far not that complicated, but I want to use the WordPress nonce for verification. When I make a worker, I did it like this:

worker = new Worker("worker.js");

This loads the worker correctly, but now I want to talk to our custom Ajax endpoint. Therefore the script needs to be loaded through wp_enqueue_script so the nonce gets verified (am I correct here?).

wp_enqueue_script('itw_admin_update_products', plugins_url('assets/js/worker.js', __FILE__), [ 'jquery', 'wp-api' ], '1.0', true );

The above makes it off course load twice. How to load the script as a worker while still be able to verify the nonce at the Ajax endpoint?

Just figured it out myself:

Register a REST route

register_rest_route('my-rest-route/v1', '/rest-action', array(

    'methods' => 'GET',

    'callback' => 'callback-function',

    'permission_callback' => function () { return current_user_can('edit_pages'); },

Enqueue the scripts

The wp_localize_script() function passes along the variables we need to load the worker and to tell where the worker should do the request. wp_enqueue_script() makes sure the script is loaded at the right moment and is allowed to do requests to the API endpoint.

$params = array(

    'jsWorker'      => plugins_url('assets/js/the-worker.js', ITW_BASEDIR . '/ipp-to-woo.php'),

    'rest_route'    => get_rest_url(null, 'my-rest-route/v1/rest-action'),

);

wp_register_script('the_handler', plugins_url('assets/js/the-script.js', __FILE__), [ 'jquery', 'wp-api' ], '1.0', true );

wp_localize_script('the_handler', 'the_object', $params);

wp_enqueue_script('the_handler');

call the worker from the-script.js

Because we used wp_localize_script() to pass variables to the client side, we are now able to use the_object.jsWorker to load the worker. After loading the worker we pass along an object with worker.postMessage containing the API endpoint and the nonce generated by WordPress to verify ourselves.

worker = new Worker(the_object.jsWorker);

worker.addEventListener('message', function(e) {

    var response

    response = JSON.parse(e.data)



    processResponse(response);



});



worker.postMessage({'nonce': wpApiSettings.nonce, 'url': the_object.rest_route});

Do an Ajax call from the-worker.js

And last but not least, in the-worker.js we use xhr.setRequestHeader to verify ourselves like Wordpress does.

function doAjaxCall(url, nonce){

    var xhr = new XMLHttpRequest();

    xhr.open('GET', url, false);

        xhr.setRequestHeader( 'X-WP-Nonce', nonce );

        xhr.onload = function() {

        if (xhr.status === 200) {

            self.postMessage(xhr.response);

        }

    };

    xhr.send();

}



self.addEventListener('message', function(e) {

    var data = e.data;

    self.doAjaxCall(data.url, data.nonce);

}, false);