क्रॉस-डोमेन पोस्टमैसेज या ब्राउज़र मानकों का समर्थन कैसे करते हैं

बैकअप स्क्रिप्ट में क्लाउड स्टोरेज को बन्धन करते समय, विभिन्न क्लाउड एपीआई के साथ उपयोग के लिए OAuth 2 प्राधिकरण का उपयोग करने की आवश्यकता थी। सिद्धांत रूप में, प्राधिकरण के साथ खुद को कोई कठिनाई नहीं थी, लेकिन समस्या थोड़ी अप्रत्याशित जगह पर पैदा हुई।

सॉफ्टवेयर का उपयोग करने वाले दर्शकों को देखते हुए, प्राचीन ब्राउज़रों के समर्थन को छोड़ने का फैसला किया गया था, और एचटीएमएल 5 का उपयोग करते हुए आधुनिक ब्राउज़रों के लिए सब कुछ तेज कर दिया गया था, जो काफी अच्छे और समान रूप से मानक मानकों का समर्थन करता प्रतीत होगा।

लेकिन, वहाँ यह था ...

विभिन्न ब्राउज़रों द्वारा पोस्टमासेज की व्याख्या

चूंकि यह क्रॉस-डोमेन (जब अलग-अलग डोमेन से पेज) ब्राउजर विंडो / टैब के बीच संचार का उपयोग करता है, पोस्टमासेज का उपयोग केवल क्रोम और फ़ायरफ़ॉक्स (क्रोम 30 और फ़ायरफ़ॉक्स 25 में परीक्षण) में संभव है।

IE में, पोस्टमैसेज केवल फ्रेम / आइफ्रेम (IE 11 सहित) का उपयोग करते समय काम करता है।

ओपेरा अप्रत्याशित रूप से आश्चर्यचकित हो गया। संस्करण 12 में, सब कुछ ठीक काम करता है। लेकिन ओपेरा 17 में, जो क्रोम के समान इंजन पर बनाया गया है, यह अलग तरह से व्यवहार करता है। यदि डोमेन अलग हैं, तो पोस्टमैसेज केवल फ्रेम / आइफ्रेम में काम करता है, और अलग विंडो / टैब में काम नहीं करता है। यदि डोमेन, अधिक सटीक उत्पत्ति (यानी प्रोटोकॉल + डोमेन + पोर्ट) समान हैं, तो संदेश काम करते हैं, दोनों फ्रेम के बीच और खिड़कियों / टैब के बीच।

ऐसा लगता है कि यदि सभी ब्राउज़र फ़्रेम के बीच क्रॉस-डोमेन संचार का समर्थन करते हैं, तो क्यों नहीं तुरंत एप्लिकेशन को आइफ्रेम में एक प्राधिकरण विंडो खोलें? लेकिन यहां सावधान एक्स-फ्रेम-ऑप्शंस बैंडवागन डालता है - लगभग सभी OAuth सर्वर पर यह फ्रेम में प्राधिकरण पृष्ठ को खोलने के लिए मना किया गया है।

प्रॉक्सी फ्रेम

डरावने नाम के बावजूद, यह एप्लिकेशन की साइट से डाउनलोड किया गया एक सामान्य iframe है, और इसका कार्य प्राप्त टोकन को एप्लिकेशन विंडो में स्थानांतरित करना है, क्योंकि यह ओपेरा और IE में सीमाओं के कारण सीधे स्थानांतरित नहीं किया जा सकता है।

विभिन्न विकल्पों की कोशिश करने के बाद, मैं टोकन प्राप्त करने के लिए अगले काफी सरल समाधान पर बस गया।

सुविधा के लिए, हम निम्नलिखित परिभाषाओं का उपयोग करते हैं:

1. एप्लिकेशन (वेब एप्लिकेशन उपयोगकर्ता के एक डोमेन पर स्थित है जिसे पहले से ज्ञात नहीं है)
2. प्रॉक्सी फ्रेम (एक मध्यवर्ती ढांचा जो एप्लिकेशन सर्वर में स्थित एप्लीकेशन में आईफ्रेम के साथ एम्बेडेड है)
3. एप्लिकेशन साइट (वह साइट जिसे उपयोगकर्ता OAuth प्राधिकरण के बाद पुनर्निर्देशित किया गया है)
4. OAuth सर्वर (एक्सेस करने के लिए सर्वर)

कुल में, हम 3 डोमेन का उपयोग करते हैं: domain1 - जहां उपयोगकर्ता एप्लिकेशन स्थित है, domain2 - प्रॉक्सी फ्रेम और एप्लिकेशन साइट, डोमेन 3 - OAuth सर्वर।

टोकन प्राप्त करने की प्रक्रिया इस प्रकार है:

1. एक प्रॉक्सी फ्रेम एप्लीकेशन पेज पर इंबेडेड है।
   
   
2. प्रॉक्सी फ्रेम में स्थित बटन पर क्लिक करने के बाद, OAuth सर्वर प्राधिकरण पेज एक नई विंडो / टैब में खुलता है।
   
   
3. उपयोगकर्ता की सहमति के बाद, OAuth सर्वर अनुरोध पैरामीटर में प्राधिकरण कोड के साथ उपयोगकर्ता को एप्लिकेशन वेबसाइट पर भेजता है।
4. एप्लिकेशन साइट OAuth सर्वर के लिए एक POST अनुरोध करती है, और अद्यतन करने के लिए एक टोकन के लिए एक टोकन के लिए प्राधिकरण कोड और एप्लिकेशन पासवर्ड का आदान-प्रदान करती है।
   
5. प्राप्त टोकन पाठ फ़ील्ड में डाला जाता है (यदि आप इसे स्वचालित रूप से कॉपी नहीं कर सकते हैं तो)। उसके बाद, स्थान के उपयोग से प्रॉक्सी फ्रेम में टोकन भेजा जाता है। परिवर्तन (यह सभी ब्राउज़रों में काम करता है, क्योंकि प्रॉक्सी फ्रेम और एप्लिकेशन साइट में एक ही प्रोटोकॉल, डोमेन, पोर्ट है)। वास्तव में, लोकेशन का उपयोग केवल IE के लिए आवश्यक है (IE 11 सहित), क्योंकि पोस्टमासेज इसमें अलग-अलग विंडो में काम नहीं करता है।
6. हैश बदलने के तुरंत बाद ऑनशॉस्क इवेंट का उपयोग करने वाला एक प्रॉक्सी फ्रेम पोस्टमेसेज का उपयोग करके टोकन भेजता है (क्योंकि डोमेन अब अलग हैं) और प्राधिकरण के लिए खुली खिड़की / टैब को बंद कर देता है।
7. Onmessage इवेंट का उपयोग करने वाला एप्लिकेशन टोकन प्राप्त करता है और पहले से ही अपने इच्छित उद्देश्य के लिए इसका उपयोग करता है।
   
   

योजनाबद्ध छवि

हालांकि, मैं सुंदर पैटर्न के अनुसार विशेष नहीं हूं। लेकिन मुझे उम्मीद है कि यह स्पष्ट होगा।

प्रदर्शन

इस पृष्ठ पर आप एक जीवित उदाहरण देख सकते हैं , सिवाय इसके कि OAuth प्राधिकरण स्वयं नकली है ताकि वास्तविक सर्वर खींचा न जाए।

सामान्य मोड में, टोकन स्थानांतरण इतना तेज़ होता है कि टेक्स्ट फ़ील्ड वाला पृष्ठ दिखाई नहीं देता है (यह जल्दी बंद हो जाता है)। इसलिए, जो अधिक विस्तार से देखना चाहता है, यहां एक उदाहरण है जिसमें खिड़की 5 सेकंड की देरी से बंद हो जाती है ।

PostMessage के बारे में और क्या पढ़ना है

learn.javascript.ru/cross-window-messaging-with-postmessage
javascript.ru/ajax/cross-origin-2
html5demos.com/postmessage2
habrahabr.ru/post/120336
caniuse.com/#search=postmessage

PS अगर मुझे दिलचस्पी है, तो मैं संग्रह में डेमो से स्रोत स्क्रिप्ट रख सकता हूं।