Envío de solicitudes seguras de Ajax en WordPress (con Nonces)

Sé que la API REST es un gran tema de conversación en WordPress en este momento, y con razón, pero todavía hay momentos en los que tenemos que usar admin-ajax (como se le conoce) por una variedad de razones.

• Tal vez sea una aplicación,
• Quizás el tiempo no permita crear los puntos finales necesarios,
• Quizás te sientas más cómodo con admin-ajax,
• Y así.

Independientemente de las razones por las que lo usa (que todavía lo hago, para lo que sea que funcione), creo que es importante asegurarse de que estamos enviando solicitudes Ajax seguras en WordPress usando nonces tal como lo haría si estuviera enviando datos de formularios tradicionales. .

Toma legítima y en vivo de cables que llevan su solicitud de Ajax.

Si busca resultados en la web sobre cómo hacer eso, encontrará una variedad de respuestas, y esto será solo otra gota en el cubo proverbial.

Pero si tiene curiosidad por una receta sobre cómo manejarlo, así es como lo hago cada vez.

Solicitudes seguras de Ajax en WordPress

El proceso para enviar solicitudes Ajax seguras para WordPress sigue este procedimiento:

1. ponga en cola su archivo JavaScript y use wp_localize_script ,
2. asegúrese de que su JavaScript esté enviando el nonce de seguridad,
3. verifique el valor de seguridad en su devolución de llamada y trátelo adecuadamente.

Dicho esto, aquí hay algunos puntos esenciales para cada uno de los anteriores que, con suerte, lo llevarán a escribir un código basado en Ajax más seguro.

1 Ponga JavaScript en cola, localice su script

Sé que esto parece un primer paso extraño considerando que debe escribirlo antes de ponerlo en cola. Y deberías, por supuesto. Pero para esta publicación, quería mostrar el código necesario antes de pasar a los detalles.

Hay algunas formas en que las personas optan por poner en cola admin-ajax.php, pero este es el proceso que sigo tanto para poner en cola mi archivo como para agregar admin-ajax.php:

Observe en el código anterior, la llamada a wp_enqueue_script se ve exactamente como lo esperaría.

Pero wp_localize_script es un poco diferente. Esto es lo que está haciendo:

1. Sigue la secuencia de comandos llamada a poner en cola (y el orden es importante),
2. utiliza el mismo identificador, a saber, acme-security ,
3. Define un objeto que podemos usar en nuestro código JavaScript llamado acme_ajax_object y define dos propiedades.
4. La  propiedad ajax_url mantiene la ruta a admin-ajax.php.
5. La  propiedad de seguridad mantiene un valor devuelto por wp_create_nonce.

Entonces, ¿cómo aprovechamos todo esto dentro del contexto de nuestro JavaScript?

2 Uso de esta información en JavaScript

Primero, al realizar una llamada Ajax, debemos asegurarnos de que estamos usando la  propiedad ajax_url del objeto que definimos en el código anterior. Es decir, la URL de la solicitud debe enviarse a acme_ajax_object.ajax_url.

A continuación, defina la función que desea llamar. En este caso, es get_custom_date que veremos en un momento.

Pero la parte más importante viene a continuación: luego nos aseguramos de enviar un valor de seguridad que es mantenido por la propiedad de seguridad de acme_ajax_object.

$.get( acme_ajax_object.ajax_url, {

    action:   'get_custom_data',
    security: acme_ajax_object.security

}, function( response) {

  if (undefined !== response.success && false === response.success) {
    return;
  }

  // Parse your response here.

});

Tenga en cuenta que en la función de respuesta, verificamos para asegurarnos de que la respuesta tenga éxito correctamente, la manejemos adecuadamente y luego avancemos con nuestro código.

Entonces, ¿cómo se ve el código del lado del servidor para esto?

3 Verificación de la seguridad

A continuación, en su función de devolución de llamada (que hemos llamado apropiadamente get_custom_data), primero debemos verificar el valor de seguridad antes de hacer cualquier otra cosa.

Si el valor pasa, estamos listos para continuar; de lo contrario, necesitamos enviar un error.

Tenga en cuenta que cuando llamamos a check_ajax_referer, usamos la clave del valor definido en wp_create_nonce y el nombre de la propiedad del objeto que definimos en el primer paso.

Si no funciona, enviamos un error JSON que podemos leer en el JavaScript como vimos anteriormente. Este siempre debe ser el primer paso antes de hacer el trabajo real.

Si todo sale bien, estamos listos para irnos.

¿Es esto realmente seguro?

Esta es la pregunta inevitable, ¿no? Para ser justos, no quiero prometer que esto sea completamente infalible porque no soy un experto en seguridad.

Pero tener un valor nonce que aproveche las funciones de seguridad integradas de WordPress es mejor que enviar datos a ciegas sin forma de verificar la fuente de lo que se envía.

Naturalmente, también debe desinfectar los datos antes de interrogarlos, usarlos, guardarlos potencialmente, etc. Pero ese es el contenido de una publicación diferente.

Esto, en cambio, proporciona una receta para asegurarse de que está enviando solicitudes Ajax seguras en WordPress.