עכשיו אפשר לקבל קודי OTP מ-WebOTP API מתוך iframes.
באמצעות WebOTP API, אתרים יכולים לקבל באופן פרוגרמטי את הסיסמה החד-פעמית מהודעת SMS, ולהזין אותה אוטומטית בטופס למשתמשים בהקשה אחת בלבד, בלי להחליף את האפליקציה. ה-SMS מעוצב במיוחד וקשור למקור, כך שהוא מצמצם את הסיכויים שאתרי פישינג יגנבו גם את הסיסמה החד-פעמית.
תרחיש לדוגמה שעדיין לא נתמך ב-WebOTP הוא טירגוט של מקור בתוך iframe. בדרך כלל משתמשים בה כדי לאשר תשלום, במיוחד עם 3D Secure. החל מ-Chrome 91, ב-WebOTP API יש פורמט נפוץ שתומך ב-iframes ממקורות שונים, ולכן הוא מספק עכשיו סיסמאות חד-פעמיות שמקושרות למקורות בתוך מקורות.
הסבר על WebOTP API
ממשק ה-API של WebOTP עצמו פשוט למדי:
…
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.
תרחישים לדוגמה של 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 שמקורו במקור אחר.
אתם יכולים לנסות את הדמו בעצמכם בכתובת 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")
- באמצעות מאפיין iframe
allow:
<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, אז אנחנו מזמינים אתכם לנסות אותו ולספר לנו מה דעתכם.
משאבים
- אימות מספרי טלפון באינטרנט באמצעות Web OTP API
- שיטות מומלצות לשימוש בטופסי SMS OTP
- WebOTP API
- קודים חד-פעמיים מקושרים למקור, שנשלחים ב-SMS
תמונה של rupixen.com ב-Unsplash