{"id":229155,"date":"2022-11-04T10:48:00","date_gmt":"2022-11-04T07:48:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229155"},"modified":"2022-11-09T05:44:52","modified_gmt":"2022-11-09T02:44:52","slug":"envio-de-solicitudes-seguras-de-ajax-en-wordpress-con-nonces","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/envio-de-solicitudes-seguras-de-ajax-en-wordpress-con-nonces\/","title":{"rendered":"Env\u00edo de solicitudes seguras de Ajax en WordPress (con Nonces)"},"content":{"rendered":"\n<p>S\u00e9 que la <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">API REST<\/a> es un gran tema de conversaci\u00f3n en WordPress en este momento, y con raz\u00f3n, pero todav\u00eda hay momentos en los que tenemos que usar <a href=\"https:\/\/codex.wordpress.org\/AJAX_in_Plugins\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">admin-ajax<\/a> (como se le conoce) por una variedad de razones.<\/p>\n<ul>\n<li>Tal vez sea una aplicaci\u00f3n,<\/li>\n<li>Quiz\u00e1s el tiempo no permita crear los puntos finales necesarios,<\/li>\n<li>Quiz\u00e1s te sientas m\u00e1s c\u00f3modo con admin-ajax,<\/li>\n<li>Y as\u00ed.<\/li>\n<\/ul>\n<p>Independientemente de las razones por las que lo usa (que todav\u00eda 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\u00eda si estuviera enviando datos de formularios tradicionales. .<\/p>\n<p>Toma leg\u00edtima y en vivo de cables que llevan su solicitud de Ajax.<\/p>\n<p>Si busca resultados en la web sobre c\u00f3mo hacer eso, encontrar\u00e1 una variedad de respuestas, y esto ser\u00e1 solo otra gota en el cubo proverbial.<\/p>\n<p>Pero si tiene curiosidad por una receta sobre c\u00f3mo manejarlo, as\u00ed es como lo hago cada vez.<\/p>\n<h2>Solicitudes seguras de Ajax en WordPress<\/h2>\n<p>El proceso para enviar solicitudes Ajax seguras para WordPress sigue este procedimiento:<\/p>\n<ol>\n<li>ponga en cola su archivo JavaScript y use <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_localize_script\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_localize_script<\/a> ,<\/li>\n<li>aseg\u00farese de que su JavaScript est\u00e9 enviando el nonce de seguridad,<\/li>\n<li>verifique el valor de seguridad en su devoluci\u00f3n de llamada y tr\u00e1telo adecuadamente.<\/li>\n<\/ol>\n<p>Dicho esto, aqu\u00ed hay algunos puntos esenciales para cada uno de los anteriores que, con suerte, lo llevar\u00e1n a escribir un c\u00f3digo basado en Ajax m\u00e1s seguro.<\/p>\n<h3>1 Ponga JavaScript en cola, localice su script<\/h3>\n<p>S\u00e9 que esto parece un primer paso extra\u00f1o considerando que debe escribirlo antes de ponerlo en cola. Y deber\u00edas, por supuesto. Pero para esta publicaci\u00f3n, quer\u00eda mostrar el c\u00f3digo necesario antes de pasar a los detalles.<\/p>\n<p>Hay algunas formas en que las personas optan por poner en cola admin-ajax.php, pero <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a53a5c982b9e6826369e2f37914ad77b#file-00-wp-localize-script-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">este es el proceso<\/a> que sigo tanto para poner en cola mi archivo como para agregar admin-ajax.php:<\/p>\n<pre><code>&lt;?php\n\nwp_enqueue_script(\n  'acme-security',\n  $this-&gt;plugin_url. 'assets\/js\/plugin.js',\n  [ 'jquery' ],\n  false,\n  true\n);\n\nwp_localize_script(\n  'acme-security',\n  'acme_ajax_object',\n  [\n    'ajax_url'  =&gt; admin_url( 'admin-ajax.php' ),\n    'security'  =&gt; wp_create_nonce( 'acme-security-nonce' ),\n  ]\n);<\/code><\/pre>\n<p>Observe en el c\u00f3digo anterior, la llamada a <a href=\"https:\/\/www.google.com\/url?sa=t&#038;rct=j&#038;q=&#038;esrc=s&#038;source=web&#038;cd=1&#038;ved=0ahUKEwjA9NijppDUAhVIWSYKHTzDAVYQFggnMAA&#038;url=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Ffunctions%2Fwp_enqueue_script%2F&#038;usg=AFQjCNEAqOC2ehwxSG7UntToWhDVHXLVUA&#038;sig2=7VfQ0cL4-Pt1e8oV0mDKRg&#038;cad=rjt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_enqueue_script<\/a> se ve exactamente como lo esperar\u00eda.<\/p>\n<p>Pero <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_localize_script\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_localize_script<\/a> es un poco diferente. Esto es lo que est\u00e1 haciendo:<\/p>\n<ol>\n<li>Sigue la secuencia de comandos llamada a poner en cola (y el orden es importante),<\/li>\n<li>utiliza el mismo identificador, a saber, <strong>acme-security<\/strong> ,<\/li>\n<li>Define un objeto que podemos usar en nuestro c\u00f3digo JavaScript llamado <strong>acme_ajax_object<\/strong> y define dos propiedades.<\/li>\n<li>La\u00a0 propiedad <strong>ajax_url<\/strong> mantiene la ruta a admin-ajax.php.<\/li>\n<li>La\u00a0 propiedad de <strong>seguridad<\/strong> mantiene un valor devuelto por <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_create_nonce\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_create_nonce<\/a>.<\/li>\n<\/ol>\n<p>Entonces, \u00bfc\u00f3mo aprovechamos todo esto dentro del contexto de nuestro JavaScript?<\/p>\n<h3>2 Uso de esta informaci\u00f3n en JavaScript<\/h3>\n<p>Primero, al realizar una llamada Ajax, debemos asegurarnos de que estamos usando la\u00a0 propiedad <strong>ajax_url<\/strong> del objeto que definimos en el c\u00f3digo anterior. Es decir, la URL de la solicitud debe enviarse a <strong>acme_ajax_object.ajax_url<\/strong>.<\/p>\n<p>A continuaci\u00f3n, defina la funci\u00f3n que desea llamar. En este caso, es <strong>get_custom_date<\/strong> que veremos en un momento.<\/p>\n<p>Pero la parte m\u00e1s importante viene a continuaci\u00f3n: luego nos aseguramos de enviar un valor de seguridad que es mantenido por la propiedad de <strong>seguridad de<\/strong> <strong>acme_ajax_object<\/strong>.<\/p>\n<pre><code>$.get( acme_ajax_object.ajax_url, {\n\n    action:   'get_custom_data',\n    security: acme_ajax_object.security\n\n}, function( response) {\n\n  if (undefined !== response.success &amp;&amp; false === response.success) {\n    return;\n  }\n\n  \/\/ Parse your response here.\n\n});<\/code><\/pre>\n<p>Tenga en cuenta que en la funci\u00f3n de respuesta, verificamos para asegurarnos de que la respuesta tenga \u00e9xito correctamente, la manejemos adecuadamente y luego avancemos con nuestro c\u00f3digo.<\/p>\n<p>Entonces, \u00bfc\u00f3mo se ve el c\u00f3digo del lado del servidor para esto?<\/p>\n<h3>3 Verificaci\u00f3n de la seguridad<\/h3>\n<p>A continuaci\u00f3n, en su funci\u00f3n de devoluci\u00f3n de llamada (que hemos llamado apropiadamente <strong>get_custom_data)<\/strong>, primero debemos verificar el valor de seguridad antes de hacer cualquier otra cosa.<\/p>\n<p>Si el valor pasa, estamos listos para continuar; de lo contrario, necesitamos enviar un error.<\/p>\n<pre><code>&lt;?php\n\npublic function get_custom_data() {\n\n  if (! check_ajax_referer( 'acme-security-nonce', 'security', false)) {\n\n    wp_send_json_error( 'Invalid security token sent.' );\n    wp_die();\n  }\n\n  \/\/ The rest of the function that does actual work.\n\n}<\/code><\/pre>\n<p>Tenga en cuenta que cuando llamamos a <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/check_ajax_referer\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">check_ajax_referer<\/a>, usamos la clave del valor definido en wp_create_nonce y el nombre de la propiedad del objeto que definimos en el primer paso.<\/p>\n<p>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.<\/p>\n<p>Si todo sale bien, estamos listos para irnos.<\/p>\n<h2>\u00bfEs esto realmente seguro?<\/h2>\n<p>Esta es la pregunta inevitable, \u00bfno? Para ser justos, no quiero prometer que esto sea completamente infalible porque no soy un experto en seguridad.<\/p>\n<p>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\u00eda.<\/p>\n<p>Naturalmente, tambi\u00e9n debe desinfectar los datos antes de interrogarlos, usarlos, guardarlos potencialmente, etc. Pero ese es el contenido de una publicaci\u00f3n diferente.<\/p>\n<p>Esto, en cambio, proporciona una receta para asegurarse de que est\u00e1 enviando solicitudes Ajax seguras en WordPress.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los tres pasos descritos aqu\u00ed proporcionan una receta para asegurarse de que est\u00e1 enviando solicitudes Ajax seguras en WordPress.<\/p>\n","protected":false},"author":1,"featured_media":166665,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,716,861],"tags":[1172],"class_list":["post-229155","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229155"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229155\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/166665"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}