इस पेज का अनुवाद Cloud Translation API से किया गया है.

सभी iframe में ऑटोमैटिक भरने की सुविधा: एक शुरुआती सुझाव

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

Dominik Mengelt

Sam Dutton

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

नीचे दिए गए उदाहरण में, कार्ड के मालिक का नाम और क्रेडिट कार्ड की समयसीमा खत्म होने की तारीख, टॉप-लेवल पेज (या मुख्य फ़्रेम) में है. हालांकि, क्रेडिट कार्ड नंबर और पुष्टि करने वाला कोड, पीएसपी के iframes में है.

<!-- Top-level document URL: https://merchant.com/... -->
<form>
  Cardholder name:    <input id="name">
  Credit card number: <iframe src="https://psp.com/..."><input id="num"></iframe>
  Expiration date:    <input id="exp">
  CVC:                <iframe src="https://psp.com/..."><input id="cvc"></iframe>
</form>

इस डायग्राम में, फ़ॉर्म का स्ट्रक्चर दिखाया गया है:

पेमेंट फ़ॉर्म में अलग-अलग फ़ील्ड अलग-अलग फ़्रेम में कैसे होते हैं, यह दिखाने वाला ट्री डायग्राम

कारोबारियों या कंपनियों के लिए, इस डिज़ाइन में सुरक्षा और सुविधाएं एक साथ मिलती हैं:

क्रॉस-ऑरिजिन iframes, पेमेंट से जुड़े संवेदनशील डेटा को व्यापारी/कंपनी/कारोबारी के इन्फ़्रास्ट्रक्चर से अलग रखते हैं. इससे PCI DSS का पालन करने में मदद मिलती है.
अलग-अलग फ़्रेम में फ़ॉर्म फ़ील्ड को व्यवस्थित और स्टाइल किया जा सकता है, ताकि वे व्यापारी/कंपनी/कारोबारी की वेबसाइट के लुक और स्टाइल से मेल खा सकें.

ब्राउज़र के हिसाब से, इसका मतलब है कि कई फ़्रेम वाले फ़ॉर्म के लिए, सामान्य और मान्य इस्तेमाल के उदाहरण मौजूद हैं. इससे, फ़ॉर्म के लिए सुरक्षा मॉडल के बारे में सवाल उठते हैं. उपयोगकर्ताओं के लिए, एक से ज़्यादा फ़्रेम वाले फ़ॉर्म से, ऑटोमैटिक भरने की सुविधा का खराब अनुभव मिल सकता है. इसका उदाहरण यहां दिया गया है:

एक ही सोर्स की नीति, सभी फ़्रेम में अपने-आप जानकारी भरने के लिए एक अच्छा आधार है. हालांकि, इससे ब्राउज़र को अपने-आप जानकारी भरने के लिए, भरोसेमंद और अविश्वसनीय फ़्रेम के बीच काफ़ी अंतर नहीं पता चलता.

उपयोगकर्ता के डेटा की सुरक्षा बनाए रखते हुए, ऑटोमैटिक भरने की सुविधा को बेहतर बनाने के लिए, Chrome की टीम एक प्रस्ताव पर काम कर रही है. इस प्रस्ताव के तहत, क्रॉस-ऑरिजिन iframe में ऑटोमैटिक भरने की सुविधा दी जाएगी. अगर फ़ॉर्म में, शेयर किए गए ऑटोमैटिक भरने की सुविधा का इस्तेमाल करने के लिए बदलाव किया जाता है, तो Chrome क्रेडिट कार्ड नंबर को क्रॉस-ऑरिजिन में भर देता है:

<!-- Top-level document URL: https://merchant.com/... -->
<form>
  Cardholder name:    <input id="name">
  Credit card number: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="num"></iframe>
  Expiration date:    <input id="exp">
  CVC:                <iframe src="https://psp.com/..." allow="shared-autofill"><input id="cvc"></iframe>
</form>

इससे, उपयोगकर्ता को अपने-आप जानकारी भरने की सुविधा का बेहतर अनुभव मिल सकता है:

शेयर की गई जानकारी अपने-आप भरने की सुविधा को स्थानीय तौर पर आज़माना

कमांड लाइन से फ़्लैग सेट करके, Chrome 93.0.4577.0 और इसके बाद के वर्शन में, डेस्कटॉप और मोबाइल पर किसी एक उपयोगकर्ता के लिए, शेयर की गई जानकारी ऑटोमैटिक भरने की सुविधा की जांच की जा सकती है.

--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill

सुविधा के इस्तेमाल के लिए सहायता का पता लगाना

shared-autofill प्रॉपर्टी उपलब्ध है या नहीं, यह पता लगाने के लिए इस कोड का इस्तेमाल करें:

if (document.featurePolicy && document.featurePolicy
      .features().includes('shared-autofill')) {
  console.log('shared-autofill available!');
}

आगे क्या करना है?

शेयर की गई ऑटोमैटिक भरने की सुविधा, अनुमतियों की नीति में ऑटोमैटिक भरने की सुविधा जोड़ने का शुरुआती प्रस्ताव है. फ़िलहाल, Chrome टीम अन्य ब्राउज़र वेंडर के साथ मिलकर, इस प्रस्ताव की समीक्षा कर रही है. सभी iframe में अपने-आप जानकारी भरने की सुविधा के लिए, उपयोगकर्ता अनुभव को बेहतर बनाने के अन्य सुझावों पर भी चर्चा की जा रही है.

इस प्रस्ताव पर काम करते हुए, हम आपको अपडेट देते रहेंगे. इस बीच, अगर आपके पास ऐसा चेकआउट पेज है जहां संवेदनशील <input> फ़ील्ड (क्रेडिट कार्ड नंबर, सीवीसी) को तीसरे पक्ष की सेवा देने वाली कंपनी से एम्बेड किया गया है, तो हमसे संपर्क करें. हमें यह जानकर खुशी होगी कि क्या सभी iframe में एक साथ ऑटोमैटिक भरने की सुविधा, चेकआउट की प्रोसेस के दौरान उपयोगकर्ताओं के लिए ऑटोमैटिक भरने की सुविधा को बेहतर बना सकती है.

ज़्यादा जानें

Unsplash पर, जेसिका रसेल की फ़ोटो.