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

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

डोमिनिक मेंगेल्ट
डोमिनिक मेंगेल्ट

क्रॉस-ऑरिजिन 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>

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

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

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

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

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

एक ही ऑरिजिन से जुड़ी नीति, सभी फ़्रेम में जानकारी को ऑटोमैटिक भरने के लिए एक मज़बूत बेसलाइन होती है. हालांकि, इससे ब्राउज़र को, भरोसेमंद और गैर-भरोसेमंद फ़्रेम के बीच अंतर पता करने के लिए, ज़रूरत के मुताबिक जानकारी नहीं मिलती.

उपयोगकर्ता के डेटा की सुरक्षा को बनाए रखते हुए, जानकारी ऑटोमैटिक भरने की सुविधा को बेहतर बनाने के लिए, 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 पर जेसिका रसेललो की फ़ोटो.