ملء نماذج OTP ضمن إطارات iframe من مصادر متعددة باستخدام WebOTP API

يمكن الآن لواجهة WebOTP API تلقّي كلمات المرور الصالحة لمرة واحدة من داخل إطارات iframe.

Eiji Kitamura
Yi Gu
تُستخدم كلمات المرور الصالحة لمرة واحدة (OTP) التي يتم إرسالها عبر الرسائل القصيرة عادةً لإثبات ملكية أرقام الهواتف، على سبيل المثال كخطوة ثانية في المصادقة أو لإثبات ملكية عمليات الدفع على الويب. ومع ذلك، فإنّ التبديل بين المتصفّح وتطبيق SMS لنسخ كلمة المرور الصالحة لمرة واحدة ولصقها أو إدخالها يدويًا يسهّل ارتكاب الأخطاء ويضيف صعوبة إلى تجربة المستخدم.

تتيح WebOTP API للمواقع الإلكترونية الحصول على كلمة المرور الصالحة لمرة واحدة من رسالة SMS وإدخالها تلقائيًا في النموذج للمستخدمين بنقرة واحدة فقط بدون تبديل التطبيق. تكون رسالة SMS منسَّقة بشكل خاص ومرتبطة بالمصدر، لذا فهي تقلّل من فرص المواقع الإلكترونية المخصّصة للتصيّد الاحتيالي في سرقة كلمة المرور الصالحة لمرة واحدة أيضًا.

من حالات الاستخدام التي لم تكن متاحة في WebOTP هي استهداف مصدر داخل إطار iframe. ويُستخدَم هذا الإجراء عادةً لتأكيد الدفع، خاصةً مع 3D Secure. من خلال توفير التنسيق الشائع لإتاحة إطارات iframe المتعدّدة المصادر، توفّر واجهة برمجة التطبيقات WebOTP API الآن كلمات مرور صالحة لمرة واحدة مرتبطة بمصادر مدمجة، وذلك بدءًا من الإصدار 91 من Chrome.

طريقة عمل WebOTP API

تتسم واجهة WebOTP API بالبساطة:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
…

يجب أن تكون رسالة SMS مُنسَّقة باستخدام الرموز لمرة واحدة المرتبطة بالمصدر.

Your OTP is: 123456.

@web-otp.example.com #12345

يُرجى ملاحظة أنّ السطر الأخير يحتوي على المصدر الذي سيتم ربطه مسبوقًا بـ @، متبوعًا بكلمة المرور الصالحة لمرة واحدة (OTP) مسبوقة بـ #.

عند وصول الرسالة النصية، يظهر شريط معلومات يطلب من المستخدم تأكيد رقم هاتفه. بعد أن ينقر المستخدم على الزر "Verify"، يعيد المتصفّح توجيه كلمة المرور الصالحة لمرة واحدة (OTP) تلقائيًا إلى الموقع الإلكتروني ويحلّ navigator.credentials.get(). يمكن للموقع الإلكتروني بعد ذلك استخراج كلمة المرور الصالحة لمرة واحدة وإكمال عملية إثبات الهوية.

تعرَّف على أساسيات استخدام WebOTP في مقالة التحقّق من أرقام الهاتف على الويب باستخدام WebOTP API.

حالات استخدام إطارات iframe المتعدّدة المصادر

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

على سبيل المثال:

  • يزور مستخدم الموقع الإلكتروني shop.example لشراء حذاء باستخدام بطاقة ائتمان.
  • بعد إدخال رقم بطاقة الائتمان، يعرض مقدّم خدمات الدفع المدمج نموذجًا من "bank.example" ضمن إطار iframe يطلب من المستخدم تأكيد رقم هاتفه لإتمام الدفع بسرعة.
  • يرسل "bank.example" رسالة قصيرة تحتوي على كلمة مرور صالحة لمرة واحدة (OTP) إلى المستخدم ليتمكّن من إدخالها لإثبات هويته.

كيفية استخدام WebOTP API من إطار iframe متعدّد المصادر

لاستخدام WebOTP API من داخل إطار iframe متعدّد المصادر، عليك تنفيذ أمرين:

  • أضِف تعليقات توضيحية لكلّ من مصدر الإطار العلوي ومصدر iframe في الرسالة النصية القصيرة.
  • اضبط سياسة الأذونات للسماح لإطار iframe المتعدّد المصادر بتلقّي كلمة المرور الصالحة لمرة واحدة (OTP) من المستخدم مباشرةً.
WebOTP API ضمن إطار iframe قيد التنفيذ

يمكنك تجربة العرض التوضيحي بنفسك على https://web-otp-iframe-demo.stackblitz.io.

إضافة تعليقات توضيحية للمصادر المرتبطة بالرسالة النصية القصيرة

عند طلب WebOTP API من داخل إطار iframe، يجب أن تتضمّن الرسالة النصية القصيرة مصدر الإطار العلوي مسبوقًا بـ @ متبوعًا بكلمة المرور الصالحة لمرة واحدة (OTP) مسبوقة بـ # متبوعة بمصدر إطار iframe مسبوقًا بـ @.

@shop.example #123456 @bank.exmple

ضبط سياسة الأذونات

لاستخدام WebOTP في إطار iframe متعدّد المصادر، يجب أن يمنح المُضمِّن إذن الوصول إلى واجهة برمجة التطبيقات هذه من خلال سياسة الأذونات الخاصة ببيانات اعتماد OTP لتجنُّب أي سلوك غير مقصود. بشكل عام، هناك طريقتان لتحقيق هذا الهدف:

  • من خلال عنوان HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • من خلال سمة iframe ‏allow:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

يمكنك الاطّلاع على مزيد من الأمثلة حول كيفية تحديد سياسة الأذونات .

المحاذير

مستويات التداخل

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

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

استخدام WebOTP في b.com متاح، ولكن استخدامه في c.com غير متاح.

يُرجى العِلم أنّ السيناريو التالي غير متاح أيضًا بسبب عدم وجود طلب عليه وتعقيدات تجربة المستخدم.

  • ‫a.com -> b.com -> a.com (يطلب WebOTP API)

إمكانية التشغيل التفاعلي

مع أنّ محركات المتصفّحات الأخرى غير Chromium لا تستخدم WebOTP API، يشارك Safari تنسيق SMS نفسه مع ميزة input[autocomplete="one-time-code"]. في Safari، فور وصول رسالة قصيرة SMS تحتوي على تنسيق رمز لمرة واحدة مرتبط بالمصدر مع المصدر المطابق، تقترح لوحة المفاتيح إدخال كلمة المرور الصالحة لمرة واحدة في حقل الإدخال.

اعتبارًا من أبريل 2021، أصبح Safari يتيح استخدام iframe مع تنسيق SMS فريد باستخدام %. ومع ذلك، بما أنّ مناقشة المواصفات انتهت إلى استخدام @ بدلاً من ذلك، نأمل أن يتم توحيد تنفيذ تنسيق الرسائل القصيرة المتوافق.

الملاحظات

تُعدّ ملاحظاتك مهمة جدًا في تحسين WebOTP API، لذا جرِّبها وأخبرنا برأيك.

الموارد