डेवलपर टूल · URL एनकोडर और डिकोडर
जब आप किसी क्वेरी स्ट्रिंग को डीकोड करते हैं तो + एक स्पेस क्यों बन जाता है, और कब नहीं
· यह काम किस प्रकार करता है
URL एन्कोडिंग जावास्क्रिप्ट डेवलपर-वर्कफ़्लो
+ का मतलब स्पेस है या नहीं यह इस बात पर निर्भर करता है कि आप किस डिकोडर को कॉल करते हैं। यह पोस्ट बताती है कि कैसे decodeURIComponent, URLSearchParams और सर्वर फ्रेमवर्क प्रत्येक + का इलाज करते हैं, और वास्तविक प्लस को एक स्थान में बदलने से कैसे बचें।
जब आप किसी क्वेरी स्ट्रिंग को डीकोड करते हैं तो + एक स्पेस क्यों बन जाता है, और कब नहीं
HTML फॉर्म सबमिशन एप्लिकेशन/x-www-form-urlencoded प्रारूप का उपयोग करते हैं, जहां स्थान प्लस हो जाता है। नाम=ऐलिस+स्मिथ प्राप्त करने वाला सर्वर मान निकालने से पहले प्रत्येक प्लस को स्पेस से बदल देता है। जब कोई वास्तविक प्लस डेटा में होता है, जैसे गणना 5+3 में, तो यह फॉर्म डिकोडिंग चरण के बाद 5 3 के रूप में सर्वर पर आता है। यह अदृश्य रूपांतरण ही भ्रम की जड़ है।
JavaScript डिकोडिंग आपके द्वारा उपयोग किए जाने वाले फ़ंक्शन के आधार पर अलग-अलग परिणाम उत्पन्न करता है। URLSearchParams सर्वर व्यवहार से मेल खाते हुए प्लस को स्पेस के रूप में मानता है। लेकिन decodeURIComponent इसे अक्षरशः मानते हुए इसे अछूता छोड़ देता है। फ़ंक्शंस के बीच यह विषमता यही कारण है कि एक ही इनपुट अलग-अलग तरीके से डिकोड होता है। एक डेवलपर जो दोनों डिकोडर्स से एक ही परिणाम देने की उम्मीद करता है, उसे पता चलता है कि ऐसा नहीं होता है।
दो एन्कोडिंग जो एक जैसी दिखती हैं - RFC 3986 प्रतिशत-एन्कोडिंग बनाम एप्लिकेशन/x-www-form-urlencoded
दो एन्कोडिंग मानक समान दिखते हैं लेकिन अलग-अलग तरीके से काम करते हैं। RFC 3986 प्रतिशत-एन्कोडिंग को परिभाषित करता है: कोई भी वर्ण %HH बन जाता है। स्पेस %20 हो जाता है. एप्लिकेशन/x-www-form-urlencoded मानक एक शॉर्टहैंड जोड़ता है: स्पेस प्लस हो सकता है। या तो फॉर्म संदर्भ में काम करता है, लेकिन प्लस वैकल्पिक है और उस मानक के लिए विशिष्ट है। वे समान दिखने वाले अलग-अलग डोमेन हैं।
DecodeURIComponent को कॉल करना केवल RFC 3986 डिकोडिंग पर लागू होता है। यह %20 को स्पेस और प्लस को शाब्दिक प्लस के रूप में पढ़ता है। URLSearchParams फॉर्म डिकोडिंग नियम लागू करता है: प्रतिशत-एस्केप उनके अक्षर बन जाते हैं, और प्लस स्पेस बन जाता है। दोनों फ़ंक्शन अलग-अलग डोमेन में एक ही समस्या का समाधान करते हैं। उन्हें मिलाने से या तो वास्तविक प्लस गायब हो जाता है, या प्लस बनने की जगह बन जाती है और परिवर्तित होने में विफल हो जाती है।
decodeURIComponent पत्ते + अकेले; URLSearchParams इसे एक स्थान में बदल देता है - दो JavaScript व्यवहारों की तुलना
सर्वर का व्यवहार अलग-अलग होता है, जिससे समस्या बढ़ जाती है। रेल्स या Django स्वचालित रूप से फॉर्म नियम लागू करते हैं: प्लस स्पेस बन जाता है। लेकिन URL डिकोडर के साथ कच्ची क्वेरी स्ट्रिंग को निकालना और मैन्युअल रूप से डिकोड करना प्लस बरकरार रहता है। विभिन्न ढाँचों द्वारा संसाधित समान मूल्य अलग-अलग परिणाम उत्पन्न करता है। सर्वर कोड अक्सर इसे अंतर्निहित रूप से संभालता है, जब तक आप एक कस्टम डिकोडर नहीं लिखते तब तक समस्या को छिपाते रहते हैं।
उदाहरण: एक फ़ोन नंबर फ़ील्ड +1-555-0100 को प्लस के साथ देश कोड के रूप में संग्रहीत करता है। एक HTML फॉर्म इसे %2B1-555-0100 के रूप में एन्कोड करता है क्योंकि JavaScript इसे %2B के रूप में एन्कोड करता है। सर्वर इसे प्राप्त करता है. यदि यह फॉर्म डिकोडिंग लागू करता है, तो %2B प्लस हो जाता है और मान सही होता है। यदि कोई प्रॉक्CAन्कोडिंग स्ट्रिप करता है, तो परिणाम पर decodeURIComponent को कॉल करने से +1-555-0100 उत्पन्न होता है। प्रत्येक परत एक बार डिकोड होती है।
सर्वर क्या करते हैं - क्वेरी स्ट्रिंग और अनुरोध निकाय में सामान्य रूपरेखा व्यवहार, सामान्य शब्दों में वर्णित है
JavaScript encodeURIComponent का उपयोग करके मानों को एनकोड कर सकता है। a+b दिए जाने पर, यह a%2Bb उत्पन्न करता है। जब वह एन्कोडेड स्ट्रिंग सर्वर या फॉर्म-अवेयर डिकोडर तक पहुंचती है, तो %2B प्लस के रूप में डिकोड होता है और परिणाम सही होता है। यदि आप इसके बजाय फॉर्म नियम का उपयोग करके एनकोड करते हैं, तो एक स्पेस प्लस बन जाता है और एक वास्तविक प्लस %2B बन जाता है। किसी भी तरह से, एन्कोडिंग a%2Bb उत्पन्न करती है। व्याख्या इस पर निर्भर करती है कि कौन सा डिकोडिंग नियम लागू होता है।
राउंड ट्रिप का परीक्षण करें: a+b से प्रारंभ करें। %2Bb प्राप्त करने के लिए encodeURIComponent के साथ एन्कोड करें। DecodeURIComponent के साथ a%2Bb को डिकोड करें और a+b पुनर्प्राप्त करें। URLSearchParams में a+b पास करें: यह प्लस को स्पेस के रूप में मानता है, a b उत्पन्न करता है। a+b वापस पाने के लिए URLSearchParams में a%2Bb पास करें। आपके द्वारा उपयोग किए जाने वाले डिकोडर के आधार पर एक ही इनपुट को दो तरीकों से डिकोड किया जाना अलग-अलग आउटपुट उत्पन्न करता है।
कार्यान्वित उदाहरण: 'a+b' और 'a%2Bb' दोनों डिकोडर के माध्यम से - एक तालिका में चार परिणाम
सामान्य गलतियाँ सीधे अनुसरण करती हैं। एक डेवलपर decodeURIComponent के साथ डीकोड करता है और आश्चर्य करता है कि वास्तविक प्लस के साथ आने वाला फॉर्म डेटा क्यों टूट जाता है। उन्हें URLSearchParams का उपयोग करना चाहिए था। इसके विपरीत, कोई व्यक्ति URLSearchParams का उपयोग तब करता है जब उसे decodeURIComponent का उपयोग करना चाहिए, और प्रत्येक शाब्दिक प्लस गायब हो जाता है। दो बार एन्कोडिंग करने से %252B उत्पन्न होता है, जिससे मिलान करने वाले एनकोडर-डिकोडर जोड़े को सही ढंग से डिकोड करने की आवश्यकता होती है।
एक और गलती एन्कोडिंग के बिना ?q=value के रूप में हाथ से एक क्वेरी स्ट्रिंग का निर्माण करना है। मान में कोई भी एम्परसेंड या बराबर चुपचाप एक नया पैरामीटर बनाता है। ब्राउज़र संयोजन का दूसरा अनुमान नहीं लगाता; यह परिणाम को उचित रूप से गठित मानता है। केवल encodeURIComponent के साथ जानबूझकर एन्कोडिंग ही इसे रोकती है। URL एनकोडर और डिकोडर सभी तीन कार्यों को दिखाता है, जिससे पता चलता है कि प्रत्येक क्या उत्पन्न करता है।
सामान्य गलतियाँ - दो बार डिकोड करना, या पथ खंड में किसी स्थान को + के रूप में एन्कोड करना
प्रपत्र एन्कोडिंग नियम को एप्लिकेशन/x-www-form-urlencoded कहा जाता है क्योंकि यह HTTP अनुरोध निकाय सामग्री-प्रकार हेडर का वर्णन करता है। HTML बिना फ़ाइल अपलोड वाले फ़ॉर्म इस प्रारूप में मुख्य भाग भेजते हैं। URL में क्वेरी स्ट्रिंग भी इस सम्मेलन का उपयोग करती हैं, हालांकि तकनीकी रूप से उनके पास कोई आधिकारिक एन्कोडिंग मानक नहीं है। URL विनिर्देश क्वेरी को अपारदर्शी मानते हैं; प्लस अर्थ अनिवार्य नहीं है. लेकिन वेब एप्लिकेशन में प्लस का मतलब आमतौर पर स्पेस होता है।
सही व्यवहार की गारंटी के लिए, जानबूझकर एनकोड करें और मिलान फ़ंक्शन के साथ डीकोड करें। यदि आपने encodeURIComponent से एनकोड किया है, तो DecodeURIComponent से डीकोड करें। यदि HTML फॉर्म डेटा पढ़ रहे हैं या फॉर्म प्रारूप में बॉडी का अनुरोध कर रहे हैं, तो URLSearchParams का उपयोग करें। दिखावे के आधार पर कभी अनुमान न लगाएं। a+b जैसी स्ट्रिंग अस्पष्ट है। डिकोडर विनिमेय नहीं हैं।
इसमें क्या शामिल नहीं है - मल्टीपार्ट फॉर्म डेटा और JSON अनुरोध निकाय
मल्टीपार्ट फॉर्म डेटा, JSON अनुरोध निकाय और अन्य मानकों के अलग-अलग एन्कोडिंग नियम हैं। JSON स्पेस या प्रतिशत-एन्कोडिंग के लिए प्लस का उपयोग नहीं करता है; यह यूनिकोड एस्केप का उपयोग करता है। मल्टीपार्ट विभिन्न सीमाओं का उपयोग करता है। यह आलेख केवल क्वेरी स्ट्रिंग्स और फॉर्म-एन्कोडेड बॉडीज को कवर करता है, क्योंकि यहीं पर प्लस अस्पष्टता दिखाई देती है। हमेशा सामग्री-प्रकार शीर्षलेख और इसे परिभाषित करने वाले RFC की जांच करें।
किसी क्वेरी मान में शाब्दिक प्लस को हमेशा %2B के रूप में एन्कोड करें। URL एनकोडर और डिकोडर दिखाता है कि घटक मोड में प्लस को %2B के रूप में कैसे संरक्षित किया जाता है, रिक्त स्थान से अलग जो %20 बन जाता है। प्रत्येक मोड से a+b और a%2Bb पास करें, फिर परिणामों की जांच करें। वह तुलना दर्शाती है कि क्यों एक ही इनपुट अलग-अलग तरीके से डिकोड होता है। अंतर दो अलग-अलग मानकों के सही व्यवहार का है।
टेकअवे: हमेशा शाब्दिक प्लस को %2B के रूप में एन्कोड करें - URL एन्कोडर और डिकोडर कैसे दिखाता है कि प्रतिशत-एन्कोडेड क्वेरी मान के रूप में कोई मान कैसा दिखता है
टेकअवे: क्वेरी स्ट्रिंग में प्लस स्पेस के लिए फॉर्म एन्कोडिंग शॉर्टहैंड है, शाब्दिक प्लस नहीं, जब तक कि यह एन्कोडिंग से नहीं आया है जो इसे %2B के रूप में संरक्षित करता है। गलत डिकोडर उस सुरक्षा को खो देता है। URLSearchParams आधुनिक JavaScript में सबसे सुरक्षित है; यह फॉर्म एन्कोडिंग को संभालता है और नामित पैरामीटर एक्सेस देता है। कच्ची स्ट्रिंग्स के लिए, encodeURIComponent हर चीज़ की सुरक्षा करता है; decodeURIComponent %20 और प्रतिशत की व्याख्या करता है लेकिन प्लस को शाब्दिक रूप से मानता है।
इसका परीक्षण करें: हाथ से ?x=a+b बनाएं और URL एनकोडर और डिकोडर में पेस्ट करें। इसका निरीक्षण करें और URLSearchParams को इसे मान a b के साथ पैरामीटर x में विभाजित करते हुए देखें। ?x=a%2Bb चिपकाएँ और मान a+b देखें। URL बनाने और तुलना करने के लिए encodeURIComponent का उपयोग करें। वह दृश्य पुष्टि नियम को स्पष्ट करती है: प्रपत्र नियम प्लस का उपयोग करते हैं, प्रतिशत-एन्कोडिंग %20 का उपयोग करती है, उन्हें मिलाने से प्लस अंतरिक्ष में गायब हो जाता है।