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

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

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

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

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

איך פועל WebOTP API

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

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

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

Your OTP is: 123456.

@web-otp.glitch.me #12345

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

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

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

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

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

לדוגמה:

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

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

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

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

אתם יכולים לנסות את הדמו בעצמכם בכתובת 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 יש את אותו פורמט SMS בתמיכה ב-input[autocomplete="one-time-code"]. ב-Safari, ברגע שמגיעה הודעת SMS שמכילה קוד חד-פעמי שמקושר למקור עם המקור התואם, מופיעה במקלדת הצעה להזין את ה-OTP בשדה הקלט.

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

משוב

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

משאבים

תמונה של rupixen.com ב-Unsplash