Envoi de requêtes Ajax sécurisées dans WordPress (avec Nonces)

Je sais que l’ API REST est un énorme sujet de conversation dans WordPress en ce moment, et à juste titre, mais il y a encore des moments où nous devons utiliser admin-ajax (comme on l’appelle) pour diverses raisons.

• C’est peut-être une application,
• Peut-être que le temps ne permet pas de créer les points de terminaison nécessaires,
• Peut-être êtes-vous plus à l’aise avec admin-ajax,
• Etc.

Quelles que soient les raisons pour lesquelles vous l’utilisez (ce que je fais toujours, peu importe ce qui fonctionne), je pense qu’il est important de s’assurer que nous envoyons des requêtes Ajax sécurisées dans WordPress en utilisant des nonces comme vous le feriez si vous soumettiez des données de formulaire traditionnelles .

Tir légitime et en direct de fils transportant votre demande Ajax.

Si vous recherchez sur le Web des résultats sur la façon de procéder, vous trouverez une variété de réponses, et ce ne sera qu’une autre goutte dans le seau proverbial.

Mais si vous êtes curieux de savoir comment le gérer, voici comment je le fais à chaque fois.

Sécuriser les requêtes Ajax dans WordPress

Le processus d’envoi de requêtes Ajax sécurisées pour WordPress suit cet achat :

1. mettez votre fichier JavaScript en file d’attente et utilisez wp_localize_script ,
2. assurez-vous que votre JavaScript envoie la sécurité nonce,
3. vérifiez la valeur de sécurité dans votre rappel et gérez-la de manière appropriée.

Cela dit, voici quelques points essentiels pour chacun des éléments ci-dessus qui, espérons-le, vous conduiront à écrire un code basé sur Ajax plus sécurisé.

1 Mettez JavaScript en file d’attente, localisez votre script

Je sais que cela semble être une première étape étrange étant donné que vous devriez l’écrire avant de le mettre en file d’attente. Et vous devriez, bien sûr. Mais pour ce post, je voulais montrer le code nécessaire avant de sauter dans les détails.

Les gens choisissent de mettre en file d’attente admin-ajax.php de certaines manières, mais voici le processus que je suis pour mettre en file d’attente mon fichier et ajouter admin-ajax.php :

Remarquez dans le code ci-dessus, l’appel à wp_enqueue_script ressemble exactement à ce à quoi vous vous attendiez.

Mais wp_localize_script est un peu différent. Voici ce qu’il fait :

1. Il suit l’appel au script de mise en file d’attente (et l’ordre compte),
2. il utilise le même identifiant, à savoir acme-security ,
3. Il définit un objet que nous pouvons utiliser dans notre code JavaScript appelé acme_ajax_object et définit deux propriétés.
4. La  propriété ajax_url maintient le chemin vers admin-ajax.php.
5. La  propriété de sécurité conserve une valeur renvoyée par wp_create_nonce.

Alors, comment exploiter tout cela dans le contexte de notre JavaScript ?

2 Utilisation de ces informations en JavaScript

Tout d’abord, lors d’un appel Ajax, nous devons nous assurer que nous utilisons la  propriété ajax_url de l’objet que nous avons défini dans le code ci-dessus. Autrement dit, l’URL de la requête doit être envoyée à acme_ajax_object.ajax_url.

Vous définissez ensuite la fonction que vous souhaitez appeler. Dans ce cas, c’est get_custom_date que nous examinerons dans un instant.

Mais la partie la plus importante vient ensuite : nous nous assurons ensuite d’envoyer une valeur de sécurité qui est maintenue par la propriété de sécurité 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.

});

Notez que dans la fonction de réponse, nous vérifions que la réponse réussit correctement, la gérons de manière appropriée, puis avançons avec notre code.

Alors, à quoi ressemble le code côté serveur pour cela ?

3 Vérification de la sécurité

Ensuite, dans votre fonction de rappel (que nous avons nommée de manière appropriée get_custom_data, nous devons d’abord vérifier la valeur de sécurité avant de faire quoi que ce soit d’autre.

Si la valeur passe, nous sommes prêts à partir ; sinon, nous devons envoyer une erreur.

Notez que lorsque nous appelons check_ajax_referer, nous utilisons la clé de la valeur définie dans wp_create_nonce et le nom de la propriété de l’objet que nous avons défini à la première étape.

S’il ne vérifie pas, nous envoyons une erreur JSON que nous pouvons lire dans le JavaScript comme nous l’avons vu ci-dessus. Cela devrait toujours être la première étape avant de faire un travail réel.

Si tout est vérifié, nous sommes prêts à partir.

Est-ce vraiment sécurisé ?

C’est la question inévitable, n’est-ce pas? Pour être juste, je ne veux pas promettre que c’est complètement infaillible parce que je ne suis pas un expert en sécurité.

Mais avoir une valeur nonce qui tirera parti des fonctions de sécurité intégrées de WordPress est préférable à l’envoi aveugle de données sans aucun moyen de vérifier la source de ce qui est envoyé.

Naturellement, vous devez également nettoyer les données avant de les interroger, de les utiliser, éventuellement de les enregistrer, etc. Mais c’est le contenu d’un autre article.

Ceci, à la place, fournit une recette pour vous assurer que vous envoyez des requêtes Ajax sécurisées dans WordPress.