WebOTP एपीआई की मदद से, क्रॉस-ऑरिजिन iframe में ओटीपी फ़ॉर्म भरें

WebOTP API अब iframes से ओटीपी पा सकता है.

Eiji Kitamura
Yi Gu
आम तौर पर, एसएमएस से मिलने वाले ओटीपी (एक बार इस्तेमाल होने वाले पासवर्ड) का इस्तेमाल फ़ोन नंबर की पुष्टि करने के लिए किया जाता है. जैसे, पुष्टि करने के दूसरे चरण के तौर पर या वेब पर पेमेंट की पुष्टि करने के लिए. हालांकि, ओटीपी को मैन्युअल तरीके से डालने या कॉपी करके चिपकाने के लिए, ब्राउज़र और एसएमएस ऐप्लिकेशन के बीच स्विच करने पर, गड़बड़ियां होने की संभावना बढ़ जाती है. साथ ही, उपयोगकर्ता अनुभव भी खराब हो जाता है.

WebOTP API वेबसाइटों को एसएमएस मैसेज से एक बार इस्तेमाल होने वाला पासवर्ड, प्रोग्राम के हिसाब से अपने-आप पाने की सुविधा देता है. साथ ही, वह सिर्फ़ एक टैप करके उसे अपने-आप फ़ॉर्म में डाल देता है. यह एसएमएस खास तरह से फ़ॉर्मैट किया जाता है और ऑरिजिन से ही जुड़ा होता है. इसलिए, फ़िशिंग वेबसाइटों से ओटीपी चुराने की संभावना कम हो जाती है.

इस्तेमाल का एक ऐसा उदाहरण जो अब तक WebOTP में काम नहीं करता था वह था, iframe में मौजूद ऑरिजिन को टारगेट करना. आम तौर पर, इसका इस्तेमाल पेमेंट की पुष्टि करने के लिए किया जाता है. खास तौर पर, 3D Secure के साथ. क्रॉस-ऑरिजिन iframe के साथ काम करने के लिए एक सामान्य फ़ॉर्मैट का इस्तेमाल करके, WebOTP API अब Chrome 91 और उसके बाद के वर्शन में, नेस्ट किए गए ऑरिजिन के लिए ओटीपी डिलीवर करता है.

WebOTP API कैसे काम करता है

WebOTP API, अपने-आप में काफ़ी आसान है:

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

एसएमएस मैसेज को ऑरिजिन से जुड़े एक बार इस्तेमाल होने वाले कोड के हिसाब से फ़ॉर्मैट किया जाना चाहिए.

Your OTP is: 123456.

@web-otp.glitch.me #12345

ध्यान दें कि आखिरी लाइन में, @ से पहले बाउंड किया जाने वाला ऑरिजिन है. इसके बाद, # से पहले ओटीपी है.

टेक्स्ट मैसेज आने पर, एक जानकारी वाला बार पॉप-अप होता है. इसमें उपयोगकर्ता को अपने फ़ोन नंबर की पुष्टि करने के लिए कहा जाता है. उपयोगकर्ता के Verify बटन पर क्लिक करने के बाद, ब्राउज़र अपने-आप OTP को साइट पर फ़ॉरवर्ड कर देता है और navigator.credentials.get() को हल कर देता है. इसके बाद वेबसाइट, ओटीपी निकाल सकती है और पुष्टि की प्रक्रिया पूरी कर सकती है.

WebOTP API की मदद से, वेब पर फ़ोन नंबर की पुष्टि करना लेख में, WebOTP इस्तेमाल करने के बुनियादी तरीके के बारे में जानें.

क्रॉस-ऑरिजिन iframe के इस्तेमाल के उदाहरण

पेमेंट से जुड़ी स्थितियों में, क्रॉस-ऑरिजिन iframe में किसी फ़ॉर्म में ओटीपी डालना एक आम बात है. क्रेडिट कार्ड जारी करने वाली कुछ कंपनियों को पेमेंट करने वाले व्यक्ति की पुष्टि करने के लिए, पुष्टि करने का एक और चरण पूरा करना पड़ता है. इसे 3D सिक्योर कहा जाता है और फ़ॉर्म को आम तौर पर उसी पेज पर iframe में दिखाया जाता है, जैसे कि वह पेमेंट फ़्लो का हिस्सा हो.

उदाहरण के लिए:

  • एक उपयोगकर्ता, क्रेडिट कार्ड से जूतों की एक जोड़ी खरीदने के लिए shop.example पर जाता है.
  • क्रेडिट कार्ड नंबर डालने के बाद, पेमेंट का तरीका उपलब्ध कराने वाली कंपनी, bank.example से मिले फ़ॉर्म को iframe में दिखाती है. इसमें, उपयोगकर्ता से तुरंत चेकआउट करने के लिए, अपने फ़ोन नंबर की पुष्टि करने के लिए कहा जाता है.
  • bank.example, उपयोगकर्ता को एक एसएमएस भेजता है. इसमें एक ओटीपी होता है, ताकि वह अपनी पहचान की पुष्टि करने के लिए उसे डाल सके.

क्रॉस-ऑरिजिन iframe से WebOTP API का इस्तेमाल करने का तरीका

क्रॉस-ऑरिजिन iframe में WebOTP API का इस्तेमाल करने के लिए, आपको दो काम करने होंगे:

  • एसएमएस टेक्स्ट मैसेज में, टॉप-फ़्रेम ऑरिजिन और iframe ऑरिजिन, दोनों के लिए एनोटेट करें.
  • अनुमति नीति को कॉन्फ़िगर करें, ताकि क्रॉस-ऑरिजिन iframe को उपयोगकर्ता से सीधे ओटीपी पाने की अनुमति मिल सके.
iframe में WebOTP API काम करता है.

https://web-otp-iframe-demo.stackblitz.io पर जाकर, डेमो को खुद आज़माया जा सकता है.

एसएमएस टेक्स्ट मैसेज में बाउंड-ऑरिजिन एनोटेट करना

जब किसी iframe से WebOTP API को कॉल किया जाता है, तो एसएमएस टेक्स्ट मैसेज में @ से पहले टॉप-फ़्रेम ऑरिजिन, # से पहले ओटीपी, और @ से पहले iframe ऑरिजिन शामिल होना चाहिए.

@shop.example #123456 @bank.exmple

अनुमतियों की नीति कॉन्फ़िगर करना

क्रॉस-ऑरिजिन iframe में WebOTP का इस्तेमाल करने के लिए, एम्बेड करने वाले को otp-credentials अनुमतियों की नीति के ज़रिए इस एपीआई को ऐक्सेस देना होगा. इससे, अनचाहे व्यवहार से बचा जा सकता है. आम तौर पर, इस लक्ष्य को हासिल करने के दो तरीके हैं:

  • एचटीटीपी हेडर की मदद से:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • iframe allow एट्रिब्यूट के ज़रिए:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

अनुमति की नीति तय करने के तरीके के बारे में ज़्यादा उदाहरण देखें .

चेतावनियां

नेस्ट करने के लेवल

फ़िलहाल, Chrome सिर्फ़ उन क्रॉस-ऑरिजिन iframe से WebOTP API कॉल को स्वीकार करता है जिनकी पैरंट चेन में एक से ज़्यादा यूनीक ऑरिजिन नहीं हैं. इन स्थितियों में:

  • 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"] के साथ वही एसएमएस फ़ॉर्मैट शेयर किया जाता है. Safari में, जब भी मैच होने वाले ऑरिजिन के साथ, ऑरिजिन-बाउंड वाला सिर्फ़ एक बार इस्तेमाल होने वाला कोड फ़ॉर्मैट वाला मैसेज आता है, तो कीबोर्ड, इनपुट फ़ील्ड में OTP डालने का सुझाव देता है.

अप्रैल 2021 से, Safari के यूनीक एसएमएस फ़ॉर्मैट के साथ iframe के साथ काम करता है. इसके लिए यह ज़रूरी है कि % का इस्तेमाल किया जा रहा हो. हालांकि, जैसे-जैसे @ के साथ खास बातों पर चर्चा खत्म हो गई, हमें उम्मीद है कि काम करने वाले एसएमएस फ़ॉर्मैट को लागू करने की प्रोसेस एक जैसी हो जाएगी.

सुझाव/राय दें या शिकायत करें

WebOTP API को बेहतर बनाने के लिए, आपके सुझाव, शिकायत या राय बहुत ज़रूरी हैं. इसलिए, इसे आज़माएं और हमें बताएं कि इसके बारे में आपकी क्या राय है.

संसाधन

Unsplash पर rupixen.com की ओर से अपलोड की गई फ़ोटो