उतारना और पहले से लोड घटनाओं और कैसे आसानी से उन्हें दोनों डिबग करने के लिए!

tl; dr - यदि आप केवल ब्रेकपॉइंट सेट करने के तरीके के बारे में यहां बता रहे हैं और वास्तव में अनलोड और पूर्व-लोड श्रोताओं को डिबग करें, तो सीधे "ट्रिक को सफलतापूर्वक डिबग अनलोड / पहले से लोड इवेंट श्रोताओं" अनुभाग पर जाएं।

जैसा कि मैं अक्सर करता हूं, मैं अच्छी तरह से ज्ञात वेबसाइटों और वेब अनुप्रयोगों में संभावित कमजोरियों की तलाश कर रहा था। एक विशिष्ट है कि मेरे पास यह विश्वास करने के कारण हैं कि एक गंभीर XSS शोषण के प्रति संवेदनशील हो सकता है।

इस प्रक्रिया में कुछ बिंदु पर, मुझे एहसास हुआ कि जो हिस्सा XSS के लिए असुरक्षित हो सकता है, उसे एक अनलोड इवेंट श्रोता द्वारा निष्पादित किया जाता है जो वेबसाइट में कुछ जावास्क्रिप्ट कोड द्वारा पंजीकृत किया गया था। यह वह जगह थी जहाँ मुझे यह बताने में सक्षम होना था कि मुझे यहाँ कुछ दिलचस्प मिला या नहीं।

इसलिए मैंने एक ब्रेकपॉइंट सेट किया जहां कोड को अनलोड घटना से निकाल दिया जाना है, और मेरे Google Chrome ब्राउज़र को मेरे इस ब्रेकपॉइंट पर रुकने की अनुमति देने के लिए पृष्ठ को फिर से लोड किया, जिससे मुझे डिबग करना पड़ा।

उन लोगों के लिए जिनके पास पर्याप्त जावास्क्रिप्ट अनुभव है, निम्नलिखित आपको बिल्कुल भी झटका नहीं देंगे: ब्राउज़र ने मेरे ब्रेकपॉइंट को पूरी तरह से अनदेखा कर दिया और पृष्ठ को सामान्य रूप से पुनः लोड किया।

यह एक प्रकार का कष्टप्रद है। मेरा मतलब है, इस घटना के तहत निष्पादित करने का इरादा रखने वाला कोई भी जावास्क्रिप्ट कोड पूरी तरह से ठीक है - चाहे वह कंसोल.लॉग (), लोकलस्टोरीजेटसेट / (कोई भी मानक कार्रवाई) हो। तो मेरे ब्रेकअप के बारे में क्या गलत है? या डिबगर रखने; आदेश? ये काम क्यों नहीं करते?

इस व्यवहार को समझने के लिए, इन घटनाओं को समझने के लिए हमें समझ में आता है। इन घटनाओं का उद्देश्य एक वेबसाइट को पूर्व-कॉन्फ़िगर किए गए कार्यों को ठीक से पहले निष्पादित करने में सक्षम करना है, अनलोड करता है और जब यह अनलोड होता है।
 या, MDN में वर्णित के रूप में अधिक विशिष्ट होने के लिए: "विंडो, दस्तावेज़ और उसके संसाधनों को अनलोड किए जाने से पहले की गई घटना को निकाल दिया जाता है" और "अनलोड घटना को निकाल दिया जाता है जब दस्तावेज़ या एक बाल संसाधन को अनलोड किया जा रहा है। "। (जिसका अर्थ है कि यह वेबसाइट के बारे में नहीं है जितना कि किसी भी विंडो के बारे में है जो वेबसाइट के भीतर रहता है, चाहे वह शीर्ष फ्रेम हो या आईफ्रेम)

तो आइए इन दोनों घटनाओं के विभिन्न गुणों को सूचीबद्ध करने और उनकी तुलना करने की कोशिश करें:

आदेश: पहले से लोड हमेशा अनलोड घटना से पहले आग लग जाएगी (समझ में आता है, सही?)

उद्देश्य: विंडो को अनलोड करने से पहले रद्दी लोड घटना पहले से ही चालू हो जाती है। विंडो के उतारने के समय अनलोड किया जाएगा।

रद्द करने योग्य: पहले से लोड किए गए ईवेंट को उपयोगकर्ता सहभागिता द्वारा रद्द किया जा सकता है:

उपर्युक्त उदाहरण उपयोगकर्ता को यह पूछते हुए एक पॉपअप ट्रिगर करेगा कि क्या वे सुनिश्चित हैं कि वे साइट को छोड़ना चाहते हैं या नहीं, और यदि वे छोड़ने के लिए नहीं चुनते हैं, तो पहले की घटना को रद्द कर दिया जाएगा, अनलोड घटना कभी भी शुरू नहीं होगी, और पृष्ठ पुनः लोड नहीं होगा। दूसरी ओर, यह एक अनलोड घटना के लिए नहीं होगा - एक बार जब इसे निकाल दिया जाता है, तो खिड़की को उतारने से रोकने का कोई तरीका नहीं है।

सहायक वस्तुएं: पहले से लोड और अनलोड दोनों घटनाओं को खिड़की, HTMLElementBody और HTMLFrameSetElement द्वारा सुनी जा सकती हैं।

यह उल्लेखनीय है कि तीनों (खिड़की, शरीर और तख्ते) के अनलोड गुण एक ही स्थान की ओर इशारा करते हैं (वही पहले से लोड के लिए जाता है):

ओह, और आप में से उन लोगों के लिए जो आश्चर्य करते हैं कि "दुनिया में क्या एक फ्रेमसेट है?" - इसके बारे में चिंता न करें। यह यह सुपर पुराना और पदावनत तत्व है जो अब उपयोग में नहीं है। वास्तव में, यह वर्तमान में अप्रचलित के रूप में परिभाषित किया गया है, जिसका अर्थ है कि यह किसी भी बड़े ब्राउज़र के किसी भी नए संस्करण में कभी भी जा सकता है!

प्रोटोटाइप: जबकि उतराई एक सामान्य घटना है जो घटना से विरासत में मिली है, इससे पहले कि भार का अपना प्रोटोटाइप है, इससे पहले कि पहले से लोड किया गया हो। यह पहले से लोड होने वाले ईवेंट के अनन्य प्रॉपर्टी रिटर्नवैल्यू को लागू करने के लिए है, जो पंजीकृत इवेंट श्रोता को "क्या आप सुनिश्चित करना चाहते हैं कि आप इस साइट को छोड़ना चाहते हैं?" डायलॉग बॉक्स प्रदर्शित करें।

तो कैसे एक पहले से लोड / अनलोड घटना श्रोता डिबग कर सकते हैं?

और अब शांत भाग के लिए! जैसा कि मैं शुरुआत में कह रहा था, इन घटनाओं को डीबग करना बहुत मुश्किल है, क्योंकि जब आप इसके बारे में सोचते हैं, तो आप करने में सक्षम नहीं होते हैं। अनलोड और पूर्व-लोड घटनाओं का उद्देश्य बहुत स्पष्ट है: पृष्ठ अनलोड होने से पहले और जब पूर्व-निर्धारित क्रियाओं का एक सेट निष्पादित करें। सभी सिंक्रोनस क्रियाओं को पूरी तरह से निष्पादित करने की गारंटी है, लेकिन जब यह अतुल्यकालिक क्रियाओं की बात आती है जो कि इवेंट श्रोता के अंदर सिंक्रोनस क्रियाओं द्वारा शुरू की जाती हैं, तो ब्राउज़र को अधिक पसंद होता है "मैं आपके सभी कार्यों को निष्पादित करने के लिए अपनी पूरी कोशिश करूंगा, लेकिन जब अनलोड घटना हो खत्म मैं तुम्हें कुछ भी वादा नहीं कर सकता ”।

लेकिन क्या ब्राउज़र किसी भी प्रकार की कार्रवाई को निष्पादित करने के लिए सहमत है? जवाब न है। कुछ प्रकार की कार्रवाइयाँ होती हैं जिन्हें पहले से लोड / अनलोड घटनाओं के श्रोताओं के भीतर निष्पादित करने की अनुमति नहीं है। चेतावनी () एक उदाहरण है, लेकिन सबसे अधिक प्रासंगिक एक डीबगर है; (और न ही devtools का उपयोग कर एक ब्रेकपॉइंट सेट कर रहा है)।

तो श्रोता में एक विराम बिंदु सेट करना, एक डिबगर सेट करना; बयान या कुछ और वास्तव में - सभी को ब्राउज़र द्वारा अनदेखा किया जाएगा, इस प्रकार अनलोड / पहले से लोड घटना को असंभव की तरह डिबगिंग करना।

ट्रिक को सफलतापूर्वक डिबग अनलोड / इससे पहले इवेंट श्रोताओं को

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

जाहिरा तौर पर एक अनलोडिंग प्रवाह है जिसमें ब्राउज़र ब्रेकपॉइंट और डीबगर का सम्मान करता है; कथन - पृष्ठ का सामान्य पुनः लोड नहीं है, लेकिन इसके टैब को पूरी तरह से बंद करने का वास्तविक प्रयास है!

मैं अभी भी उसके बाद सोने चला गया क्योंकि यह वास्तव में देर हो चुकी थी - लेकिन कभी भी जब से मैं आसानी से अनलोड / पहले के घटना श्रोताओं को डिबग कर सकता हूं!

शोधकर्ताओं के लिए टिप्स
  1. अपनी Chrome विंडो में एक अतिरिक्त टैब खुला रखें - एक बार जब आप श्रोताओं को डिबग करने के लिए ट्रिक का उपयोग करते हैं, हालांकि आप उन्हें डीबग करने में सक्षम होंगे, तो आप टैब को बंद करने से नहीं रोक पाएंगे। एक ही विंडो पर काम करते समय बार-बार ऐसा करना आसान होता है, जो कि केवल तभी संभव होगा जब विंडो में क्लोजिंग टैब एकमात्र टैब न हो।
  2. Google Chrome Browser - मैंने जाँच नहीं की है कि क्या यह ट्रिक क्रोम के अलावा अन्य ब्राउज़र पर काम करती है, ज्यादातर इसलिए कि मैं किसी अन्य ब्राउज़र में जावास्क्रिप्ट कोड को डीबग करने का कारण नहीं देखता (हाँ, मैंने कहा था)।
     यह अन्य ब्राउज़रों पर काम कर सकता है - फिर से, कभी भी जाँच नहीं की गई।
  3. अपने मामले को पहले समझें - यदि आप जिस कोड को डिबग करने का प्रयास करते हैं, वह किसी कारण, सत्र-आधारित, सत्र को बंद करना (ऊपर दिए गए ट्रिक का उपयोग करके और टैब को बंद करके) हर बार आप वास्तव में शोध के लिए जो प्रयास करते हैं उससे एक अलग प्रवाह बना सकते हैं। - जब डिबगिंग पर विचार करें!
डेवलपर्स के लिए युक्तियाँ
  1. इन श्रोताओं के अंदर कोई लंबी क्रिया नहीं है - हालांकि व्यावहारिक रूप से आप श्रोताओं के अंदर जो चाहते हैं, उसे तुल्यकालिक रूप से कर सकते हैं, यह बुरा अभ्यास है! यह सुनिश्चित करने के लिए कि आप अपनी वेबसाइट को सुचारू रूप से उतारने से उपयोगकर्ता को रोकने के लिए लंबी कार्रवाइयों से बचें।
  2. SendBeacon () का उपयोग करें यदि आपको अनलोड करने से पहले डेटा भेजना चाहिए - कभी-कभी यह एक वेबसाइट के लिए समझ में आता है कि जब पृष्ठ अनलोड होने वाला हो तो कुछ POST डेटा भेजना चाहते हैं। सफलतापूर्वक ऐसा करने के लिए, SendBeacon () का आविष्कार किया गया था। (जैसे, गंभीरता से, यह इस मामले के लिए सचमुच का आविष्कार किया गया था) इसलिए इसका उपयोग सुनिश्चित करें कि यदि आप सुनिश्चित करना चाहते हैं कि आपके डेटा को प्रतिक्रिया की उम्मीद किए बिना भेजा जाए।
सारांश में

आशा है कि यह समझ में आया और आपको इन दो अनोखी घटनाओं, उनके उद्देश्य और उनके अंतर को समझने में मदद मिली। इसके अलावा, मुझे आशा है कि आपको लगता है कि डिबगिंग ट्रिक उपयोगी है - मुझे यकीन है!

अगर मैं इस लेख में कही गई किसी भी बात से चूक गया हूं या गलत हूं, तो मुझे यह सुनना अच्छा लगेगा, इसलिए मैं खुद को सही कर सकता हूं और इस पोस्ट को यथासंभव सटीक और उपयोगी बना सकता हूं।

ओह, और किसी भी jsfiddle डेमो के लिए खेद है .. किसी कारण से पहले और अनलोड घटनाओं के साथ बहुत आसानी से काम नहीं करते।
 मेरा सुझाव है कि आप किसी भी वेबसाइट में Chrome के डेवल्स कंसोल में ऊपर दिए गए स्निपेट्स को कॉपी-पेस्ट करें और इसे अपने लिए देखें।

संपादित करें: किसी भी पंजीकृत ईवेंट श्रोताओं को क्रोम डेवटूल में डिबग करने का बिलकुल तरीका मेरे ध्यान में आया है, क्योंकि ईवेंट के सभी श्रोताओं को डिबग करने का एक और तरीका। यह वास्तव में ऐसा करने का एक शानदार तरीका है, लेकिन:

  1. इसका उपयोग केवल पहले से लोड किए गए ईवेंट को डीबग करने के लिए किया जा सकता है, जबकि यहां प्रस्तुत ट्रिक आपको अनलोड इवेंट को डीबग करने की अनुमति देता है।
  2. यह आपको केवल सभी पंजीकृत श्रोताओं को डिबग करने की अनुमति देता है, जो कि जटिल वेबसाइटों में बहुत कष्टप्रद और अनावश्यक है, जहां बहुत सारे पंजीकृत ईवेंट श्रोता हैं और आप केवल एक विशिष्ट डीबग करना चाहते हैं।

गैल वीज़मैन द्वारा लिखा गया था।