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

WebOTP API יכול עכשיו לקבל OTP מתוך iframes.

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

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

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

הסבר על WebOTP API

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

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

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

Your OTP is: 123456.

@web-otp.glitch.me #12345

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

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

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

תרחישים לדוגמה במסגרות iframe ממקורות שונים

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

לדוגמה:

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

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

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

  • יש להוסיף הערות גם למקור המסגרת העליונה וגם למקור ה-iframe בטקסט של ה-SMS הודעה.
  • הגדרת מדיניות הרשאות כדי לאפשר ל-iframe ממקורות שונים לקבל OTP ישירות מהמשתמש.
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 כדי למנוע הצגה של מודעות בלי כוונה או התנהגות המשתמשים. באופן כללי, יש שתי דרכים להשיג את היעד הזה:

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

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

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

רמות קינון

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

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

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

משוב

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

משאבים

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