מילוי טופסי OTP במסגרות iframe ממקורות שונים באמצעות WebOTP API

מעכשיו אפשר לקבל קודי OTP מתוך iframe באמצעות WebOTP API.

Eiji Kitamura
Yi Gu
קודי OTP (סיסמאות חד-פעמיות) ב-SMS משמשים בדרך כלל לאימות מספרי טלפון, למשל כשלב שני באימות או לאימות תשלומים באינטרנט. עם זאת, המעבר בין הדפדפן לאפליקציית ה-SMS כדי להעתיק ולהדביק את הסיסמה הזמנית או להזין אותה ידנית עלול לגרום לטעויות ולפגוע בחוויית המשתמש.

‫WebOTP API מאפשר לאתרים לקבל באופן פרוגרמטי את הסיסמה החד-פעמית מהודעת SMS ולהזין אותה באופן אוטומטי בטופס עבור המשתמשים בלחיצה אחת בלבד, בלי שהם צריכים לעבור בין האפליקציות. הודעת ה-SMS מעוצבת באופן מיוחד ומקושרת למקור, ולכן היא מצמצמת את הסיכויים שאתרי פישינג יגנבו את הסיסמה החד-פעמית.

תרחיש שימוש אחד שעדיין לא נתמך ב-WebOTP הוא טירגוט של מקור בתוך iframe. בדרך כלל משתמשים בזה לאישור תשלום, במיוחד עם 3D Secure. ‫WebOTP API, שכולל פורמט משותף לתמיכה ב-iframe מדומיינים שונים, מספק עכשיו סיסמאות חד-פעמיות שקשורות למקורות מקוננים החל מגרסה 91 של Chrome.

איך WebOTP API פועל

ממשק WebOTP API עצמו פשוט למדי:

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

הודעת ה-SMS צריכה להיות מעוצבת עם קודים חד-פעמיים שקשורים למקור.

Your OTP is: 123456.

@web-otp.glitch.me #12345

שימו לב שבשורה האחרונה מופיע המקור שאליו צריך לקשר את ה-OTP, כשהוא מופיע אחרי @ ואחרי ה-OTP מופיע #.

כשמתקבלת הודעת טקסט, מופיע סרגל מידע שמבקש מהמשתמש לאמת את מספר הטלפון שלו. אחרי שהמשתמש לוחץ על הלחצן Verify, הדפדפן מעביר באופן אוטומטי את הסיסמה הזמנית לאתר ומאמת את navigator.credentials.get(). לאחר מכן האתר יכול לחלץ את הקוד החד-פעמי ולהשלים את תהליך האימות.

במאמר אימות מספרי טלפון באינטרנט באמצעות WebOTP API מוסבר על השימוש ב-WebOTP.

תרחישים לדוגמה לשימוש ב-iframes ממקורות שונים

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

לדוגמה:

  • משתמש נכנס לאתר shop.example כדי לרכוש זוג נעליים באמצעות כרטיס אשראי.
  • אחרי שמזינים את מספר כרטיס האשראי, ספק התשלומים המשולב מציג טופס מ-bank.example בתוך iframe, שבו המשתמש מתבקש לאמת את מספר הטלפון שלו כדי להשלים את התשלום במהירות.
  • ‫bank.example שולח הודעת SMS עם OTP למשתמש כדי שהוא יוכל להזין אותו ולאמת את הזהות שלו.

איך משתמשים ב-WebOTP API מ-iframe חוצה-מקורות

כדי להשתמש ב-WebOTP API מתוך iframe חוצה מקורות, צריך לבצע שני דברים:

  • מוסיפים הערות למקור של המסגרת העליונה ולמקור של ה-iframe בהודעת ה-SMS.
  • מגדירים את מדיניות ההרשאות כך ש-iframe ממקורות שונים יוכל לקבל קוד אימות חד-פעמי מהמשתמש ישירות.
WebOTP API within an iframe in action.

אתם יכולים לנסות את ההדגמה בעצמכם בכתובת https://web-otp-iframe-demo.stackblitz.io.

הוספת הערות למקורות שקשורים להודעת ה-SMS

כשקוראים ל-WebOTP API מתוך iframe, הודעת ה-SMS חייבת לכלול את המקור של המסגרת העליונה לפני @, ואחריו את ה-OTP לפני #, ואחריו את המקור של ה-iframe לפני @.

@shop.example #123456 @bank.exmple

הגדרת מדיניות ההרשאות

כדי להשתמש ב-WebOTP ב-iframe ממקורות שונים, צריך שהמטמיע ייתן גישה ל-API הזה באמצעות מדיניות ההרשאות otp-credentials כדי למנוע התנהגות לא רצויה. באופן כללי, יש שתי דרכים להשיג את היעד הזה:

  • דרך כותרת HTTP:‏
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • באמצעות מאפיין allow של iframe:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

דוגמאות נוספות לאופן שבו מציינים מדיניות הרשאות

נקודות שצריך לשים לב אליהן:

רמות הסידור הפנימי

בשלב הזה, Chrome תומך רק בקריאות ל-WebOTP API מ-iframes ממקורות שונים שכוללים מקור ייחודי אחד לכל היותר בשרשרת המקורות שלהם. בתרחישים הבאים:

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

השימוש ב-WebOTP באתר b.com נתמך, אבל השימוש בו באתר c.com לא נתמך.

חשוב לדעת: התרחיש הבא לא נתמך גם הוא בגלל חוסר ביקוש ומורכבויות שקשורות לחוויית המשתמש.

  • a.com -> b.com -> a.com (קריאות ל-WebOTP API)

יכולת פעולה הדדית

מנועי דפדפן אחרים שאינם Chromium לא מטמיעים את WebOTP API, אבל ב-Safari יש תמיכה ב-input[autocomplete="one-time-code"] באותו פורמט של SMS. ב-Safari, ברגע שמגיע SMS שמכיל קוד חד-פעמי בפורמט שקשור למקור עם המקור התואם, המקלדת מציעה להזין את ה-OTP בשדה הקלט.

החל מאפריל 2021, דפדפן Safari תומך ב-iframe עם פורמט SMS ייחודי באמצעות %. עם זאת, הוחלט להשתמש ב-@, ואנחנו מקווים שההטמעה של פורמט ה-SMS הנתמך תהיה אחידה.

משוב

המשוב שלכם חשוב לנו מאוד כדי לשפר את WebOTP API. אתם מוזמנים לנסות אותו ולספר לנו מה דעתכם.

משאבים

תמונה מאת rupixen.com ב-Unsplash