تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

Dominik Mengelt

Sam Dutton

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

في المثال التالي، يظهر اسم صاحب البطاقة وتاريخ انتهاء صلاحيتها في صفحة المستوى الأعلى (أو الإطار الرئيسي)، ولكن يظهر رقم بطاقة الائتمان ورمز التحقّق في إطارات 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.