حل تعارض المكونات الإضافية لـ Netgsm وWordfence Security

سنتحدث في هذه المقالة عن حل تعارض المكون الإضافي Netgsm وWordfence Security. يحدث هذا التعارض عندما تتم إضافة ميزة التحقق من رقم الهاتف الخاصة بالمكون الإضافي Netgsm عبر الرسائل القصيرة إلى نموذج تسجيل Woocommerce ويتم تنشيط المكون الإضافي Wordfence Security في نفس الوقت. إذن ما هو سبب هذا الصراع؟ دعونا نفحصها ونحلها معًا.

المدخلات المخفية للمكون الإضافي Wordfence وNetgsm

يضيف مكون Wordfence الإضافي مدخلاً مخفيًا بمعرف "wfls-email-verification" إلى نموذج التسجيل وتسجيل الدخول في Woocommerce لوظيفة ميزة recaptcha في قسم أمان تسجيل الدخول. عندما نضغط على زر "إرسال رمز التحقق" لتلقي الرسائل القصيرة بعد ملء نموذج التسجيل، نواجه تحذيرًا في المتصفح يتم تشغيله بواسطة المكون الإضافي Netgsm. في هذا التحذير، يقول أنه لم يتم إدخال عنوان البريد الإلكتروني، ولكننا أدخلنا عنوان البريد الإلكتروني. والسبب في ذلك هو أن المكون الإضافي Netgsm لا يمكنه استرداد البيانات من صندوق البريد الإلكتروني أثناء وجود عنصر إدخال مخفي تمت إضافته بواسطة Wordfence Security. ولهذا السبب يُرجع تحذيرًا بعدم إدخال عنوان البريد الإلكتروني.

دعونا نحاول استخدام مرشح Wordfence مع PHP

تتم إضافة عنصر الإدخال المخفي في Wordfence افتراضيًا، حتى إذا لم نقم بإدخال مفتاح recaptcha في إعدادات أمان تسجيل الدخول. أول ما يتبادر إلى أذهاننا لإزالة هذا هو تعطيل هذه الميزة باستخدام مرشحات Wordfence، أليس كذلك؟ دعونا نحاول ذلك.

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

على الرغم من أن هذا الرمز يزيل متطلبات captcha لأمان تسجيل الدخول (ls: أمان تسجيل الدخول) في الإصدار الحالي، إلا أنه لا يزيل الإدخال المخفي. في هذه الحالة، سيكون الحل المثالي هو إزالة الإدخال من DOM باستخدام 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.