الملء التلقائي المشترك عبر إطارات iframe: اقتراح أولي

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

دومينيك مينجيلت
دومينيك مينجيلت
Twitter GitHub Mastodon
سام دوتون

يتوفّر اقتراح للاختبار للسماح بالملء التلقائي في إطار iframe متعدد المصادر. باستخدام هذه الميزة، يمكن للإطار الأصلي تعيين الإطارات التي يجب أن تكون حقولها قابلة للملء التلقائي. ويكون ذلك مفيدًا بشكلٍ خاص لنماذج الدفع، إذ من الشائع جدًا تحميل الحقول الحسّاسة (لامتثال PCI DSS) من مصدر تابع لجهة خارجية، مثل مقدّم خدمة الدفع (PSP).

في المثال التالي، يظهر اسم حامل البطاقة وتاريخ انتهاء الصلاحية في صفحة المستوى الأعلى (أو الإطار الرئيسي)، بينما يظهر رقم بطاقة الائتمان ورمز التحقّق في إطارات iframe من مقدّم خدمة الدفع.

<!-- Top-level document URL: https://merchant.com/... -->
<form>
  Cardholder name:    <input id="name">
  Credit card number: <iframe src="https://psp.com/..."><input id="num"></iframe>
  Expiration date:    <input id="exp">
  CVC:                <iframe src="https://psp.com/..."><input id="cvc"></iframe>
</form>

يمثل الرسم التخطيطي التالي هيكل النموذج:

رسم بياني على شكل شجرة يوضّح مدى ظهور الحقول المختلفة في إطارات مختلفة في نموذج دفع

بالنسبة إلى التجار، يجمع هذا التصميم بين الأمان والمرونة:

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

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

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

لتوفير تجربة أفضل للملء التلقائي مع الحفاظ على أمان بيانات المستخدم، يعمل فريق Chrome على اقتراح اقتراح يسمح بالملء التلقائي في إطار iframe متعدد المصادر. إذا تم تغيير النموذج لاستخدام الملء التلقائي المشترك، فإن Chrome يملأ رقم بطاقة الائتمان من مصادر متعددة بنجاح:

<!-- Top-level document URL: https://merchant.com/... -->
<form>
  Cardholder name:    <input id="name">
  Credit card number: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="num"></iframe>
  Expiration date:    <input id="exp">
  CVC:                <iframe src="https://psp.com/..." allow="shared-autofill"><input id="cvc"></iframe>
</form>

يمكن أن يؤدي ذلك إلى تجربة الملء التلقائي أفضل للمستخدم:

تجربة ميزة "الملء التلقائي" المشتركة على الجهاز

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

--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill

رصد دعم الميزات

استخدِم الرمز التالي لرصد ما إذا كانت السمة shared-autofill متاحة:

if (document.featurePolicy && document.featurePolicy
      .features().includes('shared-autofill')) {
  console.log('shared-autofill available!');
}

ما هي الخطوات التالية؟

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

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

التعرف على المزيد

الصورة من تصوير جيسيكا روسيلو على Unsplash.