Λύση σύγκρουσης για το Netgsm και το πρόσθετο ασφαλείας του Wordfence

Σε αυτό το άρθρο, θα μιλήσουμε για την επίλυση διενέξεων προσθηκών Netgsm και Wordfence Security. Αυτή η διένεξη προκύπτει όταν η δυνατότητα επαλήθευσης αριθμού τηλεφώνου της προσθήκης Netgsm μέσω SMS προστίθεται στη φόρμα εγγραφής Woocommerce και ενεργοποιείται ταυτόχρονα η προσθήκη Wordfence Security. Ποιος είναι λοιπόν ο λόγος αυτής της σύγκρουσης; Ας το εξετάσουμε και ας το λύσουμε μαζί.

Πρόσθετο Wordfence Κρυφή είσοδος και Netgsm

Η προσθήκη Wordfence προσθέτει μια κρυφή είσοδο με το αναγνωριστικό "wfls-email-verification" στη φόρμα εγγραφής και σύνδεσης Woocommerce για τη λειτουργικότητα της δυνατότητας recaptcha στην ενότητα ασφαλείας σύνδεσης. Όταν κάνουμε κλικ στο κουμπί "αποστολή κωδικού επαλήθευσης" για να λάβουμε το SMS αφού συμπληρώσουμε τη φόρμα εγγραφής, συναντάμε μια προειδοποίηση στο πρόγραμμα περιήγησης που ενεργοποιείται από το πρόσθετο Netgsm. Σε αυτήν την προειδοποίηση, λέει ότι η διεύθυνση email δεν έχει εισαχθεί, αλλά έχουμε εισαγάγει τη διεύθυνση email. Ο λόγος για αυτό είναι ότι το πρόσθετο Netgsm δεν μπορεί να ανακτήσει δεδομένα από το πλαίσιο ηλεκτρονικού ταχυδρομείου, ενώ υπάρχει ένα κρυφό στοιχείο εισαγωγής που έχει προστεθεί από το Wordfence Security. Γι' αυτό επιστρέφει μια προειδοποίηση ότι η διεύθυνση email δεν έχει εισαχθεί.

Ας δοκιμάσουμε να χρησιμοποιήσουμε το φίλτρο Wordfence με την PHP

Το κρυφό στοιχείο εισόδου του Wordfence προστίθεται από προεπιλογή, ακόμα κι αν δεν εισάγουμε το κλειδί recaptcha στις ρυθμίσεις ασφαλείας σύνδεσης. Το πρώτο πράγμα που έρχεται στο μυαλό μας για να το αφαιρέσουμε είναι να απενεργοποιήσουμε αυτήν τη δυνατότητα χρησιμοποιώντας φίλτρα Wordfence, σωστά; Ας το δοκιμάσουμε.

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

Παρόλο που αυτός ο κωδικός καταργεί την απαίτηση captcha για ασφάλεια σύνδεσης (ls: ασφάλεια σύνδεσης) στην τρέχουσα έκδοση, δεν καταργεί την κρυφή είσοδο. Σε αυτήν την περίπτωση, η ιδανική λύση θα ήταν η κατάργηση εισόδου από το DOM με Javascript. Σε αυτό το άρθρο, θα μιλήσουμε για τη λύση Javascript. Φυσικά, αυτή δεν είναι η μόνη λύση. Μπορούμε να βρούμε την κλάση και τη μέθοδο OOP στην οποία το πρόσθετο Wordfence προσθέτει τη σχετική είσοδο και να την αντικαταστήσουμε με τους κωδικούς που γράφουμε στο θυγατρικό θέμα ή στο πρόσθετο αποσπάσματος κώδικα.

Ας αφαιρέσουμε την κρυφή είσοδο από το DOM με Javascript

Μπορούμε να χρησιμοποιήσουμε την ακόλουθη προσέγγιση για να αφαιρέσουμε την κρυφή είσοδο από κώδικες με Javascript. Πριν εξηγήσουμε τις λεπτομέρειες της προσέγγισης, ας δούμε ένα σημαντικό θέμα. Εάν το συμβάν DOMContentLoaded χρησιμοποιείται σε αυτήν την προσέγγιση, οι κωδικοί ενδέχεται να επιστρέψουν απροσδιόριστοι σε ορισμένους ιστότοπους. Το συμβάν DOMContentLoaded δεν εκτελείται όταν το DOM φορτώνεται υπό οποιεσδήποτε συνθήκες. Για να διασφαλίσουμε την επιτυχία μας, γράψαμε τους κωδικούς μας στο συμβάν window.onload. Συνιστούμε να προσθέσετε αυτούς τους κωδικούς μεταξύ των ετικετών σεναρίου, ακριβώς πριν από την ετικέτα κλεισίματος του σώματος στο 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());
});

Τι κάναμε λοιπόν με αυτούς τους κωδικούς; Όταν φορτώνεται το DOM στη σελίδα, η προσθήκη Wordfence Security προσθέτει μια μεταβλητή που ονομάζεται oowcRemoveWflsHiddenInput. Εάν το στοιχείο δεν υπάρχει στο DOM (για παράδειγμα, εάν αυτός ο κώδικας εκτελούνταν σε άλλη σελίδα όπου η φόρμα δεν υπάρχει), δεν ελέγξαμε την ύπαρξη του στοιχείου προορισμού με το μπλοκ if επειδή το forEach δεν θα λειτουργήσει ούτως ή άλλως. Καταργήσαμε όλα τα στοιχεία στόχου που βρέθηκαν με τον βρόχο forEach. Για να διασφαλιστεί ότι οι κωδικοί συμμορφώνονται με τα πρότυπα ES12, χρησιμοποιείται η μέθοδος διασποράς. NodeList'iΤο μετατρέψαμε απευθείας σε πίνακα. Με αυτόν τον τρόπο NodeListΧρησιμοποιήσαμε απευθείας το forEach, το οποίο είναι μια μέθοδος Array.