Bu yazımızda Netgsm ve Wordfence Security eklenti çakışması çözümünden bahsedeceğiz. Netgsm eklentisinin Woocommerce kayıt formuna sms ile telefon numarası doğrulama özelliği ile ve Wordfence Security eklentisi aynanda aktif olduğunda bu çakışma gerçekleşiyor. Peki bu çakışmanın sebebi ne? Gelin birlikte inceleyelim ve çözelim.
Wordfence Eklentisi Gizli Input ve Netgsm
Wordfence eklentisi oturum açma güvenliği bölümündeki recaptcha özelliğinin işlevselliği için Woocommerce kayıt ve giriş formuna “wfls-email-verification” kimliğine (id) sahip bir gizli girdi (hidden input) ekler. Kayıt formunu doldurduktan sonra sms’i almak için “doğrulama kodu gönder” butonuna tıkladığımızda, Netgsm eklentisinin tetiklediği tarayıcıda uyarı (alert) ile karşılaşırız. Bu uyarıda email adresinin girilmediği yazar, ancak biz email adresini girdik. Bunun sebebi Wordfence Security’in eklediği gizli input elementi mevcutken Netgsm eklentisinin email kutucuğundan veriyi çekememesi. Bu yüzden email adresi girilmedi uyarısı döndürür.
PHP ile Wordfence Filter'ını Kullanmayı Deneyelim
Wordfence’in gizli input elementi, ayarlarda oturum açma güvenliğinde recaptcha key girmesek de varsayılan olarak eklenir. Bunu kaldırmak için aklımıza gelen ilk şey, Wordfence filterlerini kullanarak bu özelliği pasifleştirmek, değil mi? Bir deneyelim.
<?php add_filter( 'wordfence_ls_require_captcha', '__return_false' );
Bu kod güncel sürümde oturum açma güvenliği (ls: login security) için captcha zorunluluğu kaldırmasına rağmen gizli input’u kaldırmaz. Bu durumda en ideal çözüm input’u Javascript ile DOM’dan kaldırmak olabilir. Bu yazımızda Javascript çözümünden bahsedeceğiz. Tabii ki tek çözüm bu değil. Wordfence eklentisinin ilgili input’u eklediği OOP class’ını ve method’unu bulup child tema veya kod snippeti eklentisine yazacağımız kodlarla override edebiliriz.
Gizli Input'u Javascript ile DOM'dan Kaldıralım
Javascript ile gizli input’u kodlardan kaldırmak için aşağıdaki yaklaşımı kullanabiliriz. Yaklaşım detaylarını anlatmadan önce önemli bir konunun üzerinden geçelim. Bu yaklaşımda DOMContentLoaded event’ı kullanılırsa bazı sitelerde kodlar undefined döndürebilir. DOMContentLoaded event’ı her koşulda DOM yüklendiğinde çalışmaz. İşimizi garantiye almak için window.onload event’ı içerisine kodlarımızı yazdık. Bu kodları script etiketleri arasında DOM’daki body etiketinin kapanışından hemen önce eklemenizi öneririz.
// 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());
});
Peki bu kodlarda neler yaptık? Sayfadaki DOM yüklenince oowcRemoveWflsHiddenInput adlı değişken ile Wordfence Security eklentisinin eklediği Eğer element DOM’da bulunmuyorsa (örneğin, formun olmadığı başka sayfada bu kod çalıştıysa) forEach zaten çalışmayacağı için if bloğu ile hedef elementin varlığını kontrol etmedik. forEach döngüsüyle bulunan tüm hedef elementleri kaldırdık. Kodların ES12 standartlarına uygun olması için spread metodu kullanılarak NodeList'i doğrudan bir diziye dönüştürdük. Bu sayede NodeListüzerine direkt olarak bir Array method’u olan forEach’ı kullandık.
