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

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

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

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

إحدى حالات الاستخدام التي لم يتم دعمها بعد في WebOTP هي استهداف مصدر. داخل iframe. يُستخدَم هذا عادةً لتأكيد الدفعة، خاصةً باستخدام نظام الأمان الثلاثي الأبعاد سيساعدك وجود القواسم المشتركة لإتاحة الوصول من نطاقات أخرى iframe، تعرضها واجهة برمجة التطبيقات WebOTP API الآن تكون كلمات المرور لمرة واحدة (OTP) المرتبطة بمصادر مدمَجة تبدأ من Chrome 91.

آلية عمل WebOTP API

واجهة برمجة التطبيقات WebOTP API نفسها بسيطة بما يكفي:

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

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

Your OTP is: 123456.

@web-otp.glitch.me #12345

لاحظ أنه في السطر الأخير يحتوي على الأصل المراد ضمه قبله علامة @ متبوعة بكلمة مرور لمرة واحدة مسبوقة بعبارة #.

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

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

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

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

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

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

كيفية استخدام واجهة برمجة التطبيقات WebOTP API من إطار iframe متعدد المصادر

لاستخدام واجهة برمجة التطبيقات WebOTP API من داخل إطار iframe متعدد المصادر، عليك تنفيذ الأشياء:

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

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

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

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

@shop.example #123456 @bank.exmple

إعداد سياسة الأذونات

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

  • عبر عنوان HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • عبر سمة allow في إطار iframe:
<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

استخدام كلمة المرور لمرة واحدة (OTP) في b.com متاحة ولكن لا يمكن استخدامها في c.com.

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

  • a.com -> b.com -> a.com (استدعاء واجهة برمجة التطبيقات WebOTP API)

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

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

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

ملاحظات

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

الموارد

صورة من موقع rupixen.com على Unspark