Use a Worker thread together with WordPress Nonce (custom wp-api endpoint)
up vote
1
down vote
favorite
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?
javascript wordpress wordpress-rest-api
New contributor
add a comment |
up vote
1
down vote
favorite
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?
javascript wordpress wordpress-rest-api
New contributor
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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?
javascript wordpress wordpress-rest-api
New contributor
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?
javascript wordpress wordpress-rest-api
javascript wordpress wordpress-rest-api
New contributor
New contributor
New contributor
asked Nov 21 at 14:07
Mike
1062
1062
New contributor
New contributor
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
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);
New contributor
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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);
New contributor
add a comment |
up vote
0
down vote
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);
New contributor
add a comment |
up vote
0
down vote
up vote
0
down vote
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);
New contributor
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);
New contributor
New contributor
answered Nov 22 at 9:46
Mike
1062
1062
New contributor
New contributor
add a comment |
add a comment |
Mike is a new contributor. Be nice, and check out our Code of Conduct.
Mike is a new contributor. Be nice, and check out our Code of Conduct.
Mike is a new contributor. Be nice, and check out our Code of Conduct.
Mike is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413883%2fuse-a-worker-thread-together-with-wordpress-nonce-custom-wp-api-endpoint%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown