كيف تفحص نماذج موقعك: التسميات وأنواع الإدخال و HTTPS و CSRF

نماذج التواصل والتسجيل وتسجيل الدخول وإتمام الشراء وخانات البحث هي المواضع التي يطلب فيها موقعك من الزوار أن يفعلوا شيئًا. والنموذج المربك، أو العسير التعبئة على الهاتف، أو غير الآمن، يكلّفك عملاء محتملين وثقة، ومشكلات النماذج قلّما تظهر قبل أن يشتكي أحد، لأن من ينصرفون لا يخبرونك.

معظم مشكلات النماذج ظاهرة في HTML، فيمكن فحصها دون تعبئة أي شيء. وهذا ما ينبغي أن تنظر إليه.

سهولة الاستخدام وإمكانية الوصول

كل حقل يحتاج إلى تسمية

كل حقل إدخال يحتاج إلى <label> مرتبط به عبر for و id (أو يحيط به). قارئات الشاشة تنطق التسمية، والنقر عليها ينقل التركيز إلى الحقل. والنص النائب (placeholder) ليس تسمية: يختفي حالما يبدأ أحد بالكتابة، وتباينه ضعيف في الغالب، ولا يُنطق على نحو موثوق. وإن كان التصميم لا يحتمل حقًّا تسمية ظاهرة، فالبديل الاحتياطي هو aria-label، لكن التسميات الظاهرة تنفع الجميع. ويتناول دليل إمكانية الوصول لدينا التسميات بتفصيل أكبر.

استخدم نوع الإدخال الصحيح

type="email" و type="tel" و type="url" تُظهر لوحة المفاتيح المناسبة على الهواتف وتمنح تحققًا أساسيًا من المتصفح. وحقل الهاتف الذي يحمل type="text" يُلجئ زوار الجوال إلى البحث عن الأرقام. وتنبّه مع type="number": فهو مخصص للكميات، لا لأرقام الهواتف ولا البطاقات ولا الرموز البريدية.

أضف تلميحات autocomplete

السمة autocomplete تخبر المتصفحات ومديري كلمات المرور بماهية كل حقل: name و email و tel و street-address و postal-code و cc-number و current-password و new-password و one-time-code. وهي تتيح للزوار تعبئة النموذج بلمسة واحدة، وهي متطلب في WCAG 2.1 (معيار النجاح 1.3.5) للحقول التي تجمع معلومات عن المستخدم. ولا تضع autocomplete="off" على حقول كلمات المرور: فذلك يدفع الناس إلى كلمات مرور أضعف ومعاد استخدامها.

زر إرسال حقيقي، وتحقق نافع

استخدم <button type="submit"> ليعمل النموذج بمفتاح Enter وبلا JavaScript مخصص. علّم الحقول الإلزامية بالسمة required واذكر ذلك في التسمية، واعرض رسائل الخطأ بجوار الحقل بكلمات واضحة. وإضافة novalidate تعطّل فحوص المتصفح المدمجة؛ ولا بأس بذلك إلا إذا عوّضتها بفحوصك أنت.

الأمان

• HTTPS للصفحة ولوجهة الإرسال. حقل كلمة مرور في صفحة HTTP، أو نموذج تشير سمة action فيه إلى عنوان http://، يرسل ما يكتبه الناس نصًّا مكشوفًا. يجب أن تكون الصفحة ووجهة الإرسال كلتاهما عبر HTTPS.
• لا تستخدم GET لكلمات المرور أبدًا. مع method="get" تدخل قيم النموذج في عنوان URL، ومنه إلى سجل المتصفح وسجلات الخادم وترويسات الإحالة. استخدم method="post" لكل ما هو حساس.
• الحماية من CSRF. النماذج التي تغيّر شيئًا (تسجيل الدخول، تحديث حساب، تقديم طلب) ينبغي حمايتها من تزوير الطلبات عبر المواقع، وذلك في العادة برمز سري في حقل مخفي يتحقق منه الخادم، مع ملفات تعريف ارتباط تحمل SameSite. راجع كيفية فحص أمان ملفات تعريف الارتباط.
• اعرف أين تذهب البيانات. النموذج الذي يرسل إلى نطاق آخر، كمزوّد قوائم بريدية أو نظام CRM، قد يكون متوقعًا، لكن تأكد من أنه مقصود ومشمول بسياسة الخصوصية لديك.
• تحقق على الخادم. تحقق المتصفح تيسير على الزوار الأمناء؛ وأي أحد يستطيع تجاوزه. يجب أن يتحقق الخادم من كل قيمة مجددًا.

كيف يفحص Rudra النماذج دون إرسالها

فاحص الروابط المعطلة المجاني وتدقيق الموقع يحمّلان صفحتك في متصفح حقيقي ويراجعان ما يصل إلى 10 نماذج فيها. وينبّهان، مع ذكر أسماء النماذج والحقول المعنية، إلى:

• حقول كلمات المرور في صفحة HTTP، والنماذج التي ترسل إلى http://، ونماذج كلمات المرور التي تستخدم GET (كل واحدة تخصم 10 نقاط)؛
• الحقول التي لا تسمية لها سوى نص نائب (3 نقاط)؛
• الحقول التي بلا تسمية ميسّرة، وأنواع الإدخال التي لا توافق الحقل (حقل بريد إلكتروني يستخدم type="text")، وغياب تلميحات autocomplete، ووجود autocomplete="off" على كلمات المرور، والنماذج التي ترسل إلى مضيف آخر، والنماذج التي بلا زر إرسال، وحقول البريد أو الهاتف الإلزامية التي بلا قيود، ووجود novalidate، وكلها ملاحظات إعلامية؛
• نماذج POST التي لا يظهر فيها رمز من نوع رموز CSRF، وذلك بثقة منخفضة، لأن الرمز قد يضيفه JavaScript أو قد يحمي الخادم النموذج بطريقة أخرى.

ويسأل الفاحص المتصفح كذلك، مرة واحدة، هل كان سيمنع إرسال الحقول الموسومة بأنها إلزامية وهي فارغة، وذلك بقراءة حالة التحقق لكل حقل، دون نقل التركيز إلى أي شيء أو تعبئته، ودون تشغيل معالجات التحقق الخاصة بالموقع.

لماذا لا نرسل النماذج أبدًا

لإرسال النموذج آثار حقيقية: رسالة تصل إلى بريد أحدهم، أو حساب يُنشأ، أو طلب شراء أو تذكرة دعم تظهر، أو حدّ للمعدل أو فلتر احتيال يُستثار. والأداة الآلية لا سبيل لها إلى معرفة النماذج الآمنة للإرسال، فأداتنا لا ترسل أيًّا منها. النماذج لا تُرسَل ولا تُنقر ولا يُنقل إليها التركيز ولا تُعبّأ أبدًا، والتقارير لا تحتوي إلا على أسماء الحقول وتسمياتها، لا على القيم أبدًا.

وثمن ذلك أن بعض الأمور لا تُختبر إلا بإرسال النموذج، وهذه متروكة لك: هل يصل الإرسال، وكيف تبدو رسائل التأكيد والخطأ، وهل يرفض الخادم المدخلات السيئة أو الآتية من مواقع أخرى، وهل تعمل الحماية من الرسائل المزعجة.

اختبار يدوي لكل نموذج

1. عبّئه على هاتف وتحقق من أن كل حقل يُظهر لوحة المفاتيح المناسبة وأن التعبئة التلقائية تعمل على نحو معقول.
2. أكمله بلوحة المفاتيح وحدها، ثم بقارئ شاشة مثل NVDA أو VoiceOver.
3. أرسله فارغًا، ثم بعنوان بريد إلكتروني خاطئ، واقرأ رسائل الخطأ.
4. أرسله كما ينبغي وتأكد من أن الرسالة تصل إلى حيث يجب.
5. في نماذج تسجيل الدخول والحسابات، اطلب من مطوّر أن يؤكد الحماية من CSRF والتحقق على الخادم.