उपयोगकर्ता स्क्रिप्ट (बग बायपास) के माध्यम से Google Chrome में क्रॉस-डोमेन डेटा प्राप्त करना

क्रोम और क्रोमियम में 2.5 साल तक एक संदर्भ स्क्रिप्ट (उपयोगकर्ता स्क्रिप्ट) से दूसरे फ्रेम में क्रॉस-डोमेन एक्सेस की कमी का एक बग रहा है। जो आम तौर पर एक नियमित पेज स्क्रिप्ट में काम करता है, उदाहरण के लिए, पोस्टमैसेज का उपयोग करके क्रॉस-साइट डेटा ट्रांसफर और जो कि अन्य ब्राउज़रों में समस्याओं के बिना काम करता है, को कभी-कभी क्रोम में "सुरक्षा प्रतिबंध" माना जाता है, लेकिन वास्तव में यह एक सामान्य और मान्यता प्राप्त बग है , 4- के लिए नोट किया गया वें संस्करण।

यह ज्ञात है कि इस तरह की समस्याओं को क्रोम एक्सटेंशन में हल किया जाता है जब उन्हें एक्सेस अधिकार सौंपा जाता है, लेकिन इस मामले का सार यह है कि ऐसे सामान्य कार्यों के लिए अतिरिक्त एक्सेस अधिकारों की आवश्यकता नहीं है, आपको बस एक ब्राउज़र में बग को बायपास करने की आवश्यकता है। और फिर हम एक एकल फ़ाइल एक्सटेंशन लिख सकते हैं जो उन सभी ब्राउज़रों में काम करता है जो उपयोगकर्ता स्क्रिप्ट का समर्थन करते हैं। ऐसे कार्यों का एक उदाहरण जो पारंपरिक लिपियों द्वारा हल नहीं किया जाता है, वह Google प्लस बटन (Google Apps में विशेष प्राधिकरण के बिना और सर्वर तकनीकों के बिना) से "पसंद" की संख्या पर डेटा प्राप्त करना है। ऐसे और इसी तरह के कार्यों के लिए जिसमें "विक्रेता" एक एपीआई प्रदान नहीं करता है, एक उपयोगकर्ता स्क्रिप्ट की आवश्यकता होती है (आवश्यक), और इसे प्रत्येक ब्राउज़र के लिए अलग-अलग होना जरूरी नहीं है, क्योंकि एक्सटेंशन की आवश्यकता होती है।

एक उपयोगकर्ता स्क्रिप्ट में Google+ बटन से "लाइक" की संख्या प्राप्त करने का एक उदाहरण जो कि सभी ब्राउज़रों में काम करता है (IE को छोड़कर) HabrAjax में उपलब्ध है। वहां, "पसंद" का मान एक एम्बेडेड स्क्रिप्ट द्वारा फ्रेम के अंदर पढ़ा जाता है और बटन की सतह पर अधिक कॉम्पैक्ट डिस्प्ले के लिए बाहर निकाला जाता है। लगभग 50 पिक्सेल की चौड़ाई के साथ 4-5 अंकों की संख्या के लिए साइड फुटर। शैलियों को छुपाता है, जो बटन पर जगह बचाता है। नीचे एक स्क्रीनशॉट है।

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

फ़ायरफ़ॉक्स 3+, IE8 +, Safari4 +, ओपेरा 9.5+, Chrome1 + में समर्थित पोस्टमासेज विधि का उपयोग करके डेटा को काफी प्राप्त किया जाता है। पुराने ब्राउज़रों के लिए, वे हैक का उपयोग करते हैं जैसे कि iframe हैश, iframe नाम। रिसीवर विंडो में घटना " संदेश " के लिए एक श्रोता रखें:

window.addEventListener("message", /*Function*/receiveMessage, false); 

विंडो- (या फ्रेम-) स्रोत में, एक पाठ संदेश भेजा जाता है:

 (target_window).postMessage(/*Srting*/data, /*Srting*/domainTarget); 

स्रोत संदर्भ को लक्ष्य विंडो में इंगित करना चाहिए, और दूसरे तर्क में रिसीवर के डोमेन को सुरक्षा उद्देश्यों के लिए स्पष्ट रूप से निर्दिष्ट करने की सिफारिश की जाती है, न कि तारांकन ("किसी भी डोमेन" के अर्थ में) एक पंक्ति लिखने के बजाय। क्रोम में, संदर्भ स्क्रिप्ट में एक बग पॉप अप होता है - ब्राउज़र को ऑब्जेक्ट (लक्ष्य विंडो) .postMessage की समझ प्रदान करनी चाहिए, और सामान्य स्क्रिप्ट में यही होता है। उपयोगकर्ता स्क्रिप्ट्स के लिए, Chrome एक ऑब्जेक्ट अनिश्चितता बग (लक्ष्य विंडो) का सामना करता है। अगर विंडो में संदेश स्रोत के अलावा कोई अन्य डोमेन है तो .PostMessage । इसलिए, एक अच्छी तरह से डिज़ाइन की गई संदेश संचरण योजना के लिए "बैसाखी" की आवश्यकता होती है।

क्रोम के लिए क्रॉस डोमेन ट्रांसफर प्रोसीजर एडिशन

रिसीवर की तरफ - कोई जोड़ नहीं, क्योंकि समस्या इसमें नहीं है। स्रोत में हम विंडो वातावरण में स्क्रिप्ट लोडिंग का उपयोग करते हैं।
एक विदेशी फ्रेम में एम्बेडेड स्क्रिप्ट में, हम पढ़ते हैं, उपस्थिति की प्रतीक्षा करते हुए, हमें जिस डेटा की आवश्यकता होती है।

 if(gPlusFrame){ /** * check occurrence of third-party event with growing interval * @constructor * @param{Number} t start period of check * @param{Number} i number of checks * @param{Number} m multiplier of period increment * @param{Function} checkOccur event handler * @param{Function} check event condition */ var Tout = function(h){ var th = this; (function(){ if((h.dat = h.check() )) //data place h.occur(); else if(hi-- >0) th.ww = setTimeout(arguments.callee, (ht *= hm) ); })(); }; new Tout({t:320, i:6, m: 1.6 ,occur: function(){ var id = location.hash.match(/(\?|#|&)id=([^&]+)/) //frame id [or name] , w = win; id = id && id.length && id[2]; var s = w.JSON && w.JSON.stringify && w.JSON.stringify( //must supported earlier {likes: this.dat.innerHTML, frme: id}) //data format , pHost = (function(a){ //host extract from parameter (#|&)parent if(!a.match(/^https?\:\/\//)) return''; var b = document.createElement('a'); b.href = a; b.pathname = b.search = b.hash =''; return b.href.replace(/\/\??\#?$/,'') })( decodeURIComponent( (w.location.href.match(/.*(\?|#|&)parent=([^&]+)/) ||[])[2] ||'') ); try{ //'s'.wcl(s) if(!isChrome || w.parent && w.parent.postMessage){ s && w.parent.postMessage(s, pHost); //all browsers except Chrome //wcl('postpost') }else if(s) winEval(function(args){ var w = window , p1 = arguments[0] , p2 = arguments[1]; if(w.postMessage && p1 && w != w.parent){ function wpm(){ w.parent.postMessage(p1, p2); //msg with a glance Chrome bug } w.document.all ? w.setTimeout(wpm, 0) : wpm(); } }, [s, pHost]); }catch(er){wcl(er)} } ,check: function(){ return document && document.querySelector('#aggregateCount'); } }); } 

और आवश्यक डेटा (पसंद की संख्या) का पता लगाने पर, दिए गए कोड का हिस्सा "कोशिश {" से शुरू होता है। Chrome को छोड़कर सभी ब्राउज़रों के लिए, पोस्टमैसेज () ईवेंट एक पंक्ति में बनाया गया है। Chrome के लिए, एक बग बायपास winEval () फ़ंक्शन में वर्णित है।

 /** * evaluate script in window scope * @param{Function} fs function or string is body of function * @param{String|Array} s string or array of strings for arguments * @param{Boolean} noOnce not delete script after exec */ var winEval = function(fs, s, noOnce){ //exec function/text in other scope s = (s ||[]) instanceof Array? s ||[] : [s]; //wrap by array var fs2 = typeof fs=='function' ? (fs +'').replace(/(^\s*function\s*\([^\)]*\)\s*\{\s*|\s*\}\s*$)/g,'') //clean wrapper : fs , as =''; for(var i =0, sL =s.length; i < sL; i++) //sequential array as += (i?',':'') +"'"+ s[i].replace(/'/g,"\\'").replace(/(\r\n|\r|\n)/g,"\\\n") +"'"; fs = '(function(){'+ fs2 +'}).apply(window,['+ as +']);'; //'fs'.wcl(fs, fs2) var d = document , scr = d.createElement('script'); scr.setAttribute('type','application/javascript'); scr.textContent = fs; var dPlace = d.body || d.getElementsByTagName('head') && d.getElementsByTagName('head')[0]; dPlace.appendChild(scr); if(!noOnce) dPlace.removeChild(scr); }; 

बग को दरकिनार करने का सारा ज्ञान यही है। जाहिर है, अतिरिक्त 30-40 लाइनों की आवश्यकता होती है। एक सांत्वना यह है कि ये रेखाएँ फ़ंक्शन हैं जो उपयोगकर्ता स्क्रिप्ट के अन्य स्थानों में उपयोगी हो सकती हैं।

यदि आपको दूसरी दिशा में डेटा ट्रांसपोर्ट करने की आवश्यकता है और इसके लिए एक उपयोगकर्ता स्क्रिप्ट की भी आवश्यकता है (यदि पेज पर एक नियमित स्क्रिप्ट लिखना संभव नहीं है), तो दूसरे डोमेन के लिए ठीक उसी अतिरिक्त की आवश्यकता होगी। मेटा डायरेक्टिव में अपने दूसरे डोमेन को जोड़कर एक ही प्रक्रिया और एक ही स्क्रिप्ट का उपयोग करना तर्कसंगत है।

फ़्रेम या स्क्रिप्ट प्रारूप आवश्यकताएँ

पोस्टमैसेज पद्धति को डोमेन के ज्ञान और लक्ष्य विंडो के पथ की आवश्यकता होती है। इसलिए, किसी उपयोगकर्ता स्क्रिप्ट में इन 2 मापदंडों को किसी तरह से पारित करना आवश्यक है। उन्हें या तो स्पष्ट रूप से निर्दिष्ट किया जाना चाहिए (उदाहरण के लिए, माता-पिता ), या एक सुलभ वातावरण से लिया जाना चाहिए। चूंकि स्क्रिप्ट क्रॉस-डोमेन फ़्रेम (या विंडो) में चलती है और (क्रोम के लिए) अन्य विंडो तक पहुंचने की क्षमता नहीं है, व्यवहार में वे फ़्रेम URL में डोमेन को इंगित करते हैं (यह किया जाता है, उदाहरण के लिए, Google+ बटन में)। इसलिए, मान लीजिए कि लक्ष्य विंडो का डोमेन नाम URl में प्रारूप /.* में लिखा गया है। END_LINK स्क्रीनशॉट&)parent=( [^ ^&†+)/ (यह वह रेग्युलर एक्सप्रेशन है जिसे पैरामीटर पहचानता है। उदाहरण के लिए, विजेट को कहा जाएगा। URL के साथ फ़्रेम में:
http://some-widget-site.com/abcd.php?a=1&b=2&parent=http://some-my-site.com/some-path ।
या एक ही है, लेकिन एक लंगर जोड़ा जाएगा:
http://some-widget-site.com/abcd.php?a=1&b=2#parent=http://some-my-site.com/some-path ।
यदि लक्ष्य डोमेन को सेट करने की कोई संभावना नहीं है, तो स्क्रिप्ट को फिर से लिखना चाहिए ताकि डोमेन को स्पष्ट रूप से या एक अलग तरीके से सेट किया जा सके (विकल्प के रूप में, शीर्ष विंडो से उसी पोस्टमेसेज के माध्यम से डोमेन के उपयोगकर्ता नाम को स्वीकार करें)। यह आगे माना जाता है कि डोमेन मूल पैरामीटर में निर्दिष्ट है। तो, विशेष रूप से, Google+ बटन में किया गया।

कृपया ध्यान दें कि यह जटिल तंत्र सभी ब्राउज़रों में काम करेगा, लेकिन इसके लिए अधिक संसाधनों की आवश्यकता है, क्योंकि eval () को स्पष्ट रूप से निष्पादित किया जाता है, इसलिए स्क्रिप्ट को [विंडो स्कोप] में लोड किया जाना चाहिए, जहां आवश्यक हो, अर्थात्, क्रोम ब्राउज़र में, जब तक बग 20773 मौजूद है। इसलिए, पोस्टमासेज की उपलब्धता की जांच करने के लिए वर्किंग स्क्रिप्ट में एक शाखा बनाई गई थी। क्रॉस-डोमेन फ्रेम और बग ट्रैवर्सल यदि विधि उपलब्ध नहीं है।

स्क्रिप्ट में कुछ उपयोगी कार्य हैं जो उपयोगकर्ता स्क्रिप्ट में कहीं और आवश्यक हैं और उन्हें लाइब्रेरी के रूप में लिया जा सकता है:
1) पर्यावरण में कार्यक्रम लोड करना [विंडो स्कोप] ([Global_scope]);
2) एक decelerating टाइमर का उपयोग कर स्वतंत्र अतुल्यकालिक डेटा की उपस्थिति पर नज़र रखने।

दूसरी प्रक्रिया सबसे अच्छा समाधान नहीं है, लेकिन कभी-कभी आपकी स्क्रिप्ट से स्वतंत्र स्थितियों की घटना के बारे में पता लगाने का कोई अन्य तरीका नहीं है, जैसा कि तीसरे पक्ष के विजेट के परिणामों की जांच करने के मामले में है। Google+ फ्रेम में "पसंद" की संख्या को पढ़ते समय यह केवल मामला है।

पुनश्च । Admins, GreaseMonkey ब्लॉग का नाम बदलें, कृपया, अंत में, "उपयोगकर्ता नाम"।