{"id":229445,"date":"2022-11-04T11:12:00","date_gmt":"2022-11-04T08:12:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229445"},"modified":"2022-11-09T07:05:34","modified_gmt":"2022-11-09T04:05:34","slug":"envoi-de-requetes-ajax-securisees-dans-wordpress-avec-nonces","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/envoi-de-requetes-ajax-securisees-dans-wordpress-avec-nonces\/","title":{"rendered":"Envoi de requ\u00eates Ajax s\u00e9curis\u00e9es dans WordPress (avec Nonces)"},"content":{"rendered":"\n<p>Je sais que l&rsquo; <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">API REST<\/a> est un \u00e9norme sujet de conversation dans WordPress en ce moment, et \u00e0 juste titre, mais il y a encore des moments o\u00f9 nous devons utiliser <a href=\"https:\/\/codex.wordpress.org\/AJAX_in_Plugins\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">admin-ajax<\/a> (comme on l&rsquo;appelle) pour diverses raisons.<\/p>\n<ul>\n<li>C&rsquo;est peut-\u00eatre une application,<\/li>\n<li>Peut-\u00eatre que le temps ne permet pas de cr\u00e9er les points de terminaison n\u00e9cessaires,<\/li>\n<li>Peut-\u00eatre \u00eates-vous plus \u00e0 l&rsquo;aise avec admin-ajax,<\/li>\n<li>Etc.<\/li>\n<\/ul>\n<p>Quelles que soient les raisons pour lesquelles vous l&rsquo;utilisez (ce que je fais toujours, peu importe ce qui fonctionne), je pense qu&rsquo;il est important de s&rsquo;assurer que nous envoyons des requ\u00eates Ajax s\u00e9curis\u00e9es dans WordPress en utilisant des nonces comme vous le feriez si vous soumettiez des donn\u00e9es de formulaire traditionnelles .<\/p>\n<p>Tir l\u00e9gitime et en direct de fils transportant votre demande Ajax.<\/p>\n<p>Si vous recherchez sur le Web des r\u00e9sultats sur la fa\u00e7on de proc\u00e9der, vous trouverez une vari\u00e9t\u00e9 de r\u00e9ponses, et ce ne sera qu&rsquo;une autre goutte dans le seau proverbial.<\/p>\n<p>Mais si vous \u00eates curieux de savoir comment le g\u00e9rer, voici comment je le fais \u00e0 chaque fois.<\/p>\n<h2>S\u00e9curiser les requ\u00eates Ajax dans WordPress<\/h2>\n<p>Le processus d&rsquo;envoi de requ\u00eates Ajax s\u00e9curis\u00e9es pour WordPress suit cet achat\u00a0:<\/p>\n<ol>\n<li>mettez votre fichier JavaScript en file d&rsquo;attente et utilisez <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>assurez-vous que votre JavaScript envoie la s\u00e9curit\u00e9 nonce,<\/li>\n<li>v\u00e9rifiez la valeur de s\u00e9curit\u00e9 dans votre rappel et g\u00e9rez-la de mani\u00e8re appropri\u00e9e.<\/li>\n<\/ol>\n<p>Cela dit, voici quelques points essentiels pour chacun des \u00e9l\u00e9ments ci-dessus qui, esp\u00e9rons-le, vous conduiront \u00e0 \u00e9crire un code bas\u00e9 sur Ajax plus s\u00e9curis\u00e9.<\/p>\n<h3>1 Mettez JavaScript en file d&rsquo;attente, localisez votre script<\/h3>\n<p>Je sais que cela semble \u00eatre une premi\u00e8re \u00e9tape \u00e9trange \u00e9tant donn\u00e9 que vous devriez l&rsquo;\u00e9crire avant de le mettre en file d&rsquo;attente. Et vous devriez, bien s\u00fbr. Mais pour ce post, je voulais montrer le code n\u00e9cessaire avant de sauter dans les d\u00e9tails.<\/p>\n<p>Les gens choisissent de mettre en file d&rsquo;attente admin-ajax.php de certaines mani\u00e8res, mais voici <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a53a5c982b9e6826369e2f37914ad77b#file-00-wp-localize-script-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">le processus<\/a> que je suis pour mettre en file d&rsquo;attente mon fichier et ajouter admin-ajax.php\u00a0:<\/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>Remarquez dans le code ci-dessus, l&rsquo;appel \u00e0 <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> ressemble exactement \u00e0 ce \u00e0 quoi vous vous attendiez.<\/p>\n<p>Mais <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_localize_script\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_localize_script<\/a> est un peu diff\u00e9rent. Voici ce qu&rsquo;il fait\u00a0:<\/p>\n<ol>\n<li>Il suit l&rsquo;appel au script de mise en file d&rsquo;attente (et l&rsquo;ordre compte),<\/li>\n<li>il utilise le m\u00eame identifiant, \u00e0 savoir <strong>acme-security<\/strong> ,<\/li>\n<li>Il d\u00e9finit un objet que nous pouvons utiliser dans notre code JavaScript appel\u00e9 <strong>acme_ajax_object<\/strong> et d\u00e9finit deux propri\u00e9t\u00e9s.<\/li>\n<li>La\u00a0 propri\u00e9t\u00e9 <strong>ajax_url<\/strong> maintient le chemin vers admin-ajax.php.<\/li>\n<li>La\u00a0 propri\u00e9t\u00e9 <strong>de s\u00e9curit\u00e9<\/strong> conserve une valeur renvoy\u00e9e par <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>Alors, comment exploiter tout cela dans le contexte de notre JavaScript\u00a0?<\/p>\n<h3>2 Utilisation de ces informations en JavaScript<\/h3>\n<p>Tout d&rsquo;abord, lors d&rsquo;un appel Ajax, nous devons nous assurer que nous utilisons la\u00a0 propri\u00e9t\u00e9 <strong>ajax_url<\/strong> de l&rsquo;objet que nous avons d\u00e9fini dans le code ci-dessus. Autrement dit, l&rsquo;URL de la requ\u00eate doit \u00eatre envoy\u00e9e \u00e0 <strong>acme_ajax_object.ajax_url<\/strong>.<\/p>\n<p>Vous d\u00e9finissez ensuite la fonction que vous souhaitez appeler. Dans ce cas, c&rsquo;est <strong>get_custom_date<\/strong> que nous examinerons dans un instant.<\/p>\n<p>Mais la partie la plus importante vient ensuite\u00a0: nous nous assurons ensuite d&rsquo;envoyer une valeur de s\u00e9curit\u00e9 qui est maintenue par la propri\u00e9t\u00e9 de <strong>s\u00e9curit\u00e9 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>Notez que dans la fonction de r\u00e9ponse, nous v\u00e9rifions que la r\u00e9ponse r\u00e9ussit correctement, la g\u00e9rons de mani\u00e8re appropri\u00e9e, puis avan\u00e7ons avec notre code.<\/p>\n<p>Alors, \u00e0 quoi ressemble le code c\u00f4t\u00e9 serveur pour cela\u00a0?<\/p>\n<h3>3 V\u00e9rification de la s\u00e9curit\u00e9<\/h3>\n<p>Ensuite, dans votre fonction de rappel (que nous avons nomm\u00e9e de mani\u00e8re appropri\u00e9e <strong>get_custom_data,<\/strong> nous devons d&rsquo;abord v\u00e9rifier la valeur de s\u00e9curit\u00e9 avant de faire quoi que ce soit d&rsquo;autre.<\/p>\n<p>Si la valeur passe, nous sommes pr\u00eats \u00e0 partir\u00a0; sinon, nous devons envoyer une erreur.<\/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>Notez que lorsque nous appelons <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/check_ajax_referer\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">check_ajax_referer<\/a>, nous utilisons la cl\u00e9 de la valeur d\u00e9finie dans wp_create_nonce et le nom de la propri\u00e9t\u00e9 de l&rsquo;objet que nous avons d\u00e9fini \u00e0 la premi\u00e8re \u00e9tape.<\/p>\n<p>S&rsquo;il ne v\u00e9rifie pas, nous envoyons une erreur JSON que nous pouvons lire dans le JavaScript comme nous l&rsquo;avons vu ci-dessus. Cela devrait toujours \u00eatre la premi\u00e8re \u00e9tape avant de faire un travail r\u00e9el.<\/p>\n<p>Si tout est v\u00e9rifi\u00e9, nous sommes pr\u00eats \u00e0 partir.<\/p>\n<h2>Est-ce vraiment s\u00e9curis\u00e9\u00a0?<\/h2>\n<p>C&rsquo;est la question in\u00e9vitable, n&rsquo;est-ce pas? Pour \u00eatre juste, je ne veux pas promettre que c&rsquo;est compl\u00e8tement infaillible parce que je ne suis pas un expert en s\u00e9curit\u00e9.<\/p>\n<p>Mais avoir une valeur nonce qui tirera parti des fonctions de s\u00e9curit\u00e9 int\u00e9gr\u00e9es de WordPress est pr\u00e9f\u00e9rable \u00e0 l&rsquo;envoi aveugle de donn\u00e9es sans aucun moyen de v\u00e9rifier la source de ce qui est envoy\u00e9.<\/p>\n<p>Naturellement, vous devez \u00e9galement nettoyer les donn\u00e9es avant de les interroger, de les utiliser, \u00e9ventuellement de les enregistrer, etc. Mais c&rsquo;est le contenu d&rsquo;un autre article.<\/p>\n<p>Ceci, \u00e0 la place, fournit une recette pour vous assurer que vous envoyez des requ\u00eates Ajax s\u00e9curis\u00e9es dans WordPress.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les trois \u00e9tapes d\u00e9crites ici fournissent une recette pour vous assurer que vous envoyez des requ\u00eates Ajax s\u00e9curis\u00e9es dans 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":[893,717,862],"tags":[1167],"class_list":["post-229445","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=229445"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/166665"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=229445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=229445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=229445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}