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

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

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

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

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

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 Secure कहा जाता है. आम तौर पर, यह फ़ॉर्म उसी पेज पर iframe में दिखता है, जैसे कि यह पेमेंट प्रोसेस का हिस्सा हो.

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

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

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

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

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

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

b.com में WebOTP का इस्तेमाल किया जा सकता है, लेकिन 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 की ओर से अपलोड की गई फ़ोटो