WebOTP API יכול עכשיו לקבל OTP מתוך iframes.
באמצעות WebOTP API אפשר לקבל לאתרים באופן פרוגרמטי סיסמה חד-פעמית מהודעת SMS ולהזין אותה בטופס באופן אוטומטי בהקשה אחת, בלי לעבור בין האפליקציה. ה-SMS מעוצב במיוחד ומשויך למקור, כך שאפשר לצמצם את הסיכויים שאתרי פישינג יגנבו גם את ה-OTP.
אחד מהתרחישים לדוגמה שעדיין לא נתמך ב-WebOTP היה לטרגט מקור בתוך iframe. בדרך כלל האישור משמש לאישור תשלום, במיוחד ב-3D Secure. ב-WebOTP API יש פורמט נפוץ לתמיכה במסגרות iframe ממקורות שונים, ועכשיו הוא מספק סיסמאות OTP שמקושרות למקורות בתוך עץ החל מ-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.
תרחישים לדוגמה ב-iframes ממקורות שונים
הזנת OTP בטופס ב-iframe ממקורות שונים מקובלת בתרחישי תשלום. חלק ממנפיקי כרטיסי האשראי דורשים שלב אימות נוסף כדי לבדוק את האותנטיות של המשלם. השיטה הזו נקראת 3D Secure, ובדרך כלל הטופס חשוף ל-iframe באותו הדף כאילו הוא חלק מתהליך התשלום.
למשל:
- משתמש מבקר בכתובת
shop.exampleכדי לרכוש זוג נעליים באמצעות כרטיס אשראי. - אחרי הזנת מספר כרטיס האשראי, ספק התשלום המשולב יציג טופס מ-
bank.exampleבתוך iframe כדי לבקש מהמשתמש לאמת את מספר הטלפון שלו כדי לשלם בקופה במהירות. bank.exampleשולח למשתמש SMS עם OTP כדי שהוא יוכל להזין אותו לאימות הזהות שלו.
איך משתמשים ב-WebOTP API מ-iframe ממקורות שונים
כדי להשתמש ב-WebOTP API מתוך iframe ממקורות שונים, צריך לבצע שתי פעולות:
- בהודעת הטקסט ב-SMS, מציינים גם את המקור של המסגרת העליונה וגם את מקור ה-iframe.
- צריך להגדיר מדיניות הרשאות כדי לאפשר ל-iframe חוצה-מקורות לקבל OTP ישירות מהמשתמש.
תוכלו לנסות את ההדגמה בעצמכם בכתובת 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")
- באמצעות המאפיין
allowשל iframe:
<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, אבל ל-Safari יש את אותו פורמט SMS עם התמיכה ב-input[autocomplete="one-time-code"]. ב-Safari, ברגע שמתקבלת הודעת SMS שמכילה פורמט של קוד חד-פעמי לגישה למקור עם המקור התואם, המקלדת תציע להזין את ה-OTP בשדה הקלט.
החל מאפריל 2021, דפדפן Safari תומך ב-iframe עם פורמט SMS ייחודי באמצעות %.
עם זאת, מאחר שהדיון בנושא המפרט הסתיים עם @, אנחנו מקווים שההטמעה של פורמט SMS נתמך תחודש.
משוב
חשוב לנו לקבל מכם משוב כדי לשפר את WebOTP API, אז אתם מוזמנים לנסות אותו ולספר לנו מה דעתכם.
משאבים
- אימות מספרי טלפון באינטרנט באמצעות ה-Web OTP API
- שיטות מומלצות לטופס OTP ב-SMS
- WebOTP API
- קודים חד-פעמיים לגישה למקור נמסרים באמצעות SMS
תמונה מאת rupixen.com ב-UnFlood