Solution de conflit avec les plugins de sécurité Netgsm et Wordfence

Dans cet article, nous parlerons de la résolution des conflits entre Netgsm et Wordfence Security. Ce conflit se produit lorsque la fonction de vérification du numéro de téléphone du plugin Netgsm via SMS est ajoutée au formulaire d'inscription Woocommerce et que le plugin Wordfence Security est activé en même temps. Alors quelle est la raison de ce conflit ? Examinons et résolvons-le ensemble.

Entrée cachée du plugin Wordfence et Netgsm

Le plugin Wordfence ajoute une entrée cachée avec l'ID "wfls-email-verification" au formulaire d'inscription et de connexion Woocommerce pour la fonctionnalité de la fonction recaptcha dans la section de sécurité de connexion. Lorsque l'on clique sur le bouton « envoyer le code de vérification » pour recevoir le SMS après avoir rempli le formulaire d'inscription, nous rencontrons un avertissement dans le navigateur déclenché par le plug-in Netgsm. Dans cet avertissement, il est indiqué que l'adresse e-mail n'a pas été saisie, mais que nous avons saisi l'adresse e-mail. La raison en est que le plugin Netgsm ne peut pas récupérer les données de la boîte e-mail tant qu'il y a un élément d'entrée caché ajouté par Wordfence Security. C'est pourquoi il renvoie un avertissement indiquant que l'adresse e-mail n'a pas été saisie.

Essayons d'utiliser le filtre Wordfence avec PHP

L'élément de saisie caché de Wordfence est ajouté par défaut, même si nous ne saisissons pas la clé recaptcha dans les paramètres de sécurité de connexion. La première chose qui nous vient à l'esprit pour supprimer cela est de désactiver cette fonctionnalité à l'aide des filtres Wordfence, n'est-ce pas ? Essayons.

<?php add_filter( 'wordfence_ls_require_captcha', '__return_false' );

Bien que ce code supprime l'exigence de captcha pour la sécurité de connexion (ls : login security) dans la version actuelle, il ne supprime pas l'entrée masquée. Dans ce cas, la solution idéale serait de supprimer les entrées du DOM avec Javascript. Dans cet article, nous parlerons de la solution Javascript. Bien entendu, ce n’est pas la seule solution. Nous pouvons trouver la classe et la méthode POO auxquelles le plugin Wordfence ajoute l'entrée appropriée et la remplacer par les codes que nous écrivons dans le thème enfant ou le plugin d'extrait de code.

Supprimons les entrées cachées du DOM avec Javascript

Nous pouvons utiliser l'approche suivante pour supprimer les entrées masquées des codes avec Javascript. Avant d'expliquer les détails de l'approche, revenons sur une question importante. Si l'événement DOMContentLoaded est utilisé dans cette approche, les codes peuvent renvoyer un caractère indéfini sur certains sites. L'événement DOMContentLoaded ne s'exécute pas lorsque le DOM est chargé en toutes circonstances. Pour assurer notre succès, nous avons écrit nos codes dans l'événement window.onload. Nous vous recommandons d'ajouter ces codes parmi les balises de script, juste avant la balise body de fermeture dans le DOM.

// Remove Wordfence Security hidden email input due to conflict with Netgsm plugin by Onur Özden Web Çözümleri
 window.addEventListener('load', () => {
    // used window.onload due to DOMContentLoaded not working properly for this codes
  const oowcRemoveWflsHiddenInput = [...document.querySelectorAll("input[name='wfls-email-verification']")];
  oowcRemoveWflsHiddenInput.forEach(hiddenInput => hiddenInput.remove());
});

Alors qu’avons-nous fait de ces codes ? Lorsque le DOM de la page est chargé, le plugin Wordfence Security ajoute une variable appelée oowcRemoveWflsHiddenInput. Si l'élément n'est pas présent dans le DOM (par exemple, si ce code s'est exécuté sur une autre page où le formulaire n'existe pas), nous n'avons pas vérifié l'existence de l'élément cible avec le bloc if car forEach ne fonctionnera de toute façon pas. Nous avons supprimé tous les éléments cibles trouvés avec la boucle forEach. Pour garantir que les codes sont conformes aux normes ES12, la méthode spread est utilisée. NodeList'iNous l'avons converti directement en tableau. De cette façon NodeListNous avons directement utilisé forEach, qui est une méthode Array.