מילוי אוטומטי משותף בין מסגרות iframe: הצעה ראשונית

בטפסים מסוימים יש שדות ב-iframe, ולכן יש בעיות במילוי האוטומטי של הדפדפן. באמצעות מילוי אוטומטי משותף, מסגרת ההורה יכולה לציין את האמינות של מסגרות iframe ממקורות שונים כדי לספק חוויית מילוי אוטומטי טובה יותר עבור המשתמש.

דומיניק מנגלט
דומיניק מנגלט
Twitter GitHub Mastodon
סאם דוטון

הצעה לאפשר מילוי אוטומטי ב-iframe ממקורות שונים זמינה לבדיקה. באמצעות התכונה הזו, מסגרת הורה יכולה להקצות את המסגרות שהשדות שלהן צריכים להיות ניתנים למילוי אוטומטי. האפשרות הזו שימושית במיוחד עבור טופסי תשלום, שבהם פעמים רבות ששדות רגישים (לתאימות ל-PCI DSS) נטענים ממקור של צד שלישי, כמו ספק שירות תשלומים (PSP).

בדוגמה הבאה, השם ותאריך התפוגה של בעל הכרטיס מופיעים בדף ברמה העליונה (או במסגרת הראשית), אבל מספר כרטיס האשראי וקוד האימות נמצאים במסגרות iframe של ספק שירותי תשלום (PSP).

<!-- 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> (מספר כרטיס האשראי, Cvc) מוטמעים על ידי ספק מצד שלישי, צרו איתנו קשר. נשמח לשמוע אם המילוי האוטומטי המשותף במסגרות iframe עשוי לשפר את חוויית השימוש במילוי האוטומטי של המשתמשים בתהליך התשלום.

למידע נוסף

תמונה מאת Jessica Ruscello ב-UnFlood.