{"id":229543,"date":"2022-11-04T11:09:00","date_gmt":"2022-11-04T08:09:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229543"},"modified":"2022-11-09T08:24:12","modified_gmt":"2022-11-09T05:24:12","slug":"enviando-solicitacoes-ajax-seguras-no-wordpress-com-nonces","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/enviando-solicitacoes-ajax-seguras-no-wordpress-com-nonces\/","title":{"rendered":"Enviando solicita\u00e7\u00f5es Ajax seguras no WordPress (com Nonces)"},"content":{"rendered":"\n<p>Eu sei que a <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">API REST<\/a> \u00e9 um grande t\u00f3pico de conversa no WordPress agora, e com raz\u00e3o, mas ainda h\u00e1 momentos em que temos que usar <a href=\"https:\/\/codex.wordpress.org\/AJAX_in_Plugins\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">admin-ajax<\/a> (como est\u00e1 ficando conhecido) por v\u00e1rios motivos.<\/p>\n<ul>\n<li>Talvez seja um aplicativo,<\/li>\n<li>Talvez o tempo n\u00e3o permita criar os endpoints necess\u00e1rios,<\/li>\n<li>Talvez voc\u00ea esteja mais confort\u00e1vel com admin-ajax,<\/li>\n<li>E assim por diante.<\/li>\n<\/ul>\n<p>Independentemente das raz\u00f5es pelas quais voc\u00ea o usa (o que ainda fa\u00e7o, seja l\u00e1 o que for que funcione), acho importante garantir que estamos enviando solicita\u00e7\u00f5es Ajax seguras no WordPress usando nonces, assim como faria se estivesse enviando dados de formul\u00e1rio tradicionais .<\/p>\n<p>Imagem leg\u00edtima e ao vivo de fios carregando sua solicita\u00e7\u00e3o Ajax.<\/p>\n<p>Se voc\u00ea pesquisar na web por resultados sobre como fazer isso, encontrar\u00e1 uma variedade de respostas, e isso ser\u00e1 apenas mais uma gota no balde proverbial.<\/p>\n<p>Mas se voc\u00ea est\u00e1 curioso para uma receita de como lidar com isso, \u00e9 assim que eu fa\u00e7o todas as vezes.<\/p>\n<h2>Solicita\u00e7\u00f5es seguras de Ajax no WordPress<\/h2>\n<p>O processo de envio de solicita\u00e7\u00f5es Ajax seguras para WordPress segue este procedimento:<\/p>\n<ol>\n<li>enfileirar seu arquivo JavaScript e usar <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>certifique-se de que seu JavaScript est\u00e1 enviando o nonce de seguran\u00e7a,<\/li>\n<li>verifique o valor de seguran\u00e7a em seu retorno de chamada e trate-o adequadamente.<\/li>\n<\/ol>\n<p>Com isso dito, aqui est\u00e3o algumas ess\u00eancias para cada um dos itens acima que esperamos levar voc\u00ea a escrever um c\u00f3digo baseado em Ajax mais seguro.<\/p>\n<h3>1 Enfileirar JavaScript, localizar seu script<\/h3>\n<p>Eu sei que isso parece um primeiro passo estranho, considerando que voc\u00ea deve escrev\u00ea-lo antes de enfileirar. E voc\u00ea deveria, claro. Mas para este post, eu queria mostrar o c\u00f3digo necess\u00e1rio antes de entrar nos detalhes.<\/p>\n<p>Existem algumas maneiras pelas quais as pessoas optam por enfileirar admin-ajax.php, mas <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a53a5c982b9e6826369e2f37914ad77b#file-00-wp-localize-script-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">este \u00e9 o processo<\/a> que sigo para enfileirar meu arquivo e adicionar 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 no c\u00f3digo acima que a chamada para <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> \u00e9 exatamente como voc\u00ea esperaria.<\/p>\n<p>Mas <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_localize_script\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_localize_script<\/a> \u00e9 um pouco diferente. Aqui est\u00e1 o que est\u00e1 fazendo:<\/p>\n<ol>\n<li>Segue a chamada para o script de enfileiramento (e a ordem importa),<\/li>\n<li>ele usa o mesmo identificador, ou seja, <strong>acme-security<\/strong> ,<\/li>\n<li>Ele define um objeto que podemos usar em nosso c\u00f3digo JavaScript chamado <strong>acme_ajax_object<\/strong> e define duas propriedades.<\/li>\n<li>A\u00a0 propriedade <strong>ajax_url<\/strong> mant\u00e9m o caminho para admin-ajax.php.<\/li>\n<li>A\u00a0 propriedade <strong>security<\/strong> mant\u00e9m um valor retornado 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>Ent\u00e3o, como aproveitamos tudo isso dentro do contexto do nosso JavaScript?<\/p>\n<h3>2 Usando esta informa\u00e7\u00e3o em JavaScript<\/h3>\n<p>Primeiro, ao fazer uma chamada Ajax, precisamos ter certeza de que estamos usando a\u00a0 propriedade <strong>ajax_url<\/strong> do objeto que definimos no c\u00f3digo acima. Ou seja, a URL da solicita\u00e7\u00e3o deve ser enviada para <strong>acme_ajax_object.ajax_url<\/strong>.<\/p>\n<p>Em seguida, voc\u00ea define a fun\u00e7\u00e3o que deseja chamar. Nesse caso, \u00e9 <strong>get_custom_date<\/strong> que analisaremos em um momento.<\/p>\n<p>Mas a parte mais importante vem a seguir: n\u00f3s nos certificamos de enviar um valor de seguran\u00e7a que \u00e9 mantido pela propriedade <strong>security 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>Observe que, na fun\u00e7\u00e3o de resposta, verificamos se a resposta foi bem-sucedida, tratamos adequadamente e, em seguida, avan\u00e7amos com nosso c\u00f3digo.<\/p>\n<p>Ent\u00e3o, como \u00e9 o c\u00f3digo do lado do servidor para isso?<\/p>\n<h3>3 Verificando a seguran\u00e7a<\/h3>\n<p>Em seguida, em sua fun\u00e7\u00e3o de retorno de chamada (que chamamos apropriadamente de <strong>get_custom_data<\/strong>, precisamos primeiro verificar o valor de seguran\u00e7a antes de fazer qualquer outra coisa.<\/p>\n<p>Se o valor passar, estamos prontos; caso contr\u00e1rio, precisamos enviar um erro.<\/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>Observe que quando chamamos <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 a chave do valor definido em wp_create_nonce e o nome da propriedade do objeto que definimos na primeira etapa.<\/p>\n<p>Caso n\u00e3o d\u00ea certo, enviamos um erro JSON que podemos ler no JavaScript como vimos acima. Este deve ser sempre o primeiro passo antes de fazer o trabalho real.<\/p>\n<p>Se tudo der certo, estamos prontos.<\/p>\n<h2>Isso \u00e9 realmente seguro?<\/h2>\n<p>Esta \u00e9 a pergunta inevit\u00e1vel, n\u00e3o \u00e9? Para ser justo, n\u00e3o quero prometer que isso \u00e9 completamente infal\u00edvel porque n\u00e3o sou especialista em seguran\u00e7a.<\/p>\n<p>Mas ter um valor nonce que alavancar\u00e1 as fun\u00e7\u00f5es de seguran\u00e7a integradas do WordPress \u00e9 melhor do que enviar dados cegamente sem nenhuma maneira de verificar a origem do que est\u00e1 sendo enviado.<\/p>\n<p>Naturalmente, voc\u00ea tamb\u00e9m precisa higienizar os dados antes de interrog\u00e1-los, us\u00e1-los, salv\u00e1-los potencialmente e assim por diante. Mas esse \u00e9 o conte\u00fado para outro post.<\/p>\n<p>Isso, em vez disso, fornece uma receita para garantir que voc\u00ea esteja enviando solicita\u00e7\u00f5es Ajax seguras no WordPress.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As tr\u00eas etapas descritas aqui fornecem uma receita para garantir que voc\u00ea esteja enviando solicita\u00e7\u00f5es Ajax seguras no 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":[898,722,867],"tags":[1170],"class_list":["post-229543","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=229543"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229543\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/166665"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=229543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=229543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=229543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}