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

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

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

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

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

آلية عمل واجهة برمجة التطبيقات WebOTP

إنّ WebOTP API نفسها بسيطة بما يكفي:

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

يجب تنسيق رسالة SMS باستخدام رموًز صالحة لمرة واحدة ومرتبطة بالمصدر.

Your OTP is: 123456.

@web-otp.glitch.me #12345

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

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

تعرَّف على أساسيات استخدام WebOTP في مقالة إثبات ملكية أرقام الهواتف على الويب باستخدام واجهة برمجة التطبيقات WebOTP API.

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

إنّ إدخال كلمة مرور صالحة لمرة واحدة في نموذج داخل إطار iframe من مصدر مختلف هو أمر شائع في سيناريوهات الدفع. تتطلّب بعض جهات إصدار بطاقات الائتمان خطوة تحقّق إضافية لتحقق من هوية المدفوع له. يُعرف هذا الإجراء باسم 3D Secure، ويتم عادةً عرض النموذج في إطار 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.

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

عند استدعاء 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 API من إطارات 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 تنسيق الرسائل القصيرة نفسه مع ميزة input[autocomplete="one-time-code"]. في Safari، بعد وصول رسالة قصيرة تتضمّن تنسيق رمز مُحدَّد المصدر لمرة واحدة مع مصدر مطابق، تقترح لوحة المفاتيح إدخال الرمز المُحدَّد لمرّة واحدة في حقل الإدخال.

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

ملاحظات

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

الموارد

الصورة مقدمة من rupixen.com على Unsplash