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

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

Dominik Mengelt
Dominik Mengelt
X GitHub Mastodon
Sam Dutton

הצעה לאפשר מילוי אוטומטי ב-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>

כך אפשר לשפר את חוויית המילוי האוטומטי של המשתמש:

איך בודקים את המילוי האוטומטי המשותף באופן מקומי

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

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

למידע נוסף

תמונה של Jessica Ruscello ב-Unsplash.